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

时间：2021-07-03 20:34:40

         先看下效果图

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


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

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

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

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

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

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

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

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

         



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 

<?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设置不痛的模式，来实现不同的效果。需要注意的是，在上面代码中我做了图片的压缩和缩放操作，当我们有时在加载网络图片的时候，图片宽高往往是不确定的，所以这里的压缩和缩放处理，需要大家根据自己的业务需求进行相应的改动

                



标签：

相关文章