Android View custom ImageView to achieve rounded corners

This blog records the implementation of rounded ImageView

Let's talk about the idea first

1. Get configuration properties
2. Determine the cutting method
3. draw

Officially start below

Get configuration properties

We now define relevant attributes in attrs

	<declare-styleable name="RoundImageView">
        <attr name="radius" format="dimension" />
        <attr name="leftTopRadius" format="dimension" />
        <attr name="rightTopRadius" format="dimension" />
        <attr name="leftBottomRadius" format="dimension" />
        <attr name="rightBottomRadius" format="dimension" />
    </declare-styleable>

The above attributes define the overall fillet and four individual fillets respectively

Then obtain the relevant properties and set them separately.

		// 获取属性
        TypedArray typedArray = mContext.obtainStyledAttributes(attrs, R.styleable.RoundImageView);
        radius = typedArray.getDimensionPixelOffset(R.styleable.RoundImageView_radius, defaultRadius);
        leftTopRadius = typedArray.getDimensionPixelOffset(R.styleable.RoundImageView_leftTopRadius, defaultRadius);
        rightTopRadius = typedArray.getDimensionPixelOffset(R.styleable.RoundImageView_rightTopRadius, defaultRadius);
        leftBottomRadius = typedArray.getDimensionPixelOffset(R.styleable.RoundImageView_leftBottomRadius, defaultRadius);
        rightBottomRadius = typedArray.getDimensionPixelOffset(R.styleable.RoundImageView_rightBottomRadius, defaultRadius);
        if (radius != 0) {
    
    
            if (leftTopRadius == 0) {
    
    
                leftTopRadius = radius;
            }
            if (rightTopRadius == 0) {
    
    
                rightTopRadius = radius;
            }
            if (leftBottomRadius == 0) {
    
    
                leftBottomRadius = radius;
            }
            if (rightBottomRadius == 0) {
    
    
                rightBottomRadius = radius;
            }
        }
        typedArray.recycle();

Determine the cutting method

After obtaining the rounded corner settings, we need to compare the width and height of the picture and the rounded corner value.
Crop the picture when it is larger than the rounded corner value

		// 保证图片宽高大于圆角宽高， 获取圆角的宽高
        // 取横着大的长度
        int maxLeft = Math.max(leftTopRadius, leftBottomRadius);
        int maxRight = Math.max(rightTopRadius, rightBottomRadius);
        int minWidth = maxLeft + maxRight;
        // 取竖着大的长度
        int maxTop = Math.max(leftTopRadius, rightTopRadius);
        int maxBottom = Math.max(leftBottomRadius, rightBottomRadius);
        int minHeight = maxTop + maxBottom;
        if (width > minWidth && height > minHeight) {
    
    
            Path path = new Path();
            //四个角：右上，右下，左下，左上
            path.moveTo(leftTopRadius, 0);
            path.lineTo(width - rightTopRadius, 0);
            path.quadTo(width, 0, width, rightTopRadius);

            path.lineTo(width, height - rightBottomRadius);
            path.quadTo(width, height, width - rightBottomRadius, height);

            path.lineTo(leftBottomRadius, height);
            path.quadTo(0, height, 0, height - leftBottomRadius);

            path.lineTo(0, leftTopRadius);
            path.quadTo(0, 0, leftTopRadius, 0);

            canvas.clipPath(path);
        }
        super.onDraw(canvas);

Finally, call super.onDraw(canvas) to draw.

When we use it, we can use it like calling system controls

		<com.xxxx.ui.RoundImageView
            android:id="@+id/riv_adapter_merchant_dishes_image"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginStart="10dp"
            android:scaleType="fitXY"
            android:src="@drawable/mine_user_photo"
            app:layout_constraintBottom_toTopOf="@+id/tv_adapter_line"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:leftBottomRadius="10dp"
            app:leftTopRadius="10dp"
            app:rightBottomRadius="10dp"
            app:rightTopRadius="10dp" />

Finally, attach the complete code address:

GItHub AndroidCustomView-RoundImageView by the
way, help star, thank you!