Android中快速自定义圆形ImageView图形！

最新推荐文章于 2024-02-06 16:09:54 发布

FynnJason

最新推荐文章于 2024-02-06 16:09:54 发布

阅读量2.1w

点赞数 12

分类专栏： Android核心文章标签： android AndroidStudio 自定义圆形自定义ImageView

Android核心专栏收录该内容

67 篇文章 1 订阅

订阅专栏

一、问题在哪里？

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

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

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

 
    
  
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效果沿边缘拉伸了。

　　所以，需要通过挪动坐标系的位置和调整圆心，才能把头像画在正确的区域（右图绿框）中。

[转载请保留本文地址：http://www.cnblogs.com/snser/p/5159126.html]

五、更多玩法 —— 支持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> 
    
  

[转载请保留本文地址：http://www.cnblogs.com/snser/p/5159126.html]

六、更多玩法 —— 圆角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>   
    
  

[转载请保留本文地址：http://www.cnblogs.com/snser/p/5159126.html]

七、Demo源码

保存下面的图片，扩展名改成zip后解压即可。

[转载自：http://www.cnblogs.com/snser/p/5159126.html]

FynnJason

关注

12
点赞
踩
33

收藏

觉得还不错? 一键收藏
9
评论
Android中快速自定义圆形ImageView图形！

一、问题在哪里？问题来源于app开发中一个很常见的场景——用户头像要展示成圆的：二、怎么搞？机智的我，第一想法就是，切一张中间圆形透明、四周与底色相同、尺寸与头像相同的蒙板图片，盖在头像上不就完事了嘛，哈哈哈！在背景纯色的前提下，这的确能简单解决问题，但是如果背景没有这么简单呢？在这种不规则背景下，有两个问题：1)　
复制链接

扫一扫