圆角矩形图片

---

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即可。

本文使用小书匠编写。