Dessin LinearLayout avec coins arrondis

Je suis en train de mettre en œuvre un LinearLayout sous-classe qui se dessine, avec des coins arrondis. Au cours de ma recherche, j'ai mis setWillNotDraw(false) et remplacé onDraw() pour dessiner un rectangle arrondi dans la toile:

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    int sc = canvas.saveLayer(0, 0, getWidth(), getHeight(), drawPaint, Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG
            | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG);
    canvas.drawRoundRect(bounds, mCornerRadius, mCornerRadius, roundPaint);
    canvas.restoreToCount(sc);
}

où:

drawPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
drawPaint.setColor(0xffffffff);
drawPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

roundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
roundPaint.setColor(0xffffffff);

DST_IN semble la bonne option ici (en fonction de la APIDemos exemple), mais la zone qui doit être transparente (arrondi) a en revanche un fond noir, et les coins de la les enfants sont encore visibles. C'est le résultat sur un Galaxy Nexus avec Android 4.2.2:

Dessin LinearLayout avec coins arrondis

Un indice?

EDIT: Voici ce que j'aimerais atteindre, désolé pour la grossièreté de photoshopping 🙂

Dessin LinearLayout avec coins arrondis

EDIT 2: j'ai ajouté à GitHub un exemple praticable projet: https://github.com/venator85/RoundClippingLayout

Merci 😉

source d'informationauteur Venator85

  1. 7

    Pas tout à fait la même :
    Romain Guy a fait un billet de blog sur le recadrage des coins sur les images bitmap à l'aide de shaders.. Pas sûr que si vous souhaitez étendre la même chose.

    http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/

  2. 5

    Essayer cela,

    Mise en page:-

    <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout 
        android:id="@+id/linearLayout"
        android:layout_width="300dp"
        android:gravity="center"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        android:background="@drawable/rounded_edge">
        <TextView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:text="foo" />
    </LinearLayout>
</RelativeLayout>

    Forme(Drawable):-rounded_edge.xml

    <shape 
        xmlns:android="http://schemas.android.com/apk/res/android">
            <solid 
                android:color="@android:color/darker_gray">
            </solid>
            <stroke 
                 android:width="0dp" 
                 android:color="#424242">
            </stroke>
            <corners 
                 android:topLeftRadius="100dip"
                 android:topRightRadius="100dip"
                 android:bottomLeftRadius="100dip"
                 android:bottomRightRadius="100dip">
            </corners>
        </shape>
  3. 2

    Comment sur...

    myLayout.setBackgroundResource(R.drawable.my_rounded_drawable);

    Alors...

    my_rounded_drawable.xml

    <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#FFFFFFFF" />
            <stroke android:width="1dip" android:color="#FF000000" />
            <corners android:radius="10dp" />
        </shape>
    </item>
</selector>
  4. 2

    Je pouvais parvenir à un LinearLayout avec des coins arrondis comme ça.

    Dessin LinearLayout avec coins arrondis

    Étapes:

    1. Créer une mise en page personnalisée

    public class RoundedLayout extends LinearLayout {
    private RectF rect;
    private Paint paint;

    public RoundedLayout(Context context) {
        super(context);
        init();
    }
    public RoundedLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        rect = new RectF(0.0f, 0.0f, getWidth(), getHeight());
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.parseColor("#7EB5D6"));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);           
        canvas.drawRoundRect(rect, 20, 20, paint);
    }
}

    2. L'utiliser dans la page principale comme ce

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#336699" >

    <com.example.rounded.RoundedLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:padding="30dp"
        android:background="@android:color/transparent" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="foo" />

    </com.example.rounded.RoundedLayout>    

</LinearLayout>
  5. 2

    Essayer !!
    prises à partir de ce post

    Ajouter le texte suivant dans un fichier (disons customshape.xml) et ensuite le placer dans (res/drawable/customshape.xml)

    <?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
 android:shape="rectangle"> 
 <gradient 
     android:startColor="#SomeGradientBeginColor"
     android:endColor="#SomeGradientEndColor" 
     android:angle="270"/> 

<corners 
     android:bottomRightRadius="7dp" 
     android:bottomLeftRadius="7dp" 
     android:topLeftRadius="7dp" 
     android:topRightRadius="7dp"/> 
</shape>

    Une fois que vous avez terminé avec la création de ce fichier, il suffit de définir l'arrière-plan de l'une des manières suivantes:

    À L'Aide De Code:

    yourObject.setBackgroundResource(R.drawable.customshape);

    Ou via un fichier XML, il suffit d'ajouter l'attribut suivant le conteneur (ex: LinearLayout ou à des champs):

    android:background="@drawable/customshape"
  6. 0

    Au lieu d'essayer de couper les coins hors de votre mise en page, pourquoi ne pas placer un Drawable sur le dessus comme une sorte de cadre qui correspond à la couleur de votre arrière-plan?

  7. 0

    [EDIT: il semble bien que ce sera ajouté dans L: https://developer.android.com/preview/material/views-shadows.html#clipqui permet de découper une vue à la forme d'un rectanglular, circulaire, rond ou rectangulaire drawable.]

    J'ai juste essayé pour un très long temps de faire moi-même, et est venu sur cette réponse qui suggère qu'il n'est pas possible, car la Vue de classe est basée sur la classe Rect. Je viens de vérifier la source et d'après les commentaires, on dirait que c'est encore le cas.

    Motorola est la libération de la Moto 360 (Android Porter la montre avec un visage rond) plus tard cet été, donc il y aura peut-être des mises à jour du cadre qui permettent de Vues avec des formes autres que des rectangles.