RoundingParams
-
百学须先立志—学前须知:
之前我们学会了一些基本的效果设置,对于常见的圆形圆角图没有涉及,那么今天我们就一起来看看,如何设置圆形圆角图。
-
尽信书,不如无书—能学到什么?
1、DraweeHierarchy
2、SettableDraweeHierarchy
3、GenericDraweeHierarchy
4、GenericDraweeHierarchyBuilder
5、RoundingParams
6、RoundingParams.RoundingMethod
7、圆形圆角图 -
工欲善其事必先利其器—了解Fresco
Fresco官方中文说明:http://www.fresco-cn.org/
Fresco项目官方GitHub地址:https://github.com/facebook/fresco
上一篇Fresco效果设置:Fresco-更灵活的设置加载特效[Java代码实现XML效果]
-
简单基础:
首先创建一个 activity_main.xml :
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
代码分析:
相信大家对这个布局已经是很熟悉了,必须指定 SimpleDraweeView 控件的大小,否则图像不能正常加载;那么接下来我们来书写我们的MainActivity 里面的内容:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
代码分析:
最后,我们到 AndroidManifest 文件中添加访问网络的权限:
- 1
- 2
- 1
- 2
代码分析:
我们运行一下,看看效果:
-
圆形图—setRoundingParams:
设置圆形图只有一种方式,但它有两种方法:
限定符和类型 方法 说明 static RoundingParams asCircle() 将图像设置成圆形 RoundingParams setRoundAsCircle(boolean roundAsCircle) 是否将图像设置成圆形 那么接下来,我们依次使用这两种方法为图像设置成圆形,首先使用第一种方法,修改刚刚书写的 MainActivity 里面的代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
代码分析:
运行一下,看看效果:
那么可以看到第一种方法是完美运行的,接下来使用第二种方法,修改我们刚刚书写的 MainActivity:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
代码分析:
我们运行一下,看看效果:
-
圆角图—setRoundingParams:
设置圆角图只有一种方式,但它有六种方法:
限定符和类型 方法 说明 static RoundingParams fromCornersRadius(float radius) 设置圆角半径 static RoundingParams fromCornersRadii(float[] radii) 分别设置左上角、右上角、左下角、右下角圆角半径 static RoundingParams fromCornersRadii(float topLeft, float topRight, float bottomRight, float bottomLeft) 分别设置左上角、右上角、左下角、右下角圆角半径 RoundingParams setCornersRadius(float radius) 设置圆角半径 RoundingParams setCornersRadii(float[] radii) 分别设置左上角、右上角、左下角、右下角圆角半径 RoundingParams setCornersRadii(float topLeft, float topRight, float bottomRight, float bottomLeft) 分别设置左上角、右上角、左下角、右下角圆角半径 那么接下来,我们依次使用这六种方法为图像设置成圆形,首先使用第一种方法,修改刚刚书写的 MainActivity 里面的代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
代码分析:
运行一下,看看效果:
接下来第二种方法,修改我们刚刚书写的 MainActivity:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
代码分析:
运行一下,看看效果:
接下来我们一起来实现第三种方法,修改我们刚刚书写的 MainActivity :
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
代码分析:
运行一下,看看效果:
大家有没有发现我们之前三种方法使用的都是静态方法,那么接下来我们使用剩下的三个非静态方法,首先使用非静态方法第一个,修改我们刚刚书写的 MainActivity 代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
代码分析:
运行一下,看看效果:
和第一种设置圆角方法的效果一样,接下来我们使用非静态方法第二种,修改我们刚刚书写的 MainActivity :
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
代码分析:
运行一下,看看效果:
和第二种设置圆角方法的效果一样,接下来我们使用非静态方法第三种,修改我们刚刚书写的 MainActivity :
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
代码分析:
运行一下,看看效果:
和第三种设置圆角方法的效果一样,好了,设置圆角的6种方法都演示了一遍,大家可以从头回顾一下。
-
边框颜色及其宽度—setBorder:
接下来,我们对圆形圆角图的边框宽度进行设置,修改我们刚刚书写的 MainActivity :
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
代码分析:
运行一下,看看效果:
-
叠加颜色—setOverlayColor:
设置叠加颜色,修改我们刚刚书写的 MainActivity :
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
代码分析:
运行一下,看看效果:
注意:
此效果仅在
RoundingParams.RoundingMethod为OVERLAY_COLOR
模式下有效,并且当我们使用了这个方法之后,它会将默认的BITMAP_ONLY 改为 OVERLAY_COLOR ,前提是没有使用设置圆形圆角模式方法。 -
圆形圆角模式—setRoundingMethod:
什么是圆形圆角模式呢?首先模式有两种:
限定符和类型 方法 说明 RoundingParams.RoundingMethod BITMAP_ONLY 使用圆角BitmapShader绘制Bitmap RoundingParams.RoundingMethod OVERLAY_COLOR 画圆角的底部通过一个纯色绘制,颜色由setOverlayColor指定 我们来看看 Fresco中文说明 上的说明:
在运行时,不能改变呈现方式: 原本是圆角,不能改为圆圈。
当使用BITMAP_ONLY(默认)模式时的限制:
1、并非所有的图片分支部分都可以实现圆角,目前只有占位图片和实际图片可以实现圆角,我们正在努力为背景图片实现圆角功能。 2、只有BitmapDrawable 和 ColorDrawable类的图片可以实现圆角。我们目前不支持包括NinePatchDrawable和 ShapeDrawable在内的其他类型图片。(无论他们是在XML或是程序中声明的) 3、动画不能被圆角。 4、由于Android的BitmapShader的限制,当一个图片不能覆盖全部的View的时候,边缘部分会被重复显示,而非留白。对这种情况可以使用不同的缩放类型(比如centerCrop)来保证图片覆盖了全部的View。
OVERLAY_COLOR模式没有上述限制,但由于这个模式使用在图片上覆盖一个纯色图层的方式来模拟圆角效果,因此只有在图标背景是静止的并且与图层同色的情况下才能获得较好的效果。
Drawee 内部实现了一个CLIPPING模式。但由于有些Canvas的实现并不支持路径剪裁(Path Clipping),这个模式被禁用了且不对外开放。并且由于路径剪裁不支持反锯齿,会导致圆角的边缘呈现像素化的效果。
总之,如果生成临时bitmap的方法,所有的上述问题都可以避免。但是这个方法并不被支持因为这会导致很严重的内存问题。
看完了 Fresco中文说明 之后呢,我们来看看这两种模式有什么不同,修改我们刚刚书写的 MainActivity :
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
代码分析:
运行一下,看看效果:
可以看到我们设置的叠加图没有效果,那么接下来我们将模式改为 OVERLAY_COLOR 看看,修改我们刚刚书写的 MainActivity :
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
代码分析:
运行一下,看看效果:
-
总结:
限定符和类型 方法 说明 static RoundingParams asCircle() 将图像设置成圆形 static RoundingParams fromCornersRadii(float[] radii) 分别设置(前2个)左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径 static RoundingParams fromCornersRadii(float topLeft, float topRight, float bottomRight, float bottomLeft) 分别设置左上角、右上角、左下角、右下角的圆角半径 static RoundingParams fromCornersRadius(float radius) 设置圆角半径 int getBorderColor() 获取边框颜色 float getBorderWidth() 获取边框宽度 float[] getCornersRadii() 获取圆角半径 int getOverlayColor() 获取叠加颜色 boolean getRoundAsCircle() 获取图像是否是圆形 RoundingParams.RoundingMethod getRoundingMethod() 获取当前圆形圆角模式 RoundingParams setBorder(int color, float width) 设置边框颜色及其宽度 RoundingParams setCornersRadii(float[] radii) 分别设置(前2个)左上角、(3、4)右上角、(5、6)左下角、(7、8)右下角的圆角半径 RoundingParams setCornersRadii(float topLeft, float topRight, float bottomRight, float bottomLeft) 分别设置左上角、右上角、左下角、右下角的圆角半径 RoundingParams setCornersRadius(float radius) 设置圆角半径 RoundingParams setOverlayColor(int overlayColor) 设置叠加颜色并将设置圆形圆角的方法改为RoundingMethod.COLOR_OVERLAY RoundingParams setRoundAsCircle(boolean roundAsCircle) 设置图像是否为圆形 RoundingParams setRoundingMethod(RoundingParams.RoundingMethod roundingMethod) 设置圆形圆角模式 -
Github:
此次教程Github项目地址:https://github.com/scp504677840/Fresco