日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：YX_BB ? 更新時間： 2022-06-04 編程語言

Fresco是FaceBook開源的Android平臺圖片加載庫，可以從網絡，從本地文件系統，本地資源加載圖片

Fresco本身已經實現了圓角以及圓形圖片的功能。

工作中，遇到圓形頭像的時候，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屬性如下


? ? 
? ? ? ? 
? ? ? ? 
? ? ? ? 
? ? ? ? 
? ? ? ? 
? ? ? ? 
? ? ? ? 
? ? ? ? 
? ? ? ? 
? ? ? ? 
? ? ? ? 
? ? ? ?

原文鏈接：https://blog.csdn.net/YX_BB/article/details/104561359

欄目分類
最近更新