Android中快速自定义圆形ImageView图形！
2024-04-11 11:47:40
一、问题在哪里？
问题来源于app开发中一个很常见的场景——用户头像要展示成圆的：
二、怎么搞？
机智的我，第一想法就是，切一张中间圆形透明、四周与底色相同、尺寸与头像相同的蒙板图片，盖在头像上不就完事了嘛，哈哈哈！
在背景纯色的前提下，这的确能简单解决问题，但是如果背景没有这么简单呢？
在这种不规则背景下，有两个问题：
1) 背景图常常是适应手机宽度缩放，而头像的尺寸又是固定宽高DP的，所以固定的蒙板图片是没法保证在不同机型上都和背景图案吻合的。
2) 在这种非纯色背景下，哪天想调整一下头像位置就得重新换图片蒙板，实在是太难维护了……
所以呢，既然头像图片肯定是方的，那就就让ImageView圆起来吧。
[转载请保留本文地址：http://www.cnblogs.com/snser/p/5159126.html]
三、开始干活
基本思路是，自定义一个ImageView，通过重写onDraw方法画出一个圆形的图片来：
1 public class ImageViewPlus extends ImageView{
2 private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
3 private Bitmap mRawBitmap;
4 private BitmapShader mShader;
5 private Matrix mMatrix = new Matrix();
6
7 public ImageViewPlus(Context context, AttributeSet attrs) {
8 super(context, attrs);
9 }
10
11 @Override
12 protected void onDraw(Canvas canvas) {
13 Bitmap rawBitmap = getBitmap(getDrawable());
14 if (rawBitmap != null){
15 int viewWidth = getWidth();
16 int viewHeight = getHeight();
17 int viewMinSize = Math.min(viewWidth, viewHeight);
18 float dstWidth = viewMinSize;
19 float dstHeight = viewMinSize;
20 if (mShader == null || !rawBitmap.equals(mRawBitmap)){
21 mRawBitmap = rawBitmap;
22 mShader = new BitmapShader(mRawBitmap, TileMode.CLAMP, TileMode.CLAMP);
23 }
24 if (mShader != null){
25 mMatrix.setScale(dstWidth / rawBitmap.getWidth(), dstHeight / rawBitmap.getHeight());
26 mShader.setLocalMatrix(mMatrix);
27 }
28 mPaintBitmap.setShader(mShader);
29 float radius = viewMinSize / 2.0f;
30 canvas.drawCircle(radius, radius, radius, mPaintBitmap);
31 } else {
32 super.onDraw(canvas);
33 }
34 }
35
36 private Bitmap getBitmap(Drawable drawable){
37 if (drawable instanceof BitmapDrawable){
38 return ((BitmapDrawable)drawable).getBitmap();
39 } else if (drawable instanceof ColorDrawable){
40 Rect rect = drawable.getBounds();
41 int width = rect.right - rect.left;
42 int height = rect.bottom - rect.top;
43 int color = ((ColorDrawable)drawable).getColor();
44 Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
45 Canvas canvas = new Canvas(bitmap);
46 canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
47 return bitmap;
48 } else {
49 return null;
50 }
51 }
52 }
分析一下代码：
canvas.drawCircle 决定了画出来的形状是圆形，而圆形的内容则是通过 mPaintBitmap.setShader 搞定的。
其中，BitmapShader需要设置Bitmap填充ImageView的方式(CLAMP：拉伸边缘, MIRROR：镜像, REPEAT：整图重复)。
这里其实设成什么不重要，因为我们实际需要的是将Bitmap按比例缩放成跟ImageView一样大，而不是预置的三种效果。
所以，别忘了 mMatrix.setScale 和 mShader.setLocalMatrix 一起用，将图片缩放一下。
[转载请保留本文地址：http://www.cnblogs.com/snser/p/5159126.html]
四、更多玩法 —— 支持边框
看下面的效果图，如果想给圆形的头像上加一个边框，该怎么搞呢？
1 public class ImageViewPlus extends ImageView{
2 private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
3 private Paint mPaintBorder = new Paint(Paint.ANTI_ALIAS_FLAG);
4 private Bitmap mRawBitmap;
5 private BitmapShader mShader;
6 private Matrix mMatrix = new Matrix();
7 private float mBorderWidth = dip2px(15);
8 private int mBorderColor = 0xFF0080FF;
9
10 public ImageViewPlus(Context context, AttributeSet attrs) {
11 super(context, attrs);
12 }
13
14 @Override
15 protected void onDraw(Canvas canvas) {
16 Bitmap rawBitmap = getBitmap(getDrawable());
17 if (rawBitmap != null){
18 int viewWidth = getWidth();
19 int viewHeight = getHeight();
20 int viewMinSize = Math.min(viewWidth, viewHeight);
21 float dstWidth = viewMinSize;
22 float dstHeight = viewMinSize;
23 if (mShader == null || !rawBitmap.equals(mRawBitmap)){
24 mRawBitmap = rawBitmap;
25 mShader = new BitmapShader(mRawBitmap, TileMode.CLAMP, TileMode.CLAMP);
26 }
27 if (mShader != null){
28 mMatrix.setScale((dstWidth - mBorderWidth * 2) / rawBitmap.getWidth(), (dstHeight - mBorderWidth * 2) / rawBitmap.getHeight());
29 mShader.setLocalMatrix(mMatrix);
30 }
31 mPaintBitmap.setShader(mShader);
32 mPaintBorder.setStyle(Paint.Style.STROKE);
33 mPaintBorder.setStrokeWidth(mBorderWidth);
34 mPaintBorder.setColor(mBorderColor);
35 float radius = viewMinSize / 2.0f;
36 canvas.drawCircle(radius, radius, radius - mBorderWidth / 2.0f, mPaintBorder);
37 canvas.translate(mBorderWidth, mBorderWidth);
38 canvas.drawCircle(radius - mBorderWidth, radius - mBorderWidth, radius - mBorderWidth, mPaintBitmap);
39 } else {
40 super.onDraw(canvas);
41 }
42 }
43
44 private Bitmap getBitmap(Drawable drawable){
45 if (drawable instanceof BitmapDrawable){
46 return ((BitmapDrawable)drawable).getBitmap();
47 } else if (drawable instanceof ColorDrawable){
48 Rect rect = drawable.getBounds();
49 int width = rect.right - rect.left;
50 int height = rect.bottom - rect.top;
51 int color = ((ColorDrawable)drawable).getColor();
52 Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
53 Canvas canvas = new Canvas(bitmap);
54 canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
55 return bitmap;
56 } else {
57 return null;
58 }
59 }
60
61 private int dip2px(int dipVal)
62 {
63 float scale = getResources().getDisplayMetrics().density;
64 return (int)(dipVal * scale + 0.5f);
65 }
66 }
看代码中，加边框实际上就是用实心纯色的 Paint 画了一个圆边，在此基础上画上原来的头像即可。
需要的注意的地方有三个：
1) 圆框的半径不是 radius ，而应该是 radius - mBorderWidth / 2.0f 。想象着拿着笔去画线，线其实是画在右图中白色圈的位置，只不过它很粗。
2) 在ImageView大小不变的基础上，头像的实际大小要比没有边框的时候小了，所以 mMatrix.setScale 的时候要把边框的宽度去掉。
3) 画头像Bitmap的时候不能直接 canvas.drawCircle(radius, radius, radius - mBorderWidth, mPaintBitmap) ，这样你会发现头像的右侧和下方边缘被拉伸了（右图）
为什么呢？因为 Paint 默认是以左上角为基准开始绘制的，此时头像的实际区域是右图中的红框，而超过红框的部分（圆形的右侧和下方），自然被 TileMode.CLAMP效果沿边缘拉伸了。
所以，需要通过挪动坐标系的位置和调整圆心，才能把头像画在正确的区域（右图绿框）中。
[转载请保留本文地址：http://www.cnblogs.com/snser/p/5159126.html]
五、更多玩法 —— 支持xml配置
既然有了边框，那如果想配置边框的宽度和颜色该如何是好呢？
基本上两个思路：
1) 给ImageViewPlus加上set接口，设置完成之后通过 invalidate(); 重绘一下即可；
2) 在xml里就支持配置一些自定义属性，这样用起来会方便很多。
这里重点说一下支持xml配置自定义属性。
自定义控件要支持xml配置自定义属性的话，首先需要在 \res\values 里去定义属性：
1 <?xml version="1.0" encoding="utf-8"?> 2 <resources> 3 <attr name="borderColor" format="color" /> 4 <attr name="borderWidth" format="dimension" /> 5 6 <declare-styleable name="ImageViewPlus"> 7 <attr name="borderColor" /> 8 <attr name="borderWidth" /> 9 </declare-styleable> 10 </resources>
然后在ImageViewPlus的构造函数中去读取这些自定义属性：
1 private static final int DEFAULT_BORDER_COLOR = Color.TRANSPARENT;
2 private static final int DEFAULT_BORDER_WIDTH = 0;
3
4 public ImageViewPlus(Context context, AttributeSet attrs) {
5 super(context, attrs);
6 //取xml文件中设定的参数
7 TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ImageViewPlus);
8 mBorderColor = ta.getColor(R.styleable.ImageViewPlus_borderColor, DEFAULT_BORDER_COLOR);
9 mBorderWidth = ta.getDimensionPixelSize(R.styleable.ImageViewPlus_borderWidth, dip2px(DEFAULT_BORDER_WIDTH));
10 ta.recycle();
11 }
在xml布局中使用自定义属性：
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 xmlns:snser="http://schemas.android.com/apk/res/cc.snser.imageviewplus"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent"
6 android:background="@drawable/wallpaper"
7 android:orientation="vertical"
8 tools:context="${relativePackage}.${activityClass}" >
9
10 <cc.snser.imageviewplus.ImageViewPlus
11 android:id="@+id/imgplus"
12 android:layout_width="200dp"
13 android:layout_height="300dp"
14 android:layout_marginBottom="50dp"
15 android:layout_centerHorizontal="true"
16 android:layout_alignParentBottom="true"
17 android:src="@drawable/img_square"
18 snser:borderColor="#FF0080FF"
19 snser:borderWidth="15dp" />
20
21 </RelativeLayout>
[转载请保留本文地址：http://www.cnblogs.com/snser/p/5159126.html]
六、更多玩法 —— 圆角ImageView
搞定了圆形ImageView以及对应的边框，那如何实现下面这种圆角的ImageView呢？
其实原理上一样，把 canvas.drawCircle 对应改成 canvas.drawRoundRect 就OK了，直接贴代码吧：
1 public class ImageViewPlus extends ImageView{
2 /**
3 * android.widget.ImageView
4 */
5 public static final int TYPE_NONE = 0;
6 /**
7 * 圆形
8 */
9 public static final int TYPE_CIRCLE = 1;
10 /**
11 * 圆角矩形
12 */
13 public static final int TYPE_ROUNDED_RECT = 2;
14
15 private static final int DEFAULT_TYPE = TYPE_NONE;
16 private static final int DEFAULT_BORDER_COLOR = Color.TRANSPARENT;
17 private static final int DEFAULT_BORDER_WIDTH = 0;
18 private static final int DEFAULT_RECT_ROUND_RADIUS = 0;
19
20 private int mType;
21 private int mBorderColor;
22 private int mBorderWidth;
23 private int mRectRoundRadius;
24
25 private Paint mPaintBitmap = new Paint(Paint.ANTI_ALIAS_FLAG);
26 private Paint mPaintBorder = new Paint(Paint.ANTI_ALIAS_FLAG);
27
28 private RectF mRectBorder = new RectF();
29 private RectF mRectBitmap = new RectF();
30
31 private Bitmap mRawBitmap;
32 private BitmapShader mShader;
33 private Matrix mMatrix = new Matrix();
34
35 public ImageViewPlus(Context context, AttributeSet attrs) {
36 super(context, attrs);
37 //取xml文件中设定的参数
38 TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ImageViewPlus);
39 mType = ta.getInt(R.styleable.ImageViewPlus_type, DEFAULT_TYPE);
40 mBorderColor = ta.getColor(R.styleable.ImageViewPlus_borderColor, DEFAULT_BORDER_COLOR);
41 mBorderWidth = ta.getDimensionPixelSize(R.styleable.ImageViewPlus_borderWidth, dip2px(DEFAULT_BORDER_WIDTH));
42 mRectRoundRadius = ta.getDimensionPixelSize(R.styleable.ImageViewPlus_rectRoundRadius, dip2px(DEFAULT_RECT_ROUND_RADIUS));
43 ta.recycle();
44 }
45
46 @Override
47 protected void onDraw(Canvas canvas) {
48 Bitmap rawBitmap = getBitmap(getDrawable());
49
50 if (rawBitmap != null && mType != TYPE_NONE){
51 int viewWidth = getWidth();
52 int viewHeight = getHeight();
53 int viewMinSize = Math.min(viewWidth, viewHeight);
54 float dstWidth = mType == TYPE_CIRCLE ? viewMinSize : viewWidth;
55 float dstHeight = mType == TYPE_CIRCLE ? viewMinSize : viewHeight;
56 float halfBorderWidth = mBorderWidth / 2.0f;
57 float doubleBorderWidth = mBorderWidth * 2;
58
59 if (mShader == null || !rawBitmap.equals(mRawBitmap)){
60 mRawBitmap = rawBitmap;
61 mShader = new BitmapShader(mRawBitmap, TileMode.CLAMP, TileMode.CLAMP);
62 }
63 if (mShader != null){
64 mMatrix.setScale((dstWidth - doubleBorderWidth) / rawBitmap.getWidth(), (dstHeight - doubleBorderWidth) / rawBitmap.getHeight());
65 mShader.setLocalMatrix(mMatrix);
66 }
67
68 mPaintBitmap.setShader(mShader);
69 mPaintBorder.setStyle(Paint.Style.STROKE);
70 mPaintBorder.setStrokeWidth(mBorderWidth);
71 mPaintBorder.setColor(mBorderWidth > 0 ? mBorderColor : Color.TRANSPARENT);
72
73 if (mType == TYPE_CIRCLE){
74 float radius = viewMinSize / 2.0f;
75 canvas.drawCircle(radius, radius, radius - halfBorderWidth, mPaintBorder);
76 canvas.translate(mBorderWidth, mBorderWidth);
77 canvas.drawCircle(radius - mBorderWidth, radius - mBorderWidth, radius - mBorderWidth, mPaintBitmap);
78 } else if (mType == TYPE_ROUNDED_RECT){
79 mRectBorder.set(halfBorderWidth, halfBorderWidth, dstWidth - halfBorderWidth, dstHeight - halfBorderWidth);
80 mRectBitmap.set(0.0f, 0.0f, dstWidth - doubleBorderWidth, dstHeight - doubleBorderWidth);
81 float borderRadius = mRectRoundRadius - halfBorderWidth > 0.0f ? mRectRoundRadius - halfBorderWidth : 0.0f;
82 float bitmapRadius = mRectRoundRadius - mBorderWidth > 0.0f ? mRectRoundRadius - mBorderWidth : 0.0f;
83 canvas.drawRoundRect(mRectBorder, borderRadius, borderRadius, mPaintBorder);
84 canvas.translate(mBorderWidth, mBorderWidth);
85 canvas.drawRoundRect(mRectBitmap, bitmapRadius, bitmapRadius, mPaintBitmap);
86 }
87 } else {
88 super.onDraw(canvas);
89 }
90 }
91
92 private int dip2px(int dipVal)
93 {
94 float scale = getResources().getDisplayMetrics().density;
95 return (int)(dipVal * scale + 0.5f);
96 }
97
98 private Bitmap getBitmap(Drawable drawable){
99 if (drawable instanceof BitmapDrawable){
100 return ((BitmapDrawable)drawable).getBitmap();
101 } else if (drawable instanceof ColorDrawable){
102 Rect rect = drawable.getBounds();
103 int width = rect.right - rect.left;
104 int height = rect.bottom - rect.top;
105 int color = ((ColorDrawable)drawable).getColor();
106 Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
107 Canvas canvas = new Canvas(bitmap);
108 canvas.drawARGB(Color.alpha(color), Color.red(color), Color.green(color), Color.blue(color));
109 return bitmap;
110 } else {
111 return null;
112 }
113 }
114 }
1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 xmlns:snser="http://schemas.android.com/apk/res/cc.snser.imageviewplus"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent"
6 android:background="@drawable/wallpaper"
7 android:orientation="vertical"
8 tools:context="${relativePackage}.${activityClass}" >
9
10 <cc.snser.imageviewplus.ImageViewPlus
11 android:id="@+id/imgplus"
12 android:layout_width="200dp"
13 android:layout_height="300dp"
14 android:layout_marginBottom="50dp"
15 android:layout_centerHorizontal="true"
16 android:layout_alignParentBottom="true"
17 android:src="@drawable/img_rectangle"
18 snser:type="rounded_rect"
19 snser:borderColor="#FF0080FF"
20 snser:borderWidth="10dp"
21 snser:rectRoundRadius="30dp" />
22
23 </RelativeLayout>
1 <?xml version="1.0" encoding="utf-8"?> 2 <resources> 3 <attr name="type"> 4 <enum name="none" value="0" /> 5 <enum name="circle" value="1" /> 6 <enum name="rounded_rect" value="2" /> 7 </attr> 8 <attr name="borderColor" format="color" /> 9 <attr name="borderWidth" format="dimension" /> 10 <attr name="rectRoundRadius" format="dimension" /> 11 12 <declare-styleable name="ImageViewPlus"> 13 <attr name="type" /> 14 <attr name="borderColor" /> 15 <attr name="borderWidth" /> 16 <attr name="rectRoundRadius" /> 17 </declare-styleable> 18 </resources>
[转载请保留本文地址：http://www.cnblogs.com/snser/p/5159126.html]
七、Demo源码
保存下面的图片，扩展名改成zip后解压即可。
[转载自：http://www.cnblogs.com/snser/p/5159126.html]
Android中快速自定义圆形ImageView图形！相关推荐
- android 使用 系统字体,Android_解析Android中使用自定义字体的实现方法，1、Android系统默认支持三种字 - phpStudy...
解析Android中使用自定义字体的实现方法 1.Android系统默认支持三种字体,分别为:"sans", "serif", "monospace ...
- 如何在android中创建自定义对话框？
本文翻译自:How to create a Custom Dialog box in android? I want to create a custom dialog box like below ...
- Android 中的自定义 Snackbar
前言 Snackbars 在 Android 应用程序中很常见.几乎每个应用程序都使用 Snackbars 来显示有关应用程序中正在发生的事情的一些信息.您可以将 Snackbar 视为 Androi ...
- android设置主题的方法,Android_修改Android App样式风格的方法，android中可以自定义主题和风格 - phpStudy...
修改Android App样式风格的方法 android中可以自定义主题和风格.风格,也就是style,我们可以将一些统一的属性拿出来,比方说,长,宽,字体大小,字体颜色等等.可以在res/value ...
- 在Android中快速获取手机的高级权限
在Android中快速获取手机的高级权限 想要快速获取Android手机的ROOT权限吗?也许因为ROOT教程太复杂,也许因为不会进工程模式,让我们在使用Android手机时感觉像是开别人的车一样,总 ...
- android中设置页面边距,如何在android中使用代码在imageview上设置边距？
我想在运行时创建一个布局,然后我想在运行时使用循环添加一些imageview.但问题是我使用LayoutParams的余量根本无法工作.我尝试了很多,但没有找到任何解决方案.我也附加我的代码.如何在a ...
- 自定义圆形ImageView（仿QQ头像）
我们可以发现,现在的app对圆形图片的使用越来越普遍,特别是用户的头像等.圆形图片外观柔和.友好.饱满,能大大提升用户的视觉体验.所以今天我们就来看看怎样自定义圆形的ImageView(一些说明与应该 ...
- Android中的自定义View以及绘图工具
1.1自定义view的简介 为什么要使用自定义view 在Android开发中有很多业务场景,原生的控件是无法满足应用,并且经常也会遇到一个UI在多处 重复使用情况,那么就需要通过自定义View的方式 ...
- ios/Android工程：自定义圆形/扇形运动轨迹，cos\sin值的简单运用
ios/Android工程:利用cos\sin函数创建圆形轨迹 设备/引擎:Mac(11.6)/cocos 开发工具:Xcode(13.0) 开发需求:利用cos\sin函数创建圆形轨迹,并让元素按给 ...
最新文章
- 一个MySQL锁和面试官大战三十回合，我霸中霸！
- 格力入局的数控机床，掌握“核心科技”有多难？
- Python3--unitest框架的使用
- 阿里大数据分析与应用(part6)--数据大屏DataV
- 讲讲什么是帕累托最优
- 《算法导论》学习总结 — 21.第16章 贪心算法(1) 基础入门1
- MySQL 分页优化中的 “ INNER JOIN方式优化分页算法 ” 到底在什么情况下会生效？...
- 老李分享：HTTP协议之协议头
- Sending form data
- c#模拟看板控件_在Winform界面使用自定义用户控件及TabelPanel和StackPanel布局控件...
- iOS宏定义的黑魔法 - 宏菜鸟起飞手册
- 房产中介管理系统搭建
- K64 计算 UART波特率
- bugku ctf 多种方法解决 （在做题过程中你会得到一个二维码图片）
- upload-labs文件上传漏洞（Pass-01~Pass-21）
- W800/W801学习记录网络部分（一）：WIFI的扫描和连接
- 解决VMmare虚拟机安装过程没有权限问题
- 与Bosun一起监控
- Random（二）什么是伪共享？@sun.misc.Contended注解
- html css 中浮动影响与浮动问题的解决