这篇文章主要介绍“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); } private void drawCircleImage(Canvas canvas) { mPath.addCircle(mWidth / 2, mHeight / 2, mRadius, Path.Direction.CW); canvas.clipPath(mPath); } 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怎么实现圆角和圆形图片”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。