Android自定义控件之圆形/圆角的实现代码
一、问题在哪里?
问题来源于app开发中一个很常见的场景——用户头像要展示成圆的:
二、怎么搞?
机智的我,第一想法就是,切一张中间圆形透明、四周与底色相同、尺寸与头像相同的蒙板图片,盖在头像上不就完事了嘛,哈哈哈!
在背景纯色的前提下,这的确能简单解决问题,但是如果背景没有这么简单呢?
在这种不规则背景下,有两个问题:
1)、背景图常常是适应手机宽度缩放,而头像的尺寸又是固定宽高dp的,所以固定的蒙板图片是没法保证在不同机型上都和背景图案吻合的。
2)、在这种非纯色背景下,哪天想调整一下头像位置就得重新换图片蒙板,实在是太难维护了……
所以呢,既然头像图片肯定是方的,那就就让imageview圆起来吧。
三、开始干活
基本思路是,自定义一个imageview,通过重写ondraw方法画出一个圆形的图片来:
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 一起用,将图片缩放一下。
四、更多玩法 —— 支持边框
看下面的效果图,如果想给圆形的头像上加一个边框,该怎么搞呢?
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 里去定义属性:
<?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的构造函数中去读取这些自定义属性:
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布局中使用自定义属性:
<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了,直接贴代码吧:
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
<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
<?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软件编程有所帮助。
上一篇: MySQL主从复制配置心跳功能介绍
下一篇: 教你如何用CSS来控制网页字体的显示样式