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

學(xué)無(wú)先后，達(dá)者為師

網(wǎng)站首頁(yè) 編程語(yǔ)言 正文

Android基于Fresco實(shí)現(xiàn)圓角和圓形圖片_Android

作者：YX_BB ? 更新時(shí)間： 2022-06-04 編程語(yǔ)言

Fresco是FaceBook開(kāi)源的Android平臺(tái)圖片加載庫(kù)，可以從網(wǎng)絡(luò)，從本地文件系統(tǒng)，本地資源加載圖片

Fresco本身已經(jīng)實(shí)現(xiàn)了圓角以及圓形圖片的功能。

工作中，遇到圓形頭像的時(shí)候，UI通常會(huì)給我們這樣一張圖作為默認(rèn)圖片

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

app:placeholderImage="@drawable/ic_avatar_default"

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

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

思路：自定義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) {
? ? ? ? ? ? // 說(shuō)明用戶沒(méi)有設(shè)置四個(gè)圓角的有效值，此時(shí)四個(gè)圓角各自使用自己的值
? ? ? ? ? ? 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();
? ? ? ? // 如果開(kāi)啟了圓形標(biāo)記
? ? ? ? if (mAsCircle) {
? ? ? ? ? ? mRadius = Math.min(mWidth / 2, mHeight / 2);
? ? ? ? }
? ? }

? ? @Override
? ? protected void onDraw(Canvas canvas) {
? ? ? ? // 如果開(kāi)啟了圓形標(biāo)記，圓形圖片的優(yōu)先級(jí)高于圓角圖片
? ? ? ? if(mAsCircle) {
? ? ? ? ? ? drawCircleImage(canvas);
? ? ? ? } else {
? ? ? ? ? ? drawCornerImage(canvas);
? ? ? ? }
? ? ? ? super.onDraw(canvas);
? ? }

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

? ? /**
? ? ?* 畫(huà)圓角
? ? ?* @param canvas
? ? ?*/
? ? private void drawCornerImage(Canvas canvas) {
? ? ? ? if (mWidth > mCornerRadius && mHeight > mCornerRadius) {
? ? ? ? ? ? // 設(shè)置四個(gè)角的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

欄目分類
最近更新