<!--圓形圖片，一般用作頭像-->
<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"/>

<!--圓角圖片，為了美觀大多數(shù)圖片都會有這樣的處理。-->
<!--當圖片為正方形的時候，將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"

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

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

思路：自定義RoundImageView繼承自 SimpleDraweeVie，具備其所有的功能。
Canvas的clipPath(Path path)可以根據(jù)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 {
? ? ? ? ? ? // 使用了統(tǒng)一的圓角，因此使用mCornerRadius統(tǒng)一的值
? ? ? ? ? ? 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) {
? ? ? ? // 如果開啟了圓形標記，圓形圖片的優(yōu)先級高于圓角圖片
? ? ? ? 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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: