一、问题在哪里？
问题来源于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>
然后在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;
}
}
}
<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>
<?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>
七、demo源码
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
Error running app: Default Activity Not Found
如何用HMS Nearby Service给自己的App添加近距离数据传输功能
BlockChain：2020年7月10日世界人工智能大会WAIC《链智未来 赋能产业区块链主题论坛》(四)
网友评论