android开发分享Android基于Fresco实现圆角和圆形图片

fresco是facebook开源的android平台图片加载库,可以从网络,从本地文件系统,本地资源加载图片fresco本身已经实现了圆角以及圆形图片的功能。<!–圆形图片,一般用作头像–

fresco是facebook开源的android平台图片加载库,可以从网络,从本地文件系统,本地资源加载图片

上述就是android开发分享Android基于Fresco实现圆角和圆形图片的全部内容,如果对大家有所用处且需要了解更多关于Android学习教程,希望大家多多关注—计算机技术网(www.ctvol.com)!

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通常会给我们这样一张图作为默认图片

Android基于Fresco实现圆角和圆形图片

理论上来讲,只需要加入下列这行代码,就可以完成这部分工作了

app:placeholderimage="@drawable/ic_avatar_default"

然而圆形图片本身已经是圆形的了,在有些机型上就出现了这个样式。

Android基于Fresco实现圆角和圆形图片

搜索了一波,自带的属性都不能解决这个问题,干脆自己来定义这个圆形的实现吧,同时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属性如下

<!--适配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开发分享Android基于Fresco实现圆角和圆形图片的全部内容,希望对大家的学习有所帮助,也希望大家多多支持<计算机技术网(www.ctvol.com)!!>。

本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

ctvol管理联系方式QQ:251552304

本文章地址:https://www.ctvol.com/addevelopment/1071603.html

(0)
上一篇 2022年4月1日
下一篇 2022年4月1日

精彩推荐