Android基于Fresco怎么实现圆角和圆形图片(android,fresco,开发技术)

Fresco本身已经实现了圆角以及圆形图片的功能。

<!--圆形图片，一般用作头像--><com.facebook.drawee.view.SimpleDraweeViewandroid: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.SimpleDraweeViewandroid: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剪裁成我们想要的图形。

publicclassRoundImageViewextendsSimpleDraweeView{privatefinalstaticintDEFAULT_VALUE=0;privatefloatmWidth;privatefloatmHeight;privatePathmPath;//圆角角度privatefloatmCornerRadius;//左上角圆角角度privatefloatmLeftTopRadius;//右上角圆角角度privatefloatmRightTopRadius;//右下角圆角角度privatefloatmRightBottomRadius;//左下角圆角角度privatefloatmLeftBottomRadius;//是否使用圆形图片privatebooleanmAsCircle;//圆形图片半径privatefloatmRadius;publicRoundImageView(Contextcontext){this(context,null);}publicRoundImageView(Contextcontext,AttributeSetattrs){this(context,attrs,0);}publicRoundImageView(Contextcontext,AttributeSetattrs,intdefStyleAttr){super(context,attrs,defStyleAttr);initData();initAttrs(context,attrs);}privatevoidinitData(){mPath=newPath();}privatevoidinitAttrs(Contextcontext,AttributeSetattrs){TypedArraytypedArray=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();}@OverrideprotectedvoidonLayout(booleanchanged,intleft,inttop,intright,intbottom){super.onLayout(changed,left,top,right,bottom);mWidth=getWidth();mHeight=getHeight();//如果开启了圆形标记if(mAsCircle){mRadius=Math.min(mWidth/2,mHeight/2);}}@OverrideprotectedvoidonDraw(Canvascanvas){//如果开启了圆形标记，圆形图片的优先级高于圆角图片if(mAsCircle){drawCircleImage(canvas);}else{drawCornerImage(canvas);}super.onDraw(canvas);}/***画中间圆形*@paramcanvas*/privatevoiddrawCircleImage(Canvascanvas){mPath.addCircle(mWidth/2,mHeight/2,mRadius,Path.Direction.CW);canvas.clipPath(mPath);}/***画圆角*@paramcanvas*/privatevoiddrawCornerImage(Canvascanvas){if(mWidth>mCornerRadius&&mHeight>mCornerRadius){//设置四个角的x,y半径值float[]radius={mLeftTopRadius,mLeftTopRadius,mRightTopRadius,mRightTopRadius,mRightBottomRadius,mRightBottomRadius,mLeftBottomRadius,mLeftBottomRadius};mPath.addRoundRect(newRectF(0,0,mWidth,mHeight),radius,Path.Direction.CW);canvas.clipPath(mPath);}}}

attr属性如下

<!--适配android10的图片控件--><declare-styleablename="RoundImageView"><!--圆形图片--><attrname="asCircle"format="boolean"/><!--左上角圆角半径--><attrname="leftTopRadius"format="dimension"/><!--右上角圆角半径--><attrname="rightTopRadius"format="dimension"/><!--右下角圆角半径--><attrname="rightBottomRadius"format="dimension"/><!--左下角圆角半径--><attrname="leftBottomRadius"format="dimension"/><!--四个圆角半径，会覆盖上边四个圆角值--><attrname="cornerRadius"format="dimension"/></declare-styleable>