Android基於Fresco實現圓角和圓形圖片

<!--圓形圖片，一般用作頭像-->
<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/iv_avatar"
    android:layout_width="40dp"
    android:layout_height="40dp"
    app:placeholderImage="@drawable/ic_avatar_default"
    app:roundAsCircle="true"/>

<!--圓角圖片，為了美觀大多數圖片都會有這樣的處理。-->
<!--當圖片為正方形的時候，將roundedCornerRadius設定為邊長的一半，也可以形成圓形圖片的效果-->
<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/iv_avatar"
    android:layout_width="40dp"
    android:layout_height="40dp"
    app:placeholderImage="@drawable/ic_avatar_default"
    app:roundedCornerRadius="5dp"/>

app:placeholderImage="@drawable/ic_avatar_default"

public class RoundImageView extends SimpleDraweeView {
    
    private final static int DEFAULT_VALUE = 0;

    private float mWidth;
    private float mHeight;
    private Path mPath;

    // 圓角角度
    private float mCornerRadius;
    // 左上角圓角角度
    private float mLeftTopRadius;
    // 右上角圓角角度
    private float mRightTopRadius;
    // 右下角圓角角度
    private float mRightBottomRadius;
    // 左下角圓角角度
    private float mLeftBottomRadius;

    // 是否使用圓形圖片
    private boolean mAsCircle;
    // 圓形圖片半徑
    private float mRadius;
    
    public RoundImageView(Context context) {
        this(context, null);
    }

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

    public RoundImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initData();
        initAttrs(context, attrs);
    }
    
    private void initData() {
        mPath = new Path();
    }

    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundImageView);
        mCornerRadius = typedArray.getDimension(R.styleable.RoundImageView_cornerRadius, DEFAULT_VALUE);
        mAsCircle = typedArray.getBoolean(R.styleable.RoundImageView_asCircle, false);
        if (mCornerRadius <= 0) {
            // 說明使用者沒有設定四個圓角的有效值，此時四個圓角各自使用自己的值
            mLeftTopRadius = typedArray.getDimension(R.styleable.RoundImageView_leftTopRadius, DEFAULT_VALUE);
            mRightTopRadius = typedArray.getDimension(R.styleable.RoundImageView_rightTopRadius, DEFAULT_VALUE);
            mRightBottomRadius = typedArray.getDimension(R.styleable.RoundImageView_rightBottomRadius, DEFAULT_VALUE);
            mLeftBottomRadius = typedArray.getDimension(R.styleable.RoundImageView_leftBottomRadius, DEFAULT_VALUE);
        } else {
            // 使用了統一的圓角，因此使用mCornerRadius統一的值
            mLeftTopRadius = mCornerRadius;
            mRightTopRadius = mCornerRadius;
            mRightBottomRadius = mCornerRadius;
            mLeftBottomRadius = mCornerRadius;
        }
        
        typedArray.recycle();
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        mWidth = getWidth();
        mHeight = getHeight();
        // 如果開啟了圓形標記
        if (mAsCircle) {
            mRadius = Math.min(mWidth / 2, mHeight / 2);
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 如果開啟了圓形標記，圓形圖片的優先順序高於圓角圖片
        if(mAsCircle) {
            drawCircleImage(canvas);
        } else {
            drawCornerImage(canvas);
        }
        super.onDraw(canvas);
    }

    /**
     * 畫中間圓形
     * @param canvas
     */
    private void drawCircleImage(Canvas canvas) {
        mPath.addCircle(mWidth / 2, mHeight / 2, mRadius, Path.Direction.CW);
        canvas.clipPath(mPath);
    }

    /**
     * 畫圓角
     * @param canvas
     */
    private void drawCornerImage(Canvas canvas) {
        if (mWidth > mCornerRadius && mHeight > mCornerRadius) {
            // 設定四個角的x,y半徑值
            float[] radius = {mLeftTopRadius, mLeftTopRadius, mRightTopRadius, mRightTopRadius, mRightBottomRadius, mRightBottomRadius, mLeftBottomRadius, mLeftBottomRadius};
            mPath.addRoundRect(new RectF(0,0, mWidth, mHeight), radius, Path.Direction.CW);
            canvas.clipPath(mPath);
        }
    }
}

<!--適配android10的圖片控制元件-->
    <declare-styleable name="RoundImageView">
        <!--圓形圖片-->
        <attr name="asCircle" format="boolean"/>
        <!--左上角圓角半徑-->
        <attr name="leftTopRadius" format="dimension"/>
        <!--右上角圓角半徑-->
        <attr name="rightTopRadius" format="dimension"/>
        <!--右下角圓角半徑-->
        <attr name="rightBottomRadius" format="dimension"/>
        <!--左下角圓角半徑-->
        <attr name="leftBottomRadius" format="dimension"/>
        <!--四個圓角半徑，會覆蓋上邊四個圓角值-->
        <attr name="cornerRadius" format="dimension"/>
</declare-styleable>