Android基于Fresco怎么實現圓角和圓形圖片

這篇文章主要介紹“Android基于Fresco怎么實現圓角和圓形圖片”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Android基于Fresco怎么實現圓角和圓形圖片”文章能幫助大家解決問題。

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"/>

工作中，遇到圓形頭像的時候，UI通常會給我們這樣一張圖作為默認圖片

理論上來講，只需要加入下列這行代碼，就可以完成這部分工作了

app:placeholderImage="@drawable/ic_avatar_default"

然而圓形圖片本身已經是圓形的了，在有些機型上就出現了這個樣式。

搜索了一波，自帶的屬性都不能解決這個問題，干脆自己來定義這個圓形的實現吧，同時Fresco自帶的圓角效果只能保證使用統一的半徑，想要讓四個圓角的半徑不同，只能在java文件中設置，不夠靈活，定義圓角半徑的屬性也需要做些變更。

思路：自定義RoundImageView繼承自 SimpleDraweeVie，具備其所有的功能。
Canvas的clipPath(Path path)可以根據Path，將Canvas剪裁成我們想要的圖形。

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);
        }
    }
}

attr屬性如下

<!--適配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>

關于“Android基于Fresco怎么實現圓角和圓形圖片”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。