上一篇文章介绍了使用 Fresco 实现圆角的方法,可以通过两种方式来实现圆角:BITMAPONLY 模式和 OVERLAYCOLOR 模式。本文通过分析 Fresco 源码来介绍这两种方式实现圆角的原理,并总结 Android 中常用的实现图片圆角的方法。

本文重点分析 Fresco 中实现图片圆角的源码,其他部分的源码,将在后续文章中介绍。

Fresco 中圆角实现原理

在 com.facebook.drawee.drawable 包中有如下文件

  • Rounded.java
  • RoundedBitmapDrawable.java
  • RoundedColorDrawable.java
  • RoundedCornersDrawable.java

其中 Rounded 是圆角实现类的接口,定义了圆角类实现的方法:

其他三个类实现了 Rounded 接口,来实现两种不同模式的圆角,RoundedCornersDrawable.java 用于实现 OVERLAYCOLOR 模式的圆角,而 RoundedBitmapDrawable.java 和 RoundedCorlorDrawable.java 都是用于实现 BITMAPONLY 模式的圆角,两者的区别在于传入的资源类型不同,前者是对 BitmapDrawable 进行圆角处理,而后者是对 ColorDrawable 进行处理。

了解了源码中实现图片圆角的结构,下面开始进入到具体的代码中了解具体的实现过程

BITMAP_ONLY 模式

作为默认的实现模式,首先来了解下这种模式的实现过程

进入到 RoundedBitmapDrawable.java 中,首先看它的绘制过程,找到 draw() 方法:

从 draw() 方法可以了解到圆角图片的绘制过程:

  • 更新变换矩阵,用于图片大小缩放适配
  • 判断有没有设置属性,如果没有则直接绘制,如果有则进行下一步
  • 更新 Path,根据属性确定绘制的形状
  • 更新 Paint,将图片资源填充到画笔
  • 绘制图片,绘制边框

本文的重点是了解圆角的实现过程,所以接下来就进入到 updatePath() 和 updatePaint() 中看看 Path 和 Paint 是怎样实现圆角的

}

从上面的代码中可以大致了解到其主要是根据属性值 (mIsCircle) 来配置 Path,主要使用到 Path 的两个方法:addCircle() 和 addRoundRect(),这两个方法分别实现绘制圆形和绘制矩形,其参数描述如下:

  • addCircle(float x,float y,float radius,Direction dir)
    • 圆心 x 坐标
    • 圆心 y 坐标
    • 圆的半径
    • 绘制圆的方向,值 Direction.CCW 为逆时针方向,值 Directin.CW 为顺时针方向
  • addRoundRect(RectF rect,float[] radii,Direction dir)
    • 外接矩形
    • 圆角半径数组,共 8 个值,每两个为一对,顺序为:左上 -> 右上 -> 右下 -> 左下
    • 绘制圆的方向,同上

以上,便完成了 Path 的更新,接下来是对 Paint 的更新

从这里大概清楚了这种方式是通过 BitmapShader 方式来实现图片圆角的。于是这里产生了一个疑问:既然可以直接使用 BitmapShader 来实现圆角,那如果接下来再直接使用 canvas 的 drawCircle() 和 drawRoundRect()也能实现圆形图片和圆角图片,为什么还要多此一举的使用 Path 来绘制圆形和圆角矩形呢? 我对此的理解是:canvas 的drawRoundRect() 没有办法实现四个不同大小的圆角,而通过 Path 的 addRoundRect() 方法是能够实现不同圆角的图片,使用Path是为了满足这个需求。至于为什么不能在 xml 布局文件中设置不同大小的圆角而只能在代码中设置这个问题,依然不明白,期待在后续的分析中能够解决这个问题。

以上,是实现图片圆角过程中主要的步骤,至于后面的绘制边框,没太大的难度,这里就不再叙述。

OVERLAY_COLOR 模式

这种模式的实现在 RoundedCornersDrawable.java 文件中,可以看到,其实这个类中还存在着另外一种模式:CLIPPING 模式,从官方文档中可以了解到不使用这个模式的原因,这里就不再叙述。直接看使用 OVERLAY_COLOR 模式的代码实现,同样的,首先找到绘制过程 draw() 方法:

}

从上面的代码中可以了解到这种方式的实现原理大致如下:

  • 每次设置属性的时候都更新一下 Path ,也就是根据属性决定 Path 是画圆形还是圆角矩形
  • 将图片按照正常的方式先画出来(调用super.draw())
  • 对Path设置填充模式为 INVERSEEVENODD,取 Path 未占用的区域(占用的是圆形或者圆角矩形区域)
  • 画出 Path,这样未占用的区域就是指定的背景色了,占用区域就是圆角图片
  • 判断如果是圆形,则再画一个圆形,按照上述填充规则
  • 最后如果有边框就画边框,同样的规则

下面通过一幅示意图简单描述一下这种方式的实现原理:

\"实现原理\"

绘制过程大致是这样,我认为只要理解了 Path 的填充模式,这个原理就很好理解的,关于 Path 的填充模式,这篇文章中有详细介绍,可以参考一下。

以上,通过源码分析的方式理解了 Fresco 中圆角矩形的实现原理,在分析这些代码的时候我查阅了一些资料,包括 Drawable 类,Path 类,Paint 类等一些类的使用方法,然后结合源码,跟着思路慢慢得出结果,并实现了一个简单的自定义 View 来验证结果。效果如下,代码在 GitHub

\"运行效果\"

Android 中实现圆角的方案

在 Android 中有很多方法能够实现圆角矩形。根据现实生活中的经验,要对一张图片实现圆角,无非两种方式,一种是剪出圆角,另一种是遮住圆角。因此,可以简单的将实现圆角的方案分成两类:

  • 剪裁:从原始图片中剪出一个圆角图片
  • 覆盖:在原始图片上遮盖住圆角多余的部分,剩下的可见部分就是圆角矩形了

基于这两类方法,我大概总结了一些可以实现圆角矩形的方法,如下

方案一:将原始图片中截取的圆角矩形图片放在一个新建的Bitmap中

这种方式大致是 剪裁 类的方式,主要代码如下:

可以看到,这个方法中新建了一个指定宽高的 Bitmap 对象,然后创建了一个相同大小的矩形,利用画布绘制时指定圆角大小,这样在画布上就有了一个圆角矩形,然后设置画笔的剪裁方式为 Mode.SRC_IN,将原图添加到画布上,就形成了一个圆角矩形的图片。不推荐使用这种方式来实现图片圆角,因为这种方式会对每一个要实现圆角的图片生成一个新的 Bitmap 对象,将会增加内存消耗,在需要加载大量图片的时候就会很可能引发内存泄漏。

方案二:通过 Xfermode 实现

这种方式是一种 覆盖 类的方式,关于 Xfremode 有一张比较经典的示意图可以很好的解释他是做什么的

\"xFremode\"

使用 Xfremode 的具体实现就不多叙述,感兴趣的可以参考这篇文章

方案三:通过对 ViewGroup 进行设置,使包裹在内部的图片呈现圆角矩形

这种方式依然是一种 覆盖 的方式,只不过不是对当前要显示的图片进行覆盖,而是上升到父容器,对父容器进行设置,内部的图片不做任何改变。依然不推荐这种方式,因为通过这种方式实现圆角图片会增加布局的层级,在Android性能优化中有提到过尽量减少布局的层次嵌套,因此这种方式仅作参考,下面是实现代码

}

在使用时,只需要将要实现圆角的图片放在这个自定义Layout内部就行了:

方案四:使用形状 Shape 覆盖

上层是一个圆角矩形的圆环形状,覆盖在下层要显示的 ImageView 上,这是一种 覆盖 的方式。作为了解,这种方式也不推荐,因为要使用两个ImageView来显示一张图片,上层圆角矩形圆环形状需要先定制,包括圆角大小,颜色等属性,导致可定制性不强,使用不方便,仅作参考。实现代码如下: 首先在 /res/drawable 目录下新建形状 frame.xml :

接着在使用时将两个 ImageView 放在同一个 ViewGroup 中即可:

方案五:使用 Android 自带的剪切方法

这种方式仅支持 API 21 及以上版本,具体使用方法如下: 首先在 res/drawable/ 目录下创建 形状文件 round_corners.xml:

接着在使用时,只需要对 View 设置 background 属性为这个 形状文件即可:

接着在 java 代码中 findView 并设置 ImageView.setClipToOutline(true);

方案六: .9.png 实现

通过添加一个.9.png 的背景来实现图片的圆角,关于.9.png 图的制作,可以参考网上的一些资料教程,难度不大,这里只做介绍,感兴趣的朋友可以尝试一下。

以上,介绍了 Fresco 中实现圆角图片的两种方式,并总结了一些 Android 中实现圆角图片的方案,文章中用到的代码放在 GitHub 上。水平有限,如有错误或疏漏,还望不吝赐教。

发表评论

电子邮件地址不会被公开。 必填项已用*标注