圆角圆形图片解决方案

作者: Wish_xy | 来源:发表于2018-07-17 17:46 被阅读54次

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

    废话不多说,先上效果图:


    圆角图形.jpg
    属性介绍
    参数 属性 介绍
    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,共同学习,提高!

    相关文章

      网友评论

        本文标题:圆角圆形图片解决方案

        本文链接:https://www.haomeiwen.com/subject/zzsgpftx.html