欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android自定义控件之圆形/圆角的实现代码

程序员文章站 2024-02-28 13:47:52
一、问题在哪里? 问题来源于app开发中一个很常见的场景——用户头像要展示成圆的:  二、怎么搞? 机智的我,第一想法就是,切一张中间圆形透明、四周与底...

一、问题在哪里?

问题来源于app开发中一个很常见的场景——用户头像要展示成圆的:

Android自定义控件之圆形/圆角的实现代码

 二、怎么搞?

机智的我,第一想法就是,切一张中间圆形透明、四周与底色相同、尺寸与头像相同的蒙板图片,盖在头像上不就完事了嘛,哈哈哈!

在背景纯色的前提下,这的确能简单解决问题,但是如果背景没有这么简单呢?

Android自定义控件之圆形/圆角的实现代码

在这种不规则背景下,有两个问题:

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 一起用,将图片缩放一下。

四、更多玩法 —— 支持边框

看下面的效果图,如果想给圆形的头像上加一个边框,该怎么搞呢?

Android自定义控件之圆形/圆角的实现代码

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呢?

 Android自定义控件之圆形/圆角的实现代码

其实原理上一样,把 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软件编程有所帮助。