IBigerBiger的成长之路

关于圆角ImageView的几种实现方式

在实际的开发中,我们经常会遇到需要圆角ImageView的情况,但是这种ImageView官方是没有提供的,所以需要我们去自己重写ImageView来达到圆角的效果,但是实现这种圆角效果其实有几种不同的实现方式,所以这一篇就对不同的实现方式进行讲解,并简单分析。

一.BitmapShader方式


首先简单了解下BitmapShader,BitmapShader是Shader的子类,Shader在三维软件中我们称之为着色器,所以通俗的理解,Shader的作用是给图像着色或者上色,BitmapShader允许我们载入一张图片来给图像着色,具体不做过多的解释,结尾贴出关于Shader的具体使用的文章

所以其实根据上面对于BitmapShader的描述,其实就可以对圆角ImageView有一定的思路了吧,画一个圆角矩形,然后把本来画上去的图像着色到圆角矩形上,这样就实现了圆角的ImageView

思路说了就把代码直接贴上来了,代码注释也很清楚的,不做过多的解释了

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
public class RoundImageView extends ImageView{
//圆角大小,默认为10
private int mBorderRadius = 10;
private Paint mPaint;
// 3x3 矩阵,主要用于缩小放大
private Matrix mMatrix;
//渲染图像,使用图像为绘制图形着色
private BitmapShader mBitmapShader;
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);
mMatrix = new Matrix();
mPaint = new Paint();
mPaint.setAntiAlias(true);
}
@Override
protected void onDraw(Canvas canvas) {
if (getDrawable() == null){
return;
}
Bitmap bitmap = drawableToBitamp(getDrawable());
mBitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
float scale = 1.0f;
if (!(bitmap.getWidth() == getWidth() && bitmap.getHeight() == getHeight()))
{
// 如果图片的宽或者高与view的宽高不匹配,计算出需要缩放的比例;缩放后的图片的宽高,一定要大于我们view的宽高;所以我们这里取大值;
scale = Math.max(getWidth() * 1.0f / bitmap.getWidth(),
getHeight() * 1.0f / bitmap.getHeight());
}
// shader的变换矩阵,我们这里主要用于放大或者缩小
mMatrix.setScale(scale, scale);
// 设置变换矩阵
mBitmapShader.setLocalMatrix(mMatrix);
// 设置shader
mPaint.setShader(mBitmapShader);
canvas.drawRoundRect(new RectF(0,0,getWidth(),getHeight()), mBorderRadius, mBorderRadius,
mPaint);
}
private Bitmap drawableToBitamp(Drawable drawable)
{
if (drawable instanceof BitmapDrawable)
{
BitmapDrawable bd = (BitmapDrawable) drawable;
return bd.getBitmap();
}
// 当设置不为图片,为颜色时,获取的drawable宽高会有问题,所有当为颜色时候获取控件的宽高
int w = drawable.getIntrinsicWidth() <= 0 ? getWidth() : drawable.getIntrinsicWidth();
int h = drawable.getIntrinsicHeight() <= 0 ? getHeight() : drawable.getIntrinsicHeight();
Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, w, h);
drawable.draw(canvas);
return bitmap;
}
}

只是基本功能的实现,并没有进行更多的扩展,所以如果需要,自给自足即可

运行截图如下


图1 BitmapShader方式

二. PorterDuffXfermode方式


首先得了解下什么是PorterDuffXfermode,PorterDuffXfermode是Xfermode的子类,Xfermode又称为图像混合模式,除了PorterDuffXfermode之外还有其他几个子类分别为AvoidXfermode,PixelXorXfermode,

不做详细的介绍,会在文章后面贴上详细学习的文章,我们要知道的是我们需要用到的,我们通过设置PorterDuffXfermode属性PorterDuff.Mode.SRC_IN来实现需要的效果,那么这个PorterDuff.Mode.SRC_IN是什么意思呢?他的意思是源图像与目标图像相交地方绘制源图像,所以只需要我们把源图像设置为圆角矩形,目标图像绘制源图像,那么经过PorterDuffXfermode的效果就可以达到圆角矩形的效果

这个API因为不支持硬件加速在API 16已经过时了,如果想在高于API 16的机子上测试这玩意,必须现在应用或手机设置中关闭硬件加速

接下来贴上实现的源码,不做解释了,注释写的很清晰了

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
public class RoundImageView extends ImageView{
private Paint mPaint;
private Xfermode mXfermode;
private int mBorderRadius = 10;
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);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
}
@Override
protected void onDraw(Canvas canvas) {
if (getDrawable() == null){
return;
}
int sc = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
//画源图像,为一个圆角矩形
canvas.drawRoundRect(new RectF(0, 0, getWidth(), getHeight()), mBorderRadius, mBorderRadius,
mPaint);
//设置混合模式
mPaint.setXfermode(mXfermode);
//画目标图像
canvas.drawBitmap(drawableToBitamp(exChangeSize(getDrawable())), 0, 0, mPaint);
// 还原混合模式
mPaint.setXfermode(null);
canvas.restoreToCount(sc);
}
/**
* 图片拉升
*
* @param drawable
* @return
*/
private Drawable exChangeSize(Drawable drawable){
float scale = 1.0f;
scale = Math.max(getWidth() * 1.0f / drawable.getIntrinsicWidth(), getHeight()
* 1.0f / drawable.getIntrinsicHeight());
drawable.setBounds(0, 0, (int) (scale * drawable.getIntrinsicWidth()),
(int) (scale * drawable.getIntrinsicHeight()));
return drawable;
}
private Bitmap drawableToBitamp(Drawable drawable)
{
if (drawable instanceof BitmapDrawable)
{
BitmapDrawable bd = (BitmapDrawable) drawable;
return bd.getBitmap();
}
// 当设置不为图片,为颜色时,获取的drawable宽高会有问题,所有当为颜色时候获取控件的宽高
int w = drawable.getIntrinsicWidth() <= 0 ? getWidth() : drawable.getIntrinsicWidth();
int h = drawable.getIntrinsicHeight() <= 0 ? getHeight() : drawable.getIntrinsicHeight();
Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, w, h);
drawable.draw(canvas);
return bitmap;
}
}

图2 PorterDuffXfermode方式

三.ClipPath方式


ClipPath是Canvas提供对画布裁剪的方法之一,除了ClipPath还有clipRect方法,画布裁剪后后面的Canvas操作,都会在对裁剪后的画布进行操作

所以呢,只要绘出一个圆角矩形的路径,然后用ClipPath裁剪,那么得到的画布就是圆角矩形的,那么后面的绘制自然也就是圆角矩形的了,解释很清楚了,直接上代码了,

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
public class RoundImageView extends ImageView{
float width,height;
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);
if (Build.VERSION.SDK_INT < 18) {
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
width = getWidth();
height = getHeight();
}
@Override
protected void onDraw(Canvas canvas) {
if (width > 12 && height > 12) {
Path path = new Path();
path.moveTo(12, 0);
path.lineTo(width - 12, 0);
path.quadTo(width, 0, width, 12);
path.lineTo(width, height - 12);
path.quadTo(width, height, width - 12, height);
path.lineTo(12, height);
path.quadTo(0, height, 0, height - 12);
path.lineTo(0, 12);
path.quadTo(0, 0, 12, 0);
canvas.clipPath(path);
}
super.onDraw(canvas);
}
}

图3 ClipPath方式

四.选择哪一种?


实现有三种,那选择哪一种最时候呢?less is more,我们当然选择代码量最少的咯,毕竟程序员,偷懒最重要,哈哈,其实没有啦,主要是第二和第一种方式或多或少的都处理了Bitmap和Drawable,自然没有第三种来的安全。

写在后面的几句话


其实实现都不难,主要也是了解下一些绘图用到的类和方法,掌握了各种绘图的类和使用,自定义View什么的都不是问题来着的,我的愿望是世界和平!!!