Android自定义圆角ImageView 支持网络图片

先看下效果图

我们再来看一张CSDN的圆角图片

从布局可以看出csdn app 的头像也是圆角的Image，但可以看到，有明显的毛刺感，不知道是csdn 程序员的疏忽还是我手机的问题，本人手机（小米note）。不知道其他的小伙伴显示效果也是这样。

好回到主题。其实实现圆角Image的方式有很多，今天所讲的是我认为比较简单的一种。首先我们需要了解Xfermode属性，什么意思呢？看一张图你就明白了

这是Xfermode属性的几种模式和效果，简单说明一下

Src和Dst分别是一张矩形和原型图片，当我们设置不同的模式，显示的效果就如上图所示。关于Xfermode这里不过多阐述，免得把大家绕晕了，我们这里只需要关注其中的SrcIn模式，可以看到这个模式取的是两张图片的交集部分。这就好办了，我们通常拿到img图片都是矩形，我们可以利用canvas画一个圆，然后利用SrcIn属性，取img和圆的交集，那么圆角ImageView是不是就轻易实现了呢？

这里先理一下思路，1、自定义两个属性来设置圆角的弧度，以及当前是否画纯圆。2、设置Xfermode属性为SrcIn 。就这简单两步圆角ImageView就实现了，接下来直接上代码。

[java]view plain copy 
    
 import wu.han.himan_library.R;  
 import android.content.Context;  
 import android.content.res.TypedArray;  
 import android.graphics.Bitmap;  
 import android.graphics.Bitmap.Config;  
 import android.graphics.BitmapFactory;  
 import android.graphics.Canvas;  
 import android.graphics.Matrix;  
 import android.graphics.Paint;  
 import android.graphics.PorterDuff;  
 import android.graphics.PorterDuffXfermode;  
 import android.graphics.RectF;  
 import android.graphics.drawable.BitmapDrawable;  
 import android.graphics.drawable.Drawable;  
 import android.util.AttributeSet;  
 import android.widget.ImageView;  
   
 /** 
  *  
  * @author Mr.Himan 
  * @version 1.0<br> 
  *          2015年12月16日 09:28:25<br> 
  *          图片圆角实现 
  *  
  */  
 public class CustomImageView extends ImageView {  
     private Paint paint;  
     private Paint paintBorder;  
     private Bitmap mSrcBitmap;  
     /** 
      * 圆角的弧度 
      */  
     private float mRadius;  
     private boolean mIsCircle;  
   
     public CustomImageView(final Context context) {  
         this(context, null);  
     }  
   
     public CustomImageView(Context context, AttributeSet attrs) {  
         this(context, attrs, R.attr.customImageViewStyle);  
     }  
   
     public CustomImageView(Context context, AttributeSet attrs, int defStyle) {  
         super(context, attrs, defStyle);  
         TypedArray ta = context.obtainStyledAttributes(attrs,  
                 R.styleable.CustomImageView, defStyle, 0);  
         mRadius = ta.getDimension(R.styleable.CustomImageView_radius, 0);  
         mIsCircle = ta.getBoolean(R.styleable.CustomImageView_circle, false);  
         int srcResource = attrs.getAttributeResourceValue(  
                 "http://schemas.android.com/apk/res/android", "src", 0);  
         if (srcResource != 0)  
             mSrcBitmap = BitmapFactory.decodeResource(getResources(),  
                     srcResource);  
         ta.recycle();  
         paint = new Paint();  
         paint.setAntiAlias(true);  
         paintBorder = new Paint();  
         paintBorder.setAntiAlias(true);  
     }  
   
     @Override  
     public void onDraw(Canvas canvas) {  
         int width = canvas.getWidth() - getPaddingLeft() - getPaddingRight();  
         int height = canvas.getHeight() - getPaddingTop() - getPaddingBottom();  
         Bitmap image = drawableToBitmap(getDrawable());  
         if (mIsCircle) {  
             Bitmap reSizeImage = reSizeImageC(image, width, height);  
             canvas.drawBitmap(createCircleImage(reSizeImage, width, height),  
                     getPaddingLeft(), getPaddingTop(), null);  
   
         } else {  
   
             Bitmap reSizeImage = reSizeImage(image, width, height);  
             canvas.drawBitmap(createRoundImage(reSizeImage, width, height),  
                     getPaddingLeft(), getPaddingTop(), null);  
         }  
     }  
   
     /** 
      * 画圆角 
      *  
      * @param source 
      * @param width 
      * @param height 
      * @return 
      */  
     private Bitmap createRoundImage(Bitmap source, int width, int height) {  
         Paint paint = new Paint();  
         paint.setAntiAlias(true);  
         Bitmap target = Bitmap.createBitmap(width, height, Config.ARGB_8888);  
         Canvas canvas = new Canvas(target);  
         RectF rect = new RectF(0, 0, width, height);  
         canvas.drawRoundRect(rect, mRadius, mRadius, paint);  
         // 核心代码取两个图片的交集部分  
         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
         canvas.drawBitmap(source, 0, 0, paint);  
         return target;  
     }  
   
     /** 
      * 画圆 
      *  
      * @param source 
      * @param width 
      * @param height 
      * @return 
      */  
     private Bitmap createCircleImage(Bitmap source, int width, int height) {  
   
         Paint paint = new Paint();  
         paint.setAntiAlias(true);  
         Bitmap target = Bitmap.createBitmap(width, height, Config.ARGB_8888);  
         Canvas canvas = new Canvas(target);  
         canvas.drawCircle(width / 2, height / 2, Math.min(width, height) / 2,  
                 paint);  
         // 核心代码取两个图片的交集部分  
         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));  
         canvas.drawBitmap(source, (width - source.getWidth()) / 2,  
                 (height - source.getHeight()) / 2, paint);  
         return target;  
   
     }  
   
     @Override  
     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
         int width = MeasureSpec.getSize(widthMeasureSpec);  
         int height = MeasureSpec.getSize(heightMeasureSpec);  
         setMeasuredDimension(width, height);  
     }  
   
     /** 
      * drawable转bitmap 
      *  
      * @param drawable 
      * @return 
      */  
     private Bitmap drawableToBitmap(Drawable drawable) {  
         if (drawable == null) {  
             if (mSrcBitmap != null) {  
                 return mSrcBitmap;  
             } else {  
                 return null;  
             }  
         } else if (drawable instanceof BitmapDrawable) {  
             return ((BitmapDrawable) drawable).getBitmap();  
         }  
         Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),  
                 drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);  
         Canvas canvas = new Canvas(bitmap);  
         drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());  
         drawable.draw(canvas);  
         return bitmap;  
     }  
   
     /** 
      * 重设Bitmap的宽高 
      *  
      * @param bitmap 
      * @param newWidth 
      * @param newHeight 
      * @return 
      */  
     private Bitmap reSizeImage(Bitmap bitmap, int newWidth, int newHeight) {  
         int width = bitmap.getWidth();  
         int height = bitmap.getHeight();  
         // 计算出缩放比  
         float scaleWidth = ((float) newWidth) / width;  
         float scaleHeight = ((float) newHeight) / height;  
         // 矩阵缩放bitmap  
         Matrix matrix = new Matrix();  
   
         matrix.postScale(scaleWidth, scaleHeight);  
         return Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);  
     }  
   
     /** 
      * 重设Bitmap的宽高 
      *  
      * @param bitmap 
      * @param newWidth 
      * @param newHeight 
      * @return 
      */  
     private Bitmap reSizeImageC(Bitmap bitmap, int newWidth, int newHeight) {  
         int width = bitmap.getWidth();  
         int height = bitmap.getHeight();  
         int x = (newWidth - width) / 2;  
         int y = (newHeight - height) / 2;  
         if (x > 0 && y > 0) {  
             return Bitmap.createBitmap(bitmap, 0, 0, width, height, null, true);  
         }  
   
         float scale = 1;  
   
         if (width > height) {  
             // 按照宽度进行等比缩放  
             scale = ((float) newWidth) / width;  
   
         } else {  
             // 按照高度进行等比缩放  
             // 计算出缩放比  
             scale = ((float) newHeight) / height;  
         }  
         Matrix matrix = new Matrix();  
         matrix.postScale(scale, scale);  
         return Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);  
     }  
 }  

attr.xml

[html]view plain copy 
    
 <?xml version="1.0" encoding="utf-8"?>  
 <resources>  
   
     <declare-styleable name="Theme">  
         <attr name="customImageViewStyle" format="reference" />  
     </declare-styleable>  
     <!-- 自定义圆角ImageView -->  
     <declare-styleable name="CustomImageView">  
         <attr name="circle" format="boolean" />  
         <attr name="radius" format="dimension" />  
     </declare-styleable>  
   
 </resources>  

到这里圆角ImageView就实现了，代码比较简单，同样的我们可以根据Xfermode设置不痛的模式，来实现不同的效果。需要注意的是，在上面代码中我做了图片的压缩和缩放操作，当我们有时在加载网络图片的时候，图片宽高往往是不确定的，所以这里的压缩和缩放处理，需要大家根据自己的业务需求进行相应的改动

Android自定义圆角ImageView 支持网络图片

猜你喜欢