This Blog post documents the implementation of a rounded ImageView

Let me give you an idea

  1. Getting configuration Properties
  2. Judgment cutting mode
  3. draw

So let’s get started

Getting configuration Properties

We now define the relevant attributes in Attrs

	<declare-styleable >
        <attr  />
        <attr  />
        <attr  />
        <attr  />
        <attr  />
    </declare-styleable>
Copy the code

The above attributes define the overall rounded corners and four individual rounded corners, respectively

Then obtain the relevant properties for setting.

/ / retrieve attributes TypedArray TypedArray = mContext. ObtainStyledAttributes (attrs, R.s tyleable. 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();Copy the code

Judgment cutting mode

After obtaining the fillet setting, we need to compare the image width and height to the fillet value. Crop the image when it is larger than the rounded corner value

Int maxLeft = math. Max (leftTopRadius, leftBottomRadius); 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); // Four corners: upper right, lower right, lower left, upper left. 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);Copy the code

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" />
Copy the code

Finally, attach the full code address:

GItHub AndroidCustomView-RoundImageView