Android自定义圆角ImageView 支持网络图片
jopen
8年前
先看下效果图
我们再来看一张CSDN的圆角图片
从布局可以看出csdn app 的头像也是圆角的Image，但可以看到，有明显的毛刺感，不知道是csdn 程序员的疏忽还是 我手机的问题，本人手机（小米note）。不知道其他的小伙伴显示效果也是这样。
好回到主题。其实实现圆角Image的方式有很多，今天所讲的是我认为比较简单的一种。首先我们需要了解Xfermode属性，什么意思呢？看一张图你就明白了
这是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设置不痛的模式，来实现不同的效果。需要注意的是，在上面代码中我做了图片的压缩和缩放操作，当我们有时在加载网络图片的时候，图片宽高往往是不确定的，所以这里的压缩和缩放处理，需要大家根据自己的业务需求进行相应的改动