web-dev-qa-db-fra.com

Dessin LinearLayout avec des coins arrondis

J'essaie d'implémenter une sous-classe LinearLayout qui se dessine avec des coins arrondis. De mes recherches, j'ai mis setWillNotDraw(false) et substitué 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 être la bonne option ici (selon l'exemple APIDemos), mais la zone devant être transparente (celle arrondie) a plutôt un fond noir et les coins des enfants sont toujours visibles. Voici le résultat sur un Galaxy Nexus avec Android 4.2.2:

example

Des allusions?

EDIT: Voici ce que je voudrais réaliser, désolé pour la grossièreté de photoshopping :)

enter image description here

EDIT 2: J'ai ajouté à GitHub un exemple de projet exécutable: https://github.com/venator85/RoundClippingLayout

Merci ;)

androidandroid-canvas
12
Venator85

Ce n’est pas tout à fait pareil: Romain Guy a publié un article sur le recadrage d’images sur des images à l’aide de shaders bitmap. 

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

7
Chrispix

Essaye ça,

Disposition:-

<?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): - arrondi_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>
5
Sino Raj

Je pourrais réaliser un LinearLayout avec des coins arrondis comme celui-ci.

enter image description here

Steps :

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. Utilisez-le dans la disposition principale comme ceci

<?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>
3
appsroxcom

Essayez ceci !! Tiré de ceci post

Ajoutez ce qui suit dans un fichier (par exemple, customshape.xml), puis placez-le 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, définissez l’arrière-plan de l’une des manières suivantes:

Par code:

yourObject.setBackgroundResource(R.drawable.customshape);

Ou via XML, ajoutez simplement l'attribut suivant au conteneur (ex: LinearLayout ou à n'importe quel champ):

Android:background="@drawable/customshape"
3
Mehdi

Que diriez-vous...

myLayout.setBackgroundResource(R.drawable.my_rounded_drawable);

Ensuite...

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>
2
logray

[EDIT: on dirait que cela sera ajouté dans L: https://developer.Android.com/preview/material/views-shadows.html#clip , ce qui vous permet de découper une vue à la forme d’un rectangulaires, circulaires ou rectangulaires ronds pouvant être dessinés.]

J'ai juste essayé de le faire moi-même pendant très longtemps et je suis tombé sur cette réponse qui suggère que ce n'est pas possible, car la classe View est basée sur la classe Rect. Je viens de vérifier la source et d'après les commentaires, il semble que ce soit toujours le cas.

Motorola publiera la Moto 360 (montre Android Wear à cadran rond) plus tard cet été. Il sera peut-être mis à jour le cadre afin de permettre des vues avec des formes autres que des rectangles.

0
Patricia Li

Au lieu d'essayer de couper les coins de votre mise en page, pourquoi ne pas placer un dessin sur celui-ci comme une sorte de cadre qui correspond à la couleur de votre fond?

0
Jschools