Wie erstelle ich eine Ansicht mit abgerundeten Ecken?

Ich versuche, eine Ansicht in Android mit abgerundeten Kanten zu machen. Die Lösung, die ich bisher gefunden habe, besteht darin, eine Form mit abgerundeten Ecken zu definieren und sie als Hintergrund für diese Ansicht zu verwenden.

Folgendes habe ich getan: Definiere ein Drawable wie folgt:

<padding
android:top="2dp"
android:bottom="2dp"/>
<corners android:bottomRightRadius="20dp"
android:bottomLeftRadius="20dp"
android:topLeftRadius="20dp"
android:topRightRadius="20dp"/>

Jetzt habe ich dies wie folgt als Hintergrund für mein Layout verwendet:

<LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:clipChildren="true"
        android:background="@drawable/rounded_corner">

Das funktioniert einwandfrei, ich kann sehen, dass die Ansicht abgerundete Kanten hat.

Aber mein Layout enthält viele andere untergeordnete Ansichten, z. B. eine ImageView oder eine MapView. Wenn ich ein ImageViewBild innerhalb des obigen Layouts platziere, werden die Bildecken nicht abgeschnitten / beschnitten, sondern es erscheint voll.

Ich habe andere Problemumgehungen gesehen, damit es wie die hier erläuterte funktioniert .

Aber gibt es eine Methode, um abgerundete Ecken für eine Ansicht festzulegen, und alle untergeordneten Ansichten sind in dieser Hauptansicht enthalten, die abgerundete Ecken hat?

Ein anderer Ansatz besteht darin, eine benutzerdefinierte Layoutklasse wie die folgende zu erstellen. Dieses Layout zeichnet seinen Inhalt zuerst in eine Offscreen-Bitmap, maskiert die Offscreen-Bitmap mit einem abgerundeten Rechteck und zeichnet dann die Offscreen-Bitmap auf die tatsächliche Leinwand.

Ich habe es versucht und es scheint zu funktionieren (zumindest für meinen einfachen Testfall). Dies wirkt sich natürlich auf die Leistung im Vergleich zu einem normalen Layout aus.

package com.example;

import android.content.Context;
import android.graphics.*;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.widget.FrameLayout;

public class RoundedCornerLayout extends FrameLayout {
    private final static float CORNER_RADIUS = 40.0f;

    private Bitmap maskBitmap;
    private Paint paint, maskPaint;
    private float cornerRadius;

    public RoundedCornerLayout(Context context) {
        super(context);
        init(context, null, 0);
    }

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

    public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        cornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CORNER_RADIUS, metrics);

        paint = new Paint(Paint.ANTI_ALIAS_FLAG);

        maskPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
        maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

        setWillNotDraw(false);
    }

    @Override
    public void draw(Canvas canvas) {
        Bitmap offscreenBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas offscreenCanvas = new Canvas(offscreenBitmap);

        super.draw(offscreenCanvas);

        if (maskBitmap == null) {
            maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
        }

        offscreenCanvas.drawBitmap(maskBitmap, 0f, 0f, maskPaint);
        canvas.drawBitmap(offscreenBitmap, 0f, 0f, paint);
    }

    private Bitmap createMask(int width, int height) {
        Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ALPHA_8);
        Canvas canvas = new Canvas(mask);

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.WHITE);

        canvas.drawRect(0, 0, width, height, paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        canvas.drawRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, paint);

        return mask;
    }
}

Verwenden Sie dies wie ein normales Layout:

<com.example.RoundedCornerLayout
    android:layout_width="200dp"
    android:layout_height="200dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/test"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#ff0000"
        />

</com.example.RoundedCornerLayout>

Oder Sie können ein android.support.v7.widget.CardViewähnliches verwenden:

<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    card_view:cardBackgroundColor="@color/white"
    card_view:cardCornerRadius="4dp">

    <!--YOUR CONTENT-->
</android.support.v7.widget.CardView>

shape.xml

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

    <solid android:color="#f6eef1" />

    <stroke
        android:width="2dp"
        android:color="#000000" />

    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

    <corners android:radius="5dp" />

</shape>

und in Ihrem Layout

<LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:clipChildren="true"
        android:background="@drawable/shape">

        <ImageView
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:src="@drawable/your image"
             android:background="@drawable/shape">

</LinearLayout>

Die Antwort von Jaap van Hengstum funktioniert hervorragend, aber ich denke, sie ist teuer. Wenn wir diese Methode beispielsweise auf eine Schaltfläche anwenden, geht der Berührungseffekt verloren, da die Ansicht als Bitmap gerendert wird.

Für mich besteht die beste und einfachste Methode darin, eine Maske auf die Ansicht anzuwenden:

@Override
protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
    super.onSizeChanged(width, height, oldWidth, oldHeight);

    float cornerRadius = <whatever_you_want>;
    this.path = new Path();
    this.path.addRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, Path.Direction.CW);
}

@Override
protected void dispatchDraw(Canvas canvas) {
    if (this.path != null) {
        canvas.clipPath(this.path);
    }
    super.dispatchDraw(canvas);
}

Wenn Sie Probleme beim Hinzufügen von Touch-Listenern zum Layout haben. Verwenden Sie dieses Layout als übergeordnetes Layout.

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Region;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.View;
import android.widget.FrameLayout;

public class RoundedCornerLayout extends FrameLayout {
    private final static float CORNER_RADIUS = 6.0f;
    private float cornerRadius;

    public RoundedCornerLayout(Context context) {
        super(context);
        init(context, null, 0);
    }

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

    public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        cornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CORNER_RADIUS, metrics);
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }


    @Override
    protected void dispatchDraw(Canvas canvas) {
        int count = canvas.save();

        final Path path = new Path();
        path.addRoundRect(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), cornerRadius, cornerRadius, Path.Direction.CW);
        canvas.clipPath(path, Region.Op.REPLACE);

        canvas.clipPath(path);
        super.dispatchDraw(canvas);
        canvas.restoreToCount(count);
    }


}

wie

<?xml version="1.0" encoding="utf-8"?>
<com.example.view.RoundedCornerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/patentItem"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingRight="20dp">
        ... your child goes here
    </RelativeLayout>
</com.example.view.RoundedCornerLayout>

Erstellen Sie eine XML-Datei mit dem Namen round.xmlim drawableOrdner und fügen Sie diesen Inhalt ein:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
  <solid android:color="#FFFFFF" />
  <stroke android:width=".05dp" android:color="#d2d2d2" />
  <corners android:topLeftRadius="5dp" android:topRightRadius="5dp" android:bottomRightRadius="5dp" android:bottomLeftRadius="5dp"/>
</shape>

Verwenden Sie dann die round.xmlOption backgroundfür einen beliebigen Artikel. Dann gibt es Ihnen abgerundete Ecken.

In Android L können Sie einfach View.setClipToOutline verwenden , um diesen Effekt zu erzielen. In früheren Versionen gibt es keine Möglichkeit, den Inhalt einer zufälligen ViewGroup in einer bestimmten Form zu schneiden.

Sie müssen an etwas denken, das Ihnen einen ähnlichen Effekt verleiht:

• Wenn Sie in der ImageView nur abgerundete Ecken benötigen, können Sie das Bild mit einem Shader über die Form malen, die Sie als Hintergrund verwenden. Schauen Sie sich diese Bibliothek für ein Beispiel an.

• Wenn wirklich wirklich alle Kinder abgeschnitten werden müssen, können Sie vielleicht eine andere Ansicht über Ihr Layout erstellen? Eine mit einem Hintergrund von welcher Farbe auch immer und einem runden Loch in der Mitte? Sie können tatsächlich eine benutzerdefinierte ViewGroup erstellen, die diese Form über alle untergeordneten Elemente zeichnet, die die onDraw-Methode überschreiben.

Folgen Sie diesem Tutorial und der gesamten Diskussion darunter - http://www.curious-creature.org/2012/12/11/android-recipe-1-image-with-rounded-corners/

Laut diesem Beitrag von Guy Romain, einem der führenden Entwickler des gesamten Android UI-Toolkits, ist es möglich, einen Container (und alle seine untergeordneten Ansichten) mit abgerundeten Ecken zu erstellen, aber er erklärte, dass dies zu teuer sei (aufgrund von Leistungen von Rendering-Probleme).

Ich empfehle Ihnen, gemäß seinem Beitrag zu arbeiten. Wenn Sie abgerundete Ecken wünschen, implementieren Sie abgerundete Ecken ImageViewgemäß diesem Beitrag. Dann können Sie es in einen Container mit einem beliebigen Hintergrund stellen und erhalten den gewünschten Effekt.

das habe ich auch irgendwann auch gemacht.

Sie können ein androidx.cardview.widget.CardViewähnliches verwenden, um:

<androidx.cardview.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"       
        app:cardCornerRadius="@dimen/dimen_4"
        app:cardElevation="@dimen/dimen_4"
        app:contentPadding="@dimen/dimen_10">

       ...

</androidx.cardview.widget.CardView>

ODER

shape.xml

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

    <solid android:color="#f6eef1" />

    <stroke
        android:width="2dp"
        android:color="#000000" />

    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

    <corners android:radius="5dp" />

</shape>

und in Ihrem Layout

<LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shape">

        ...

</LinearLayout>

Erstellen Sie eine XML-Datei unter Ihrem Zeichenordner mit folgendem Code. (Der Name der von mir erstellten Datei lautet round_corner.xml)

round_corner.xml

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

        <!-- view background color -->
        <solid
            android:color="#a9c5ac" >
        </solid>

        <!-- view border color and width -->
        <stroke
            android:width="3dp"
            android:color="#1c1b20" >
        </stroke>

        <!-- If you want to add some padding -->
        <padding
            android:left="4dp"
            android:top="4dp"
            android:right="4dp"
            android:bottom="4dp"    >
        </padding>

        <!-- Here is the corner radius -->
        <corners
            android:radius="10dp"   >
        </corners>
    </shape>

Und halten diese drawablewie backgroundfür die Ansicht , auf die Sie abgerundete Ecke Grenze halten wollen. Lassen Sie es uns für eine behaltenLinearLayout

    <LinearLayout android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/rounded_corner"
            android:layout_centerInParent="true">

            <TextView android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:text="Hi, This layout has rounded corner borders ..."
                android:gravity="center"
                android:padding="5dp"/>

    </LinearLayout>

Das CardViewhat bei mir in API 27 in Android Studio 3.0.1 funktioniert. Das colorPrimarywurde in der res/values/colors.xmlDatei referenziert und ist nur ein Beispiel. Die layout_width 0dpwird auf die Breite des übergeordneten Elements ausgedehnt . Sie müssen die Einschränkungen und die Breite / Höhe an Ihre Bedürfnisse anpassen.

<android.support.v7.widget.CardView
    android:id="@+id/cardView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:cardCornerRadius="4dp"
    app:cardBackgroundColor="@color/colorPrimary">

    <!-- put your content here -->

</android.support.v7.widget.CardView>

Unterschied zu Jaap van Hengstums Antwort:

1. Verwenden Sie BitmapShader anstelle der Maskenbitmap.
2. Bitmap nur einmal erstellen.

public class RoundedFrameLayout extends FrameLayout {
    private Bitmap mOffscreenBitmap;
    private Canvas mOffscreenCanvas;
    private BitmapShader mBitmapShader;
    private Paint mPaint;
    private RectF mRectF;

    public RoundedFrameLayout(Context context) {
        super(context);
        init();
    }

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

    public RoundedFrameLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        setWillNotDraw(false);
    }

    @Override
    public void draw(Canvas canvas) {
        if (mOffscreenBitmap == null) {
            mOffscreenBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
            mOffscreenCanvas = new Canvas(mOffscreenBitmap);
            mBitmapShader = new BitmapShader(mOffscreenBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mPaint.setShader(mBitmapShader);
            mRectF = new RectF(0f, 0f, canvas.getWidth(), canvas.getHeight());
        }
        super.draw(mOffscreenCanvas);

        canvas.drawRoundRect(mRectF, 8, 8, mPaint);
    }
}

public class RoundedCornerLayout extends FrameLayout {
    private double mCornerRadius;

    public RoundedCornerLayout(Context context) {
        this(context, null, 0);
    }

    public RoundedCornerLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }

    public double getCornerRadius() {
        return mCornerRadius;
    }

    public void setCornerRadius(double cornerRadius) {
        mCornerRadius = cornerRadius;
    }

    @Override
    public void draw(Canvas canvas) {
        int count = canvas.save();

        final Path path = new Path();
        path.addRoundRect(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), (float) mCornerRadius, (float) mCornerRadius, Path.Direction.CW);
        canvas.clipPath(path, Region.Op.REPLACE);

        canvas.clipPath(path);
        super.draw(canvas);
        canvas.restoreToCount(count);
    }
}

Mit der Material Components Library können Sie am besten eine Viewmit abgerundeten Ecken erstellen, indem Sie die MaterialShapeDrawable.

Erstellen Sie ein ShapeAppearanceModel mit benutzerdefinierten abgerundeten Ecken:

ShapeAppearanceModel shapeAppearanceModelLL1 = new ShapeAppearanceModel()
        .toBuilder()
        .setAllCorners(CornerFamily.ROUNDED,radius16)
        .build();

Erstellen Sie eine MaterialShapeDrawable:

MaterialShapeDrawable shapeDrawableLL1 = new MaterialShapeDrawable(shapeAppearanceModeLL1);

Wenn Sie auch eine ElevationOverlay für das dunkle Thema anwenden möchten, verwenden Sie Folgendes:

MaterialShapeDrawable shapeDrawableLL1 = MaterialShapeDrawable.createWithElevationOverlay(this, 4.0f);
shapeDrawableLL1.setShapeAppearanceModel(shapeAppearanceModelLL1);

Optional: Wenden Sie auf die FormDrawable eine Hintergrundfarbe und einen Strich an

shapeDrawableLL1.setFillColor(
       ContextCompat.getColorStateList(this,R.color...));
 shapeDrawableLL1.setStrokeWidth(2.0f);
 shapeDrawableLL1.setStrokeColor(
       ContextCompat.getColorStateList(this,R.color...));

Wenden Sie schließlich das shapeDrawable als Hintergrund in Ihrer LinearLayout(oder einer anderen Ansicht) an:

LinearLayout linearLayout1= findViewById(R.id.ll_1);
ViewCompat.setBackground(linearLayout1,shapeDrawableLL1);

Der von Ihnen bereitgestellte Tutorial-Link scheint darauf hinzudeuten, dass Sie die Eigenschaften layout_width und layout_height Ihrer untergeordneten Elemente auf match_parent setzen müssen.

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

Probieren Sie diese Eigenschaft mit Ihrem linearen Layout aus. Sie hilft den
Tools: context = ". youractivity"

public static Bitmap getRoundedCornerBitmap(Bitmap bitmap, int pixels) {

        Bitmap roundedBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap
                .getHeight(), Config.ARGB_8888);
        Canvas canvas = new Canvas(roundedBitmap);

        final int color = 0xff424242;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        final float roundPx = pixels;

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        canvas.drawRoundRect(rectF, roundPx, roundPx, paint);

        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);

        return roundedBitmap;
    }

So erstellen Sie ein rundes Eckbild mit com.google.android.material: material: 1.2.0-beta01

 float radius = context.getResources().getDimension(R.dimen.border_radius_hug);
    shapeAppearanceModel = new ShapeAppearanceModel()
            .toBuilder()
            .setAllCorners(CornerFamily.ROUNDED,radius)
            .build();

imageView.setShapeAppearanceModel(shapeAppearanceModel)

oder wenn Sie es in einer XML-Datei verwenden möchten:

  <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/thumb"
            android:layout_width="80dp"
            android:layout_height="60dp"
            app:shapeAppearanceOverlay="@style/circleImageView"
            />

Fügen Sie in style.xml Folgendes hinzu:

<style name="circleImageView" parent="">
      <item name="cornerFamily">rounded</item>
      <item name="cornerSize">10%</item>
</style>

Verwenden Sie die Form in XML mit dem Rechteck. Legen Sie die Eigenschaft des unteren oder oberen Radius wie gewünscht fest. Wenden Sie dann die XML als Hintergrund auf Ihre Ansicht an. Oder ... verwenden Sie Farbverläufe, um dies aus dem Code heraus zu tun.