Comment faire de mise en page avec des coins arrondis..?

Pour API 21+, Utilisez le Clip Vues

Rondeurs écrêtage a été ajouté à la View classe de l'API de 21. Voir ce formation doc ou ce référence pour plus d'info.

Cette fonction rend coins arrondis très facile à mettre en œuvre. Il fonctionne sur n'importe quel affichage ou de la disposition et prend en charge adéquate de l'écrêtage.

Voici Quoi Faire:

• Créer une forme arrondie drawable et le définir comme votre point de vue du fond:
  android:background="@drawable/round_outline"
• Selon la documentation, puis tout ce que vous devez faire est ceci: android:clipToOutline="true"

Malheureusement, il semble y avoir un bug et cet attribut XML n'est actuellement pas reconnu. Heureusement, nous pouvons définir le découpage en Java:

• Dans votre activité ou de fragment: View.setClipToOutline(true)

À Quoi Il Ressemble:

Note Spéciale Sur Les ImageViews

setClipToOutline() ne fonctionne que lorsque la Vue de l'arrière-plan est une forme drawable. Si cette toile de fond la forme existe, Vue traite le fond du contour des frontières pour le découpage et l'ombrage de ces fins.

Cela signifie que si vous voulez arrondir les coins sur un ImageView avec setClipToOutline(), votre image doit venir de android:src au lieu de android:background (depuis l'arrière-plan est utilisé pour la forme arrondie). Si vous DEVEZ utiliser un arrière-plan pour définir votre image à la place de la src, vous pouvez utiliser cette vues imbriquées solution de contournement:

• Créer un externe de la structure de fond mis à votre forme drawable
• Envelopper cette disposition autour de votre ImageView (sans rembourrage)
• L'ImageView (y compris autre chose dans la mise en page) va maintenant être fixé à l'extérieur du modèle de forme arrondie.

J'ai fait de cette façon:

Vérifier Capture D'Écran:

Créer drawable fichier nommé avec custom_rectangle.xml dans drawable dossier:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <solid android:color="@android:color/white" />

    <corners android:radius="10dip" />

    <stroke
        android:width="1dp"
        android:color="@android:color/white" />

</shape>

Maintenant appliquer Rectangle de fond sur Vue:

mView.setBackground(R.drawlable.custom_rectangle);

Fait

Je pense que la meilleure façon de le faire est de fusionner les 2 choses:

1. faire une image de la mise en page, comme le montre ici.

2. faire un arrondi drawable de l'image, comme le montre ici

3. définir le drawable sur une imageView.

Cela permettra de gérer les cas que d'autres solutions ont échoué à résoudre, comme le fait d'avoir du contenu qui a coins.

Je pense que c'est aussi un peu plus de GPU-friendly, car il montre une seule couche au lieu de 2 .

La seule meilleure façon est de faire une totalement personnalisé en vue, mais c'est beaucoup de code et peut prendre beaucoup de temps. Je pense que ce que je suggère ici, c'est le meilleur des deux mondes.

Voici un extrait de la façon dont il peut être fait:

RoundedCornersDrawable.java

/**
 * shows a bitmap as if it had rounded corners. based on :
 * http://rahulswackyworld.blogspot.co.il/2013/04/android-drawables-with-rounded_7.html
 * easy alternative from support library: RoundedBitmapDrawableFactory.create( ...) ; 
 */
public class RoundedCornersDrawable extends BitmapDrawable {

    private final BitmapShader bitmapShader;
    private final Paint p;
    private final RectF rect;
    private final float borderRadius;

    public RoundedCornersDrawable(final Resources resources, final Bitmap bitmap, final float borderRadius) {
        super(resources, bitmap);
        bitmapShader = new BitmapShader(getBitmap(), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
        final Bitmap b = getBitmap();
        p = getPaint();
        p.setAntiAlias(true);
        p.setShader(bitmapShader);
        final int w = b.getWidth(), h = b.getHeight();
        rect = new RectF(0, 0, w, h);
        this.borderRadius = borderRadius < 0 ? 0.15f * Math.min(w, h) : borderRadius;
    }

    @Override
    public void draw(final Canvas canvas) {
        canvas.drawRoundRect(rect, borderRadius, borderRadius, p);
    }
}

CustomView.java

public class CustomView extends ImageView {
    private View mMainContainer;
    private boolean mIsDirty=false;

    //TODO for each change of views/content, set mIsDirty to true and call invalidate

    @Override
    protected void onDraw(final Canvas canvas) {
        if (mIsDirty) {
            mIsDirty = false;
            drawContent();
            return;
        }
        super.onDraw(canvas);
    }

    /**
     * draws the view's content to a bitmap. code based on :
     * http://nadavfima.com/android-snippet-inflate-a-layout-draw-to-a-bitmap/
     */
    public static Bitmap drawToBitmap(final View viewToDrawFrom, final int width, final int height) {
        //Create a new bitmap and a new canvas using that bitmap
        final Bitmap bmp = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        final Canvas canvas = new Canvas(bmp);
        viewToDrawFrom.setDrawingCacheEnabled(true);
        //Supply measurements
        viewToDrawFrom.measure(MeasureSpec.makeMeasureSpec(canvas.getWidth(), MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(canvas.getHeight(), MeasureSpec.EXACTLY));
        //Apply the measures so the layout would resize before drawing.
        viewToDrawFrom.layout(0, 0, viewToDrawFrom.getMeasuredWidth(), viewToDrawFrom.getMeasuredHeight());
        //and now the bmp object will actually contain the requested layout
        canvas.drawBitmap(viewToDrawFrom.getDrawingCache(), 0, 0, new Paint());
        return bmp;
    }

    private void drawContent() {
        if (getMeasuredWidth() <= 0 || getMeasuredHeight() <= 0)
            return;
        final Bitmap bitmap = drawToBitmap(mMainContainer, getMeasuredWidth(), getMeasuredHeight());
        final RoundedCornersDrawable drawable = new RoundedCornersDrawable(getResources(), bitmap, 15);
        setImageDrawable(drawable);
    }

}

---

EDIT: trouvé une belle alternative, basée sur "RoundKornersLayouts" bibliothèque. Avoir une classe qui sera utilisée pour toutes les classes de layout vous souhaitez prolonger, pour être arrondi:

//based on https://github.com/JcMinarro/RoundKornerLayouts
class CanvasRounder(cornerRadius: Float, cornerStrokeColor: Int = 0, cornerStrokeWidth: Float = 0F) {
    private val path = android.graphics.Path()
    private lateinit var rectF: RectF
    private var strokePaint: Paint?
    var cornerRadius: Float = cornerRadius
        set(value) {
            field = value
            resetPath()
        }

    init {
        if (cornerStrokeWidth <= 0)
            strokePaint = null
        else {
            strokePaint = Paint()
            strokePaint!!.style = Paint.Style.STROKE
            strokePaint!!.isAntiAlias = true
            strokePaint!!.color = cornerStrokeColor
            strokePaint!!.strokeWidth = cornerStrokeWidth
        }
    }

    fun round(canvas: Canvas, drawFunction: (Canvas) -> Unit) {
        val save = canvas.save()
        canvas.clipPath(path)
        drawFunction(canvas)
        if (strokePaint != null)
            canvas.drawRoundRect(rectF, cornerRadius, cornerRadius, strokePaint)
        canvas.restoreToCount(save)
    }

    fun updateSize(currentWidth: Int, currentHeight: Int) {
        rectF = android.graphics.RectF(0f, 0f, currentWidth.toFloat(), currentHeight.toFloat())
        resetPath()
    }

    private fun resetPath() {
        path.reset()
        path.addRoundRect(rectF, cornerRadius, cornerRadius, Path.Direction.CW)
        path.close()
    }

}

Puis, dans chacune de vos mise en page personnalisée classes, ajoutez un code similaire à celui-ci:

class RoundedConstraintLayout : ConstraintLayout {
    private lateinit var canvasRounder: CanvasRounder

    constructor(context: Context) : super(context) {
        init(context, null, 0)
    }

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
        init(context, attrs, 0)
    }

    constructor(context: Context, attrs: AttributeSet, defStyle: Int) : super(context, attrs, defStyle) {
        init(context, attrs, defStyle)
    }

    private fun init(context: Context, attrs: AttributeSet?, defStyle: Int) {
        val array = context.obtainStyledAttributes(attrs, R.styleable.RoundedCornersView, 0, 0)
        val cornerRadius = array.getDimension(R.styleable.RoundedCornersView_corner_radius, 0f)
        val cornerStrokeColor = array.getColor(R.styleable.RoundedCornersView_corner_stroke_color, 0)
        val cornerStrokeWidth = array.getDimension(R.styleable.RoundedCornersView_corner_stroke_width, 0f)
        array.recycle()
        canvasRounder = CanvasRounder(cornerRadius,cornerStrokeColor,cornerStrokeWidth)
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR2) {
            setLayerType(FrameLayout.LAYER_TYPE_SOFTWARE, null)
        }
    }

    override fun onSizeChanged(currentWidth: Int, currentHeight: Int, oldWidth: Int, oldheight: Int) {
        super.onSizeChanged(currentWidth, currentHeight, oldWidth, oldheight)
        canvasRounder.updateSize(currentWidth, currentHeight)
    }

    override fun draw(canvas: Canvas) = canvasRounder.round(canvas) { super.draw(canvas) }

    override fun dispatchDraw(canvas: Canvas) = canvasRounder.round(canvas) { super.dispatchDraw(canvas) }

}

Si vous souhaitez soutenir les attributs, l'utiliser comme écrit sur la bibliothèque:

<resources>
  <declare-styleable name="RoundedCornersView">
      <attr name="corner_radius" format="dimension"/>
      <attr name="corner_stroke_width" format="dimension"/>
      <attr name="corner_stroke_color" format="color"/>
  </declare-styleable>
</resources>

---

Une autre alternative, qui pourrait être plus facile pour la plupart des utilisations: utiliser MaterialCardView . Il permet la personnalisation des coins arrondis, couleur de trait et la largeur et la hauteur.

Exemple:

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:clipChildren="false" android:clipToPadding="false"
    tools:context=".MainActivity">

    <com.google.android.material.card.MaterialCardView
        android:layout_width="100dp" android:layout_height="100dp" android:layout_gravity="center"
        app:cardCornerRadius="8dp" app:cardElevation="8dp" app:strokeColor="#f00" app:strokeWidth="2dp">

        <ImageView
            android:layout_width="match_parent" android:layout_height="match_parent" android:background="#0f0"/>

    </com.google.android.material.card.MaterialCardView>

</FrameLayout>

Et le résultat:

Ne remarque qu'il y a une légère artefacts question sur les bords de la course (les feuilles de certains pixels du contenu), si vous l'utilisez. Vous pouvez remarquerez, si vous effectuez un zoom avant. J'ai signalé à propos de ce problème ici.

Une meilleure façon de le faire serait:

background_activity.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:gravity="fill">
        <color android:color="@color/black"/>
    </item>
    <item>
        <shape android:gravity="fill">
            <solid android:color="@color/white"/>
            <corners android:radius="10dip"/>
            <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
        </shape>
    </item>
</layer-list>

Cela fonctionne au-dessous de l'API 21 aussi, et vous donner quelque chose comme ceci:

---

Si vous êtes prêt à faire un peu plus d'effort, plus de contrôle, puis utilisez android.support.v7.widget.CardView avec ses cardCornerRadius attribut (et de définir elevation attribut 0dp de se débarrasser de tout document d'accompagnement de l'ombre portée avec les cardView). Aussi, cela fonctionne à partir de l'API de niveau aussi bas que 15.

Utilisation CardView pour obtenir des bords arrondis pour toutes les layouts.
Utilisation card_view:cardCornerRadius="5dp" pour cardview pour les arrondir disposition bords.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:card_view="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

      <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="5dp">
          <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="15dp"
                android:weightSum="1">

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight=".3"
                    android:text="@string/quote_code"
                    android:textColor="@color/white"
                    android:textSize="@dimen/text_head_size" />

                <TextView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight=".7"
                    android:text="@string/quote_details"
                    android:textColor="@color/white"
                    android:textSize="@dimen/text_head_size" />
            </LinearLayout>
       </android.support.v7.widget.CardView>
   </LinearLayout>

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dip" android:color="#B1BCBE" />
    <corners android:radius="10dip"/>
    <padding android:left="3dip" android:top="3dip" android:right="3dip" android:bottom="3dip" />
</shape>

@David, il suffit de mettre le rembourrage de même valeur que les accidents vasculaires cérébraux, de sorte que la frontière peut être visible, regardeless la taille de l'image

J'ai pris @gauravsapiens réponse avec mes commentaires à l'intérieur pour vous donner une crainte raisonnable de ce que les paramètres de l'effet.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Background color -->
    <solid android:color="@color/white" />

    <!-- Stroke around the background, width and color -->
    <stroke android:width="4dp" android:color="@color/drop_shadow"/>

    <!-- The corners of the shape -->
    <corners android:radius="4dp"/>

    <!-- Padding for the background, e.g the Text inside a TextView will be 
    located differently -->
    <padding android:left="10dp" android:right="10dp" 
             android:bottom="10dp" android:top="10dp" />

</shape>

Si vous êtes simplement à la recherche pour créer une forme qui arrondit les angles, de retirer le rembourrage et la course de le faire. Si vous supprimez le solide ainsi vous aurez, en effet, ont créé des coins arrondis sur un arrière-plan transparent.

Pour le plaisir de paresseux, j'ai créé une forme au-dessous, qui est juste un fond blanc avec des coins arrondis - profitez-en! 🙂

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Background color -->
    <solid android:color="@color/white" />

    <!-- The corners of the shape -->
    <corners android:radius="4dp"/>

</shape>

 <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="@dimen/_10sdp"
android:shape="rectangle">

<solid android:color="@color/header" />

<corners
    android:bottomLeftRadius="@dimen/_5sdp"
    android:bottomRightRadius="@dimen/_5sdp"
    android:topLeftRadius="@dimen/_5sdp"
    android:topRightRadius="@dimen/_5sdp" />