一、问题在哪里？
问题来源于app开发中一个很常见的场景——用户头像要展示成圆的：
二、怎么搞？
机智的我，第一想法就是，切一张中间圆形透明、四周与底色相同、尺寸与头像相同的蒙板图片，盖在头像上不就完事了嘛，哈哈哈！
在背景纯色的前提下，这的确能简单解决问题，但是如果背景没有这么简单呢？
在这种不规则背景下，有两个问题：
1)、背景图常常是适应手机宽度缩放，而头像的尺寸又是固定宽高dp的，所以固定的蒙板图片是没法保证在不同机型上都和背景图案吻合的。
2)、在这种非纯色背景下，哪天想调整一下头像位置就得重新换图片蒙板，实在是太难维护了……
所以呢，既然头像图片肯定是方的，那就就让imageview圆起来吧。
三、开始干活
基本思路是，自定义一个imageview，通过重写ondraw方法画出一个圆形的图片来：
|
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
|
public class imageviewplus extends imageview{ private paint mpaintbitmap = new paint(paint.anti_alias_flag); private bitmap mrawbitmap; private bitmapshader mshader; private matrix mmatrix = new matrix(); public imageviewplus(context context, attributeset attrs) { super(context, attrs); } @override protected void ondraw(canvas canvas) { bitmap rawbitmap = getbitmap(getdrawable()); if (rawbitmap != null){ int viewwidth = getwidth(); int viewheight = getheight(); int viewminsize = math.min(viewwidth, viewheight); float dstwidth = viewminsize; float dstheight = viewminsize; if (mshader == null || !rawbitmap.equals(mrawbitmap)){ mrawbitmap = rawbitmap; mshader = new bitmapshader(mrawbitmap, tilemode.clamp, tilemode.clamp); } if (mshader != null){ mmatrix.setscale(dstwidth / rawbitmap.getwidth(), dstheight / rawbitmap.getheight()); mshader.setlocalmatrix(mmatrix); } mpaintbitmap.setshader(mshader); float radius = viewminsize / 2.0f; canvas.drawcircle(radius, radius, radius, mpaintbitmap); } else { super.ondraw(canvas); } } private bitmap getbitmap(drawable drawable){ if (drawable instanceof bitmapdrawable){ return ((bitmapdrawable)drawable).getbitmap(); } else if (drawable instanceof colordrawable){ rect rect = drawable.getbounds(); int width = rect.right - rect.left; int height = rect.bottom - rect.top; int color = ((colordrawable)drawable).getcolor(); bitmap bitmap = bitmap.createbitmap(width, height, bitmap.config.argb_8888); canvas canvas = new canvas(bitmap); canvas.drawargb(color.alpha(color), color.red(color), color.green(color), color.blue(color)); return bitmap; } else { return null; } }} |
分析一下代码：
canvas.drawcircle 决定了画出来的形状是圆形，而圆形的内容则是通过 mpaintbitmap.setshader 搞定的。
其中，bitmapshader需要设置bitmap填充imageview的方式(clamp：拉伸边缘, mirror：镜像, repeat：整图重复)。
这里其实设成什么不重要，因为我们实际需要的是将bitmap按比例缩放成跟imageview一样大，而不是预置的三种效果。
所以，别忘了 mmatrix.setscale 和 mshader.setlocalmatrix 一起用，将图片缩放一下。
四、更多玩法 —— 支持边框
看下面的效果图，如果想给圆形的头像上加一个边框，该怎么搞呢？
|
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
|
public class imageviewplus extends imageview{ private paint mpaintbitmap = new paint(paint.anti_alias_flag); private paint mpaintborder = new paint(paint.anti_alias_flag); private bitmap mrawbitmap; private bitmapshader mshader; private matrix mmatrix = new matrix(); private float mborderwidth = dip2px(15); private int mbordercolor = 0xff0080ff; public imageviewplus(context context, attributeset attrs) { super(context, attrs); } @override protected void ondraw(canvas canvas) { bitmap rawbitmap = getbitmap(getdrawable()); if (rawbitmap != null){ int viewwidth = getwidth(); int viewheight = getheight(); int viewminsize = math.min(viewwidth, viewheight); float dstwidth = viewminsize; float dstheight = viewminsize; if (mshader == null || !rawbitmap.equals(mrawbitmap)){ mrawbitmap = rawbitmap; mshader = new bitmapshader(mrawbitmap, tilemode.clamp, tilemode.clamp); } if (mshader != null){ mmatrix.setscale((dstwidth - mborderwidth * 2) / rawbitmap.getwidth(), (dstheight - mborderwidth * 2) / rawbitmap.getheight()); mshader.setlocalmatrix(mmatrix); } mpaintbitmap.setshader(mshader); mpaintborder.setstyle(paint.style.stroke); mpaintborder.setstrokewidth(mborderwidth); mpaintborder.setcolor(mbordercolor); float radius = viewminsize / 2.0f; canvas.drawcircle(radius, radius, radius - mborderwidth / 2.0f, mpaintborder); canvas.translate(mborderwidth, mborderwidth); canvas.drawcircle(radius - mborderwidth, radius - mborderwidth, radius - mborderwidth, mpaintbitmap); } else { super.ondraw(canvas); } } private bitmap getbitmap(drawable drawable){ if (drawable instanceof bitmapdrawable){ return ((bitmapdrawable)drawable).getbitmap(); } else if (drawable instanceof colordrawable){ rect rect = drawable.getbounds(); int width = rect.right - rect.left; int height = rect.bottom - rect.top; int color = ((colordrawable)drawable).getcolor(); bitmap bitmap = bitmap.createbitmap(width, height, bitmap.config.argb_8888); canvas canvas = new canvas(bitmap); canvas.drawargb(color.alpha(color), color.red(color), color.green(color), color.blue(color)); return bitmap; } else { return null; } } private int dip2px(int dipval) { float scale = getresources().getdisplaymetrics().density; return (int)(dipval * scale + 0.5f); }} |
看代码中，加边框实际上就是用实心纯色的 paint 画了一个圆边，在此基础上画上原来的头像即可。
需要的注意的地方有三个：
1)、圆框的半径不是 radius ，而应该是 radius - mborderwidth / 2.0f 。想象着拿着笔去画线，线其实是画在右图中白色圈的位置，只不过它很粗。
2)、在imageview大小不变的基础上，头像的实际大小要比没有边框的时候小了，所以 mmatrix.setscale 的时候要把边框的宽度去掉。
3)、画头像bitmap的时候不能直接 canvas.drawcircle(radius, radius, radius - mborderwidth, mpaintbitmap) ，这样你会发现头像的右侧和下方边缘被拉伸了（右图）
为什么呢？因为 paint 默认是以左上角为基准开始绘制的，此时头像的实际区域是右图中的红框，而超过红框的部分（圆形的右侧和下方），自然被 tilemode.clamp效果沿边缘拉伸了。
所以，需要通过挪动坐标系的位置和调整圆心，才能把头像画在正确的区域（右图绿框）中。
五、更多玩法 —— 支持xml配置
既然有了边框，那如果想配置边框的宽度和颜色该如何是好呢？
基本上两个思路：
1)给imageviewplus加上set接口，设置完成之后通过 invalidate(); 重绘一下即可；
2)在xml里就支持配置一些自定义属性，这样用起来会方便很多。
这里重点说一下支持xml配置自定义属性。
自定义控件要支持xml配置自定义属性的话，首先需要在 \res\values 里去定义属性：
|
1
2
3
4
5
6
7
8
9
10
|
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="bordercolor" format="color" /> <attr name="borderwidth" format="dimension" /> <declare-styleable name="imageviewplus"> <attr name="bordercolor" /> <attr name="borderwidth" /> </declare-styleable> </resources> |
view attrs_imageviewplus.xml
然后在imageviewplus的构造函数中去读取这些自定义属性：
|
1
2
3
4
5
6
7
8
9
10
11
|
private static final int default_border_color = color.transparent; private static final int default_border_width = 0; public imageviewplus(context context, attributeset attrs) { super(context, attrs); //取xml文件中设定的参数 typedarray ta = context.obtainstyledattributes(attrs, r.styleable.imageviewplus); mbordercolor = ta.getcolor(r.styleable.imageviewplus_bordercolor, default_border_color); mborderwidth = ta.getdimensionpixelsize(r.styleable.imageviewplus_borderwidth, dip2px(default_border_width)); ta.recycle(); } |
在xml布局中使用自定义属性：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:snser="http://schemas.android.com/apk/res/cc.snser.imageviewplus" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/wallpaper" android:orientation="vertical" tools:context="${relativepackage}.${activityclass}" > <cc.snser.imageviewplus.imageviewplus android:id="@+id/imgplus" android:layout_width="200dp" android:layout_height="300dp" android:layout_marginbottom="50dp" android:layout_centerhorizontal="true" android:layout_alignparentbottom="true" android:src="@drawable/img_square" snser:bordercolor="#ff0080ff" snser:borderwidth="15dp" /> </relativelayout> |
六、更多玩法 —— 圆角imageview
搞定了圆形imageview以及对应的边框，那如何实现下面这种圆角的imageview呢？
其实原理上一样，把 canvas.drawcircle 对应改成 canvas.drawroundrect 就ok了，直接贴代码吧：
|
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
public class imageviewplus extends imageview{ /** * android.widget.imageview */ public static final int type_none = 0; /** * 圆形 */ public static final int type_circle = 1; /** * 圆角矩形 */ public static final int type_rounded_rect = 2; private static final int default_type = type_none; private static final int default_border_color = color.transparent; private static final int default_border_width = 0; private static final int default_rect_round_radius = 0; private int mtype; private int mbordercolor; private int mborderwidth; private int mrectroundradius; private paint mpaintbitmap = new paint(paint.anti_alias_flag); private paint mpaintborder = new paint(paint.anti_alias_flag); private rectf mrectborder = new rectf(); private rectf mrectbitmap = new rectf(); private bitmap mrawbitmap; private bitmapshader mshader; private matrix mmatrix = new matrix(); public imageviewplus(context context, attributeset attrs) { super(context, attrs); //取xml文件中设定的参数 typedarray ta = context.obtainstyledattributes(attrs, r.styleable.imageviewplus); mtype = ta.getint(r.styleable.imageviewplus_type, default_type); mbordercolor = ta.getcolor(r.styleable.imageviewplus_bordercolor, default_border_color); mborderwidth = ta.getdimensionpixelsize(r.styleable.imageviewplus_borderwidth, dip2px(default_border_width)); mrectroundradius = ta.getdimensionpixelsize(r.styleable.imageviewplus_rectroundradius, dip2px(default_rect_round_radius)); ta.recycle(); } @override protected void ondraw(canvas canvas) { bitmap rawbitmap = getbitmap(getdrawable()); if (rawbitmap != null && mtype != type_none){ int viewwidth = getwidth(); int viewheight = getheight(); int viewminsize = math.min(viewwidth, viewheight); float dstwidth = mtype == type_circle ? viewminsize : viewwidth; float dstheight = mtype == type_circle ? viewminsize : viewheight; float halfborderwidth = mborderwidth / 2.0f; float doubleborderwidth = mborderwidth * 2; if (mshader == null || !rawbitmap.equals(mrawbitmap)){ mrawbitmap = rawbitmap; mshader = new bitmapshader(mrawbitmap, tilemode.clamp, tilemode.clamp); } if (mshader != null){ mmatrix.setscale((dstwidth - doubleborderwidth) / rawbitmap.getwidth(), (dstheight - doubleborderwidth) / rawbitmap.getheight()); mshader.setlocalmatrix(mmatrix); } mpaintbitmap.setshader(mshader); mpaintborder.setstyle(paint.style.stroke); mpaintborder.setstrokewidth(mborderwidth); mpaintborder.setcolor(mborderwidth > 0 ? mbordercolor : color.transparent); if (mtype == type_circle){ float radius = viewminsize / 2.0f; canvas.drawcircle(radius, radius, radius - halfborderwidth, mpaintborder); canvas.translate(mborderwidth, mborderwidth); canvas.drawcircle(radius - mborderwidth, radius - mborderwidth, radius - mborderwidth, mpaintbitmap); } else if (mtype == type_rounded_rect){ mrectborder.set(halfborderwidth, halfborderwidth, dstwidth - halfborderwidth, dstheight - halfborderwidth); mrectbitmap.set(0.0f, 0.0f, dstwidth - doubleborderwidth, dstheight - doubleborderwidth); float borderradius = mrectroundradius - halfborderwidth > 0.0f ? mrectroundradius - halfborderwidth : 0.0f; float bitmapradius = mrectroundradius - mborderwidth > 0.0f ? mrectroundradius - mborderwidth : 0.0f; canvas.drawroundrect(mrectborder, borderradius, borderradius, mpaintborder); canvas.translate(mborderwidth, mborderwidth); canvas.drawroundrect(mrectbitmap, bitmapradius, bitmapradius, mpaintbitmap); } } else { super.ondraw(canvas); } } private int dip2px(int dipval) { float scale = getresources().getdisplaymetrics().density; return (int)(dipval * scale + 0.5f); } private bitmap getbitmap(drawable drawable){ if (drawable instanceof bitmapdrawable){ return ((bitmapdrawable)drawable).getbitmap(); } else if (drawable instanceof colordrawable){ rect rect = drawable.getbounds(); int width = rect.right - rect.left; int height = rect.bottom - rect.top; int color = ((colordrawable)drawable).getcolor(); bitmap bitmap = bitmap.createbitmap(width, height, bitmap.config.argb_8888); canvas canvas = new canvas(bitmap); canvas.drawargb(color.alpha(color), color.red(color), color.green(color), color.blue(color)); return bitmap; } else { return null; } }} |
view imageviewplus.java
|
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
|
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:snser="http://schemas.android.com/apk/res/cc.snser.imageviewplus" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/wallpaper" android:orientation="vertical" tools:context="${relativepackage}.${activityclass}" > <cc.snser.imageviewplus.imageviewplus android:id="@+id/imgplus" android:layout_width="200dp" android:layout_height="300dp" android:layout_marginbottom="50dp" android:layout_centerhorizontal="true" android:layout_alignparentbottom="true" android:src="@drawable/img_rectangle" snser:type="rounded_rect" snser:bordercolor="#ff0080ff" snser:borderwidth="10dp" snser:rectroundradius="30dp" /> </relativelayout>view layout |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="type"> <enum name="none" value="0" /> <enum name="circle" value="1" /> <enum name="rounded_rect" value="2" /> </attr> <attr name="bordercolor" format="color" /> <attr name="borderwidth" format="dimension" /> <attr name="rectroundradius" format="dimension" /> <declare-styleable name="imageviewplus"> <attr name="type" /> <attr name="bordercolor" /> <attr name="borderwidth" /> <attr name="rectroundradius" /> </declare-styleable></resources> view attrs_imageviewplus.xml |
以上就是本文的全部内容，希望对大家学习android软件编程有所帮助。
