自定义控件之 圆形 / 圆角 ImageView

一、问题在哪里？

问题来源于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 }

View Code