文章出處

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

本文使用小書匠編寫。

文章列表