圆角矩形圆形图片简单解决方案

一个圆角图片的解决方案，解决设计需要不同圆角图片时，避免重复让设计师出不一样的切图。

废话不多说，先上效果图：

---

属性介绍

参数	属性	介绍
round_rect_circle	boolean	是否显示圆形
round_rect_corner	int	圆角大小
round_rect_corner_top_to_left	int	左上角圆弧
round_rect_corner_top_to_right	int	右上角圆弧
round_rect_corner_bottom_to_left	int	左下角圆弧
round_rect_corner_bottom_to_right	int	右下角圆弧
round_rect_stroke_color	int	描边颜色
round_rect_stroke_width	int	描边大小

* round_rect_circle：默认false，如果是true，直接绘制圆形。
* round_rect_corner：四个角圆弧属性，默认为0。
* round_rect_corner_top_to_left：左上角圆弧，如果设置了该属性，round_rect_corner的左上角设置不起作用。
* round_rect_corner_top_to_right：右上角圆弧，如果设置了该属性，round_rect_corner的右上角设置不起作用。
* round_rect_corner_bottom_to_left：左下角圆弧，如果设置了该属性，round_rect_corner的左下角设置不起作用。
* round_rect_corner_bottom_to_right：右下角圆弧，如果设置了该属性，round_rect_corner的右下角设置不起作用。
* round_rect_stroke_color：描边的颜色，默认是白色。
* round_rect_stroke_width：圆弧的描边，默认描边的宽度是0。

---

实现思路

先上完整代码：

首先先定义圆角图形所需要的属性：

 <declare-styleable name="RoundRectLayout">
        <attr name="round_rect_circle" format="boolean"/>
        <attr name="round_rect_corner" format="dimension"/>
        <attr name="round_rect_corner_top_to_left" format="dimension"/>
        <attr name="round_rect_corner_top_to_right" format="dimension"/>
        <attr name="round_rect_corner_bottom_to_left" format="dimension"/>
        <attr name="round_rect_corner_bottom_to_right" format="dimension"/>
        <attr name="round_rect_stroke_color" format="color"/>
        <attr name="round_rect_stroke_width" format="dimension"/>
    </declare-styleable>

然后在定义一个RoundRectLayout继承RelativeLayout：完整代码如下：

ublic class RoundRectLayout extends RelativeLayout {

    private RectF mRectF;//绘制画布的大小
    public float[] mRadii = new float[8];//绘制眼角矩形所需的8个角
    private boolean mCircle;//是否是绘制圆形
    private int mRectCorner; //圆角弧度
    private int mStrokeColor;// 描边颜色
    private int mStrokeWidth;// 描边宽度

    public RoundRectLayout(Context context) {
        this(context, null);
    }

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

    public RoundRectLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView(context, attrs);
    }

    private void initView(Context context, AttributeSet attrs) {
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RoundRectLayout);
        mCircle = array.getBoolean(R.styleable.RoundRectLayout_round_rect_circle, false);
        mRectCorner = array.getDimensionPixelSize(R.styleable.RoundRectLayout_round_rect_corner, 0);
        int roundRectTopLeft = array.getDimensionPixelSize(R.styleable.RoundRectLayout_round_rect_corner_top_to_left, -1);
        int roundRectTopRight = array.getDimensionPixelSize(R.styleable.RoundRectLayout_round_rect_corner_top_to_right, -1);
        int roundRectBottomLeft = array.getDimensionPixelSize(R.styleable.RoundRectLayout_round_rect_corner_bottom_to_left, -1);
        int roundRectBottomRight = array.getDimensionPixelSize(R.styleable.RoundRectLayout_round_rect_corner_bottom_to_right, -1);

        mRadii[0] = roundRectTopLeft == -1 ? mRectCorner : roundRectTopLeft;
        mRadii[1] = roundRectTopLeft == -1 ? mRectCorner : roundRectTopLeft;
        mRadii[2] = roundRectTopRight == -1 ? mRectCorner : roundRectTopRight;
        mRadii[3] = roundRectTopRight == -1 ? mRectCorner : roundRectTopRight;
        mRadii[4] = roundRectBottomLeft == -1 ? mRectCorner : roundRectBottomLeft;
        mRadii[5] = roundRectBottomLeft == -1 ? mRectCorner : roundRectBottomLeft;
        mRadii[6] = roundRectBottomRight == -1 ? mRectCorner : roundRectBottomRight;
        mRadii[7] = roundRectBottomRight == -1 ? mRectCorner : roundRectBottomRight;

        mStrokeColor = array.getColor(R.styleable.RoundRectLayout_round_rect_stroke_color, Color.WHITE);
        mStrokeWidth = array.getDimensionPixelSize(R.styleable.RoundRectLayout_round_rect_stroke_width, 0);
        array.recycle();

        mRectF = new RectF();
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mRectF.left = getPaddingLeft();
        mRectF.top = getPaddingTop();
        mRectF.right = w - getPaddingRight();
        mRectF.bottom = h - getPaddingBottom();
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        canvas.saveLayer(mRectF, null, Canvas.ALL_SAVE_FLAG);
        super.dispatchDraw(canvas);
        Path path = new Path();
        path.reset();
        //判断是否绘制圆
        if (mCircle) {
            float width = (mRectF.right - mRectF.left) > (mRectF.bottom - mRectF.top) ? mRectF.bottom - mRectF.top : mRectF.right - mRectF.left;
            path.addCircle((mRectF.right - mRectF.left) / 2, (mRectF.bottom - mRectF.top) / 2, (width - mStrokeWidth) / 2, Path.Direction.CW);
        } else {
            path.addRoundRect(mRectF, mRadii, Path.Direction.CW);
        }


        Paint paint = new Paint();
        paint.setAntiAlias(true);

        //绘制描边
        if (mStrokeWidth > 0) {
            paint.setColor(mStrokeColor);
            paint.setStrokeWidth(mStrokeWidth);
            paint.setStyle(Paint.Style.STROKE);
            canvas.drawPath(path, paint);
        }

        //剪切圆角矩形
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        paint.setStyle(Paint.Style.FILL);
        canvas.drawPath(path, paint);
    }
}

使用步骤

在xml文件直接引用

   <com.android.round.weight.RoundRectLayout
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_margin="30dp"
                    app:round_rect_circle="true">

                    <ImageView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:scaleType="centerCrop"
                        android:src="@mipmap/club_bg"/>

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="40dp"
                        android:layout_alignParentBottom="true"
                        android:background="@mipmap/bottom_bg"
                        android:gravity="center"
                        android:textColor="@android:color/white"
                        android:textSize="10sp"/>

                </com.android.round.weight.RoundRectLayout>

具体的实现思路：
首先要获取自定义的属性：

TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RoundRectLayout);
        mCircle = array.getBoolean(R.styleable.RoundRectLayout_round_rect_circle, false);
        mRectCorner = array.getDimensionPixelSize(R.styleable.RoundRectLayout_round_rect_corner, 0);
        int roundRectTopLeft = array.getDimensionPixelSize(R.styleable.RoundRectLayout_round_rect_corner_top_to_left, -1);
        int roundRectTopRight = array.getDimensionPixelSize(R.styleable.RoundRectLayout_round_rect_corner_top_to_right, -1);
        int roundRectBottomLeft = array.getDimensionPixelSize(R.styleable.RoundRectLayout_round_rect_corner_bottom_to_left, -1);
        int roundRectBottomRight = array.getDimensionPixelSize(R.styleable.RoundRectLayout_round_rect_corner_bottom_to_right, -1);

        mRadii[0] = roundRectTopLeft == -1 ? mRectCorner : roundRectTopLeft;
        mRadii[1] = roundRectTopLeft == -1 ? mRectCorner : roundRectTopLeft;
        mRadii[2] = roundRectTopRight == -1 ? mRectCorner : roundRectTopRight;
        mRadii[3] = roundRectTopRight == -1 ? mRectCorner : roundRectTopRight;
        mRadii[4] = roundRectBottomLeft == -1 ? mRectCorner : roundRectBottomLeft;
        mRadii[5] = roundRectBottomLeft == -1 ? mRectCorner : roundRectBottomLeft;
        mRadii[6] = roundRectBottomRight == -1 ? mRectCorner : roundRectBottomRight;
        mRadii[7] = roundRectBottomRight == -1 ? mRectCorner : roundRectBottomRight;

        mStrokeColor = array.getColor(R.styleable.RoundRectLayout_round_rect_stroke_color, Color.WHITE);
        mStrokeWidth = array.getDimensionPixelSize(R.styleable.RoundRectLayout_round_rect_stroke_width, 0);
        array.recycle();

获取到之后要及时关闭typeArray，这个不需要详述，然后在onSizeChanged()方法中获取当前view的大小属性。onSizeChanged方法会在view有改动的时候调用，第一次创建view的时候也会调用一次。然后在dispatchDraw()方法中绘制图形。

因为要使用setXfermode方法，所以首先要进行离屏缓冲，至于为什么，请点击了解，行离屏缓冲很简单，只需要一行代码：

canvas.saveLayer(mRectF, null, Canvas.ALL_SAVE_FLAG);

然后判断是绘制圆形还是圆角矩形，绘制画布路径

Path path = new Path();
        path.reset();
        //判断是否绘制圆
        if (mCircle) {
            float width = (mRectF.right - mRectF.left) > (mRectF.bottom - mRectF.top) ? mRectF.bottom - mRectF.top : mRectF.right - mRectF.left;
            path.addCircle((mRectF.right - mRectF.left) / 2, (mRectF.bottom - mRectF.top) / 2, (width - mStrokeWidth) / 2, Path.Direction.CW);
        } else {
            path.addRoundRect(mRectF, mRadii, Path.Direction.CW);
        }

之后判断是否需要描边

 //绘制描边
        if (mStrokeWidth > 0) {
            paint.setColor(mStrokeColor);
            paint.setStrokeWidth(mStrokeWidth);
            paint.setStyle(Paint.Style.STROKE);
            canvas.drawPath(path, paint);
        }

最后通过drawPath方法绘制需要的图形

  //剪切圆角矩形
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
        paint.setStyle(Paint.Style.FILL);
        canvas.drawPath(path, paint);

代码很简单，如果有需要，可以直接引用git项目

---

PS：有问题可以加v1054353861，共同学习，提高！