圆角矩形图片
title: 2016-5-2
前言
从网络加载的图片是矩形的，而且大小不限，为了让图片显示为四个角显示为1/4圆这样的圆角矩形，有多种方法。
- 通过UI资源实现 可以让美术切一个九宫格四角遮盖，中间透明的图片，使用一个View覆盖在要加载显示的ImageView之上。
- 通过代码 思路是对加载后的Bitmap进行裁剪。因为项目中使用的是Android-Universal-Image-Loader库，本身具有对图片的圆角显示功能，下面就看下里面的实现。
RoundedBitmapDisplayer
这个类实现了对Bitmap的四个角的圆角化处理。 它实现了接口BitmapDisplayer，在调用方法displayImage(String uri, ImageView imageView, DisplayImageOptions options)时，我们指定的DisplayImageOptions对象可以通过DisplayImageOptions.displayer(BitmapDisplayer displayer)方法来为图片的加载显示设置一个BitmapDisplayer——它用来改变要显示的图片或为图片显示添加动画。
RoundedBitmapDisplayer代码比较少，直接列出：
public class RoundedBitmapDisplayer implements BitmapDisplayer {
protected final int cornerRadius;
protected final int margin;
public RoundedBitmapDisplayer(int cornerRadiusPixels) {
this(cornerRadiusPixels, 0);
}
public RoundedBitmapDisplayer(int cornerRadiusPixels, int marginPixels) {
this.cornerRadius = cornerRadiusPixels;
this.margin = marginPixels;
}
@Override
public void display(Bitmap bitmap, ImageAware imageAware, LoadedFrom loadedFrom) {
if (!(imageAware instanceof ImageViewAware)) {
throw new IllegalArgumentException("ImageAware should wrap ImageView. ImageViewAware is expected.");
}
imageAware.setImageDrawable(new RoundedDrawable(bitmap, cornerRadius, margin));
}
public static class RoundedDrawable extends Drawable {
protected final float cornerRadius;
protected final int margin;
protected final RectF mRect = new RectF(),
mBitmapRect;
protected final BitmapShader bitmapShader;
protected final Paint paint;
public RoundedDrawable(Bitmap bitmap, int cornerRadius, int margin) {
this.cornerRadius = cornerRadius;
this.margin = margin;
bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mBitmapRect = new RectF (margin, margin, bitmap.getWidth() - margin, bitmap.getHeight() - margin);
paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(bitmapShader);
paint.setFilterBitmap(true);
paint.setDither(true);
}
@Override
protected void onBoundsChange(Rect bounds) {
super.onBoundsChange(bounds);
mRect.set(margin, margin, bounds.width() - margin, bounds.height() - margin);
// Resize the original bitmap to fit the new bound
Matrix shaderMatrix = new Matrix();
shaderMatrix.setRectToRect(mBitmapRect, mRect, Matrix.ScaleToFit.FILL);
bitmapShader.setLocalMatrix(shaderMatrix);
}
@Override
public void draw(Canvas canvas) {
canvas.drawRoundRect(mRect, cornerRadius, cornerRadius, paint);
}
@Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
@Override
public void setAlpha(int alpha) {
paint.setAlpha(alpha);
}
@Override
public void setColorFilter(ColorFilter cf) {
paint.setColorFilter(cf);
}
}
}可以看到，RoundedBitmapDisplayerb本身只是封装了圆角矩形的圆角半径和外边距属性。它使用基于原图片的Bitmap生成的Drawable 的子类来完成圆角显示的功能。
RoundedDrawable
作为Drawable的子类，首先关心下它的draw方法： canvas.drawRoundRect(mRect, cornerRadius, cornerRadius, paint); mRect是最终整个Drawable的显示区域，在onBoundsChange中对它进行了设置： mRect.set(margin, margin, bounds.width() - margin, bounds.height() - margin);
Canvas.drawRoundRect方法用来为一个矩形区域画上指定半径的四个角:
/**
* Draw the specified round-rect using the specified paint. The roundrect
* will be filled or framed based on the Style in the paint.
*
* @param rect The rectangular bounds of the roundRect to be drawn
* @param rx The x-radius of the oval used to round the corners
* @param ry The y-radius of the oval used to round the corners
* @param paint The paint used to draw the roundRect
*/
public void drawRoundRect(RectF rect, float rx, float ry, Paint paint)mBitmapRect存放原始图片的显示区域，在onBoundsChange中需要使用它来完成图片的缩放，填充最终的显示区域。
使用中的一些问题
如果布局中，ImageView的宽高指定为wrap_content那么在显示的时候可能导致图片的显示区域判定错误。比如，宽度设置为match_parent，高度为wrap_content，scaleType为centerCrop时，图片最终会显示为一条横线。 在调用displayImage时可以指定ImageLoadingListener，重载方法 void onLoadingComplete(String imageUri, View view, Bitmap loadedImage) 在里面根据显示逻辑获得并指定对应ImageView的宽高，之后将loadedImage设置给ImageView即可。
本文使用小书匠编写。