Android切圆角的几种方式_constraintlayout 圆角

资源

Android切圆角的几种常见方式总结
用shape画一个圆角矩形框
安卓用shape画圆角矩形边框

第一种 利用 View 的 ViewOutlineProvider 实现圆角

       ViewOutlineProvider viewOutlineProvider = new ViewOutlineProvider() {
            final int round12 = ResourceUtils.getDimensionPixelSize(ctx, R.dimen.dp_12);

            @Override
            public void getOutline(View view, Outline outline) {
                outline.setRoundRect(view.getLeft(), view.getTop(), view.getRight(), view.getBottom(), round12);
            }
        };
         view.setOutlineProvider(viewOutlineProvider);
         view.setClipToOutline(true);
1
2
3
4
5
6
7
8
9
10

第二种 GradientDrawable

    /**
     * Get the background Drawable with rounded corners
     *
     * @param argb ColorInt
     * @param topLeft top left radius
     * @param topRight top right radius
     * @param bottomLeft bottom left radius
     * @param bottomRight bottom right radius
     * @return GradientDrawable
     */
    public static GradientDrawable getRoundDrawable(@ColorInt int argb, float topLeft, float topRight, float bottomLeft,
        float bottomRight) {
        final float[] radius = {topLeft, topLeft, topRight, topRight, bottomLeft, bottomLeft, bottomRight, bottomRight};
        return getRoundDrawable(argb, radius);
    }

    /**
     * Get the background Drawable with rounded corners
     *
     * @param argb ColorInt
     * @param radius Radius
     * @return GradientDrawable
     */
    public static GradientDrawable getRoundDrawable(@ColorInt int argb, float radius) {
        return getRoundDrawable(argb, new float[] {radius, radius, radius, radius, radius, radius, radius, radius});
    }

    /**
     * Get the background Drawable with rounded corners
     *
     * @param argb ColorInt
     * @param radiusArrays Corresponding to four corners, eight positions
     * @return GradientDrawable
     */
    public static GradientDrawable getRoundDrawable(@ColorInt int argb, float[] radiusArrays) {
        GradientDrawable gradientDrawable = new GradientDrawable();
        gradientDrawable.setShape(GradientDrawable.RECTANGLE);
        gradientDrawable.setColor(argb);
        gradientDrawable.setCornerRadii(radiusArrays);
        return gradientDrawable;
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

第三种 shap xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <corners android:radius="15dp"/>
 <solid android:color="#FFFFFF"/>
 <stroke android:width="1dp" android:color="#EBEBEB"/>
</shape>
1
2
3
4
5
6

第四种 CardView 的圆角

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent">

	 <androidx.cardview.widget.CardView
		 android:layout_width="256dp"
		 android:layout_height="128dp"
		 app:cardBackgroundColor="#0084FF"
		 app:cardCornerRadius="16dp"
		 app:layout_constraintBottom_toBottomOf="parent"
		 app:layout_constraintEnd_toEndOf="parent"
		 app:layout_constraintStart_toStartOf="parent"
		 app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

第五种 fresco 中的 SimpleDraweeView

 <com.facebook.drawee.view.SimpleDraweeView
	 android:layout_width="256dp"
	 android:layout_height="128dp"
	 app:layout_constraintBottom_toBottomOf="parent"
	 app:layout_constraintEnd_toEndOf="parent"
	 app:layout_constraintStart_toStartOf="parent"
	 app:layout_constraintTop_toTopOf="parent"
	 app:actualImageScaleType="centerCrop"
	 app:roundedCornerRadius="3dp" />
1
2
3
4
5
6
7
8
9

第六种 自定义View

/**
 * corner FrameLayout.you can control radius of every corner.
 *
 * @author gongshoudao
 */
public class CornerFrameLayout extends FrameLayout {
    private final float[] mRadii = new float[8];
    private final Path mPath = new Path();
    public CornerFrameLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (!mPath.isEmpty()) {
            canvas.clipPath(mPath);
        }
    }

    @Override
    protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
        super.onSizeChanged(width, height, oldWidth, oldHeight);
        mPath.reset();
        mPath.addRoundRect(new RectF(0, 0, width, height), mRadii, Path.Direction.CW);
    }

    /**
     * set each corner radius.
     *
     * @param topLeft     top left corner radius.
     * @param topRight    top right corner radius.
     * @param bottomRight bottom right radius.
     * @param bottomLeft  bottom right radius.
     */
    public void setRadius(float topLeft, float topRight, float bottomRight, float bottomLeft) {
        mRadii[0] = topLeft;
        mRadii[1] = topLeft;
        mRadii[2] = topRight;
        mRadii[3] = topRight;
        mRadii[4] = bottomRight;
        mRadii[5] = bottomRight;
        mRadii[6] = bottomLeft;
        mRadii[7] = bottomLeft;
        invalidate();
    }

    /**
     * set each corner radius.
     *
     * @param topLeftX     top left X
     * @param topLeftY     top left y
     * @param topRightX    top right x
     * @param topRightY    top right y
     * @param bottomRightX bottom right x
     * @param bottomRightY bottom right y
     * @param bottomLeftX  bottom left x
     * @param bottomLeftY  bottom left y
     */
    public void setRadius(float topLeftX, float topLeftY, float topRightX, float topRightY, float bottomRightX, float bottomRightY, float bottomLeftX, float bottomLeftY) {
        mRadii[0] = topLeftX;
        mRadii[1] = topLeftY;
        mRadii[2] = topRightX;
        mRadii[3] = topRightY;
        mRadii[4] = bottomRightX;
        mRadii[5] = bottomRightY;
        mRadii[6] = bottomLeftX;
        mRadii[7] = bottomLeftY;
        invalidate();
    }
}
    <CornerFrameLayout
        android:id="@+id/h5_game_corner_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/transparent"
        android:clipChildren="true">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76