这才是真正的万能圆角ImageView

时间:2022-04-26
本文章向大家介绍这才是真正的万能圆角ImageView,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

不知道有没有人记得我去年写过一个圆角的imageview。不知道的可以先去看看:万能圆角imagview,本文是基于上一篇的内容进行添加以及修改的。不然直接看这篇可能会有点懵。

前言

我为什么要二次封装?最近公司有个需求是这样的。

同事说,不知道怎么搞,于是乎,我把之前写的imageview给过去了。他来了句,你这圆角和fitxy同时设置会有问题啊,我反手就是一个大嘴巴子。我的代码怎么会有问题。于是,拿来一瞧,的确有点问题。So,我决定对这个imageview进行二次的封装。(当然了,这个问题的最后处理是后台直接给一个圆角的imageview)。

如何实现

细想一下,上文我们是怎么做的,我们是把绘制的区域,从(0,0)移动到我们想要的地方,说个粗暴点的话,我们强制的把这个imagview的scaletype的属性设置了centercrop。那么这次我们就要将它的scaletype设置成可调的属性。

实现逻辑

我前面也说过了,上次我们是根据imageview的源码来修改他的编辑区域的,这次,我们照常打开源码,找到园中对scaletype的处理逻辑,代码如下:

我们找到上次对其实位置修改的地方。跟着源码一样改成一样。改完之后代码如下:

我们可以发现其实和源码对比下来,改动还是有的。为什么呢?我们仔细看下这段代码:

源码里面只对drawable进行了处理。但我们可以发现后面的判断每次都会调用matrix.setScale这个方法。但在当scaletype为fitxy时,没有进行处理。我们也知道,我们看的是源码,他肯定偷偷的在某个地方进行了处理。那么我们要处理怎么办呢?仔细看代码:

fitxy我们都知道是充满布局,然后在细看这块代码,你是不是懂了呢?布局的宽高除以图片的宽高。然后设置它的比例。

加上边框

为了更好的封装,我选择加上边框和边框颜色的自定义属性。那么接下来就是直接上代码了。 我们需要再定义一个画笔:

接下来我们就是直接画上去了。当然了,我们这边默认是不设置,也就是borderwidth为0,所以我们要加一个判断:

我们一编译,一运行,效果炸了。你问我为什么?我们先来看个效果在说把。

我们发现我们修改的fitxy属性已经生效了。但是,为什么加了边框是这样呢? 仔细想想。我们画圆角和圆的时候是不是忘记去掉了边框的宽度呢?那么我们既然找到了原因就可以找到解决方法了。那我们就直接去掉边框的高度,注意!!圆角和圆的都要处理。

canvas.drawCircle(radius, radius, radius, paint);  
   if (border_width > 0) {      
  canvas.drawCircle(radius, radius, radius - border_width / 2, boder_paint);  
 }
   protected void onSizeChanged(int w, int h, int oldw, int oldh) {
      super.onSizeChanged(w, h, oldw, oldh);   
      if (type == TYPE_ROUND) { 
       rectF = new RectF(border_width/2,border_width/2,
        getWidth()- border_width / 2, getHeight()- border_width / 2);
     }    
 }

我们再来看下效果:

搞定。完美~

使用

在gradle加上如下代码:

compile 'com.angel:SWImageView:1.0.0'

关于自定义属性:

我觉得命名很清晰明了。我就不介绍了。 项目我已上传到github:https://github.com/sw950729/SWImageView 喜欢的朋友随手点了star。谢谢。