使用Glide的BitmapTransformation實現圓角邊框圖片

• 一、哪裡需要圓角邊框圖片
• 二、實現效果
• 三、實現原理
• 四、完整程式碼
• 五、下載地址

一、哪裡需要圓角邊框圖片

神馬筆記中有幾個地方需要圓角邊框圖片

1. 筆記/資料夾列表介面
2. 重新命名筆記介面
3. 移動筆記介面
4. ……

二、實現效果

圖示略小，大致可以看出是圓角，並且帶有邊框的圖片。

三、實現原理

Glide已經提供了圓角圖片的實現。應用RoundedCorners即可變換為圓角圖片。但是，支援圓角圖片顯得有些單調，並且無法與背景區分開發，新增邊框可以實現更好的效果。

既然RoundedCorners已經實現了圓角效果，我們只需要在RoundedCorners基礎上繪製邊框即可。

四、完整程式碼

採用拷貝程式碼的方式重用RoundedCorners。在RoundedCorners基礎上繪製邊框Drawable即可。

注：RoundedMask以內部類形式存在於RecordIconView中。RecordIconView為筆記/資料夾的專屬ImageView。

private static class RoundedMask extends BitmapTransformation {

    private static final String ID =
 
 RoundedMask.class.getName();
    private static final byte[] ID_BYTES = ID.getBytes(CHARSET);

    final GradientDrawable drawable;

    RoundedMask(GradientDrawable d) {
        this.drawable = d;
    }

    @Override
    protected Bitmap transform(
        @NonNull BitmapPool pool, @NonNull Bitmap toTransform,
 
 int outWidth, int outHeight) {

        Bitmap bitmap = TransformationUtils.roundedCorners(pool, toTransform, (int)drawable.getCornerRadius());

        Canvas canvas = new Canvas(bitmap);

        int width = bitmap.getWidth();
        int height = bitmap.getHeight();

        drawable.setBounds(0, 0, width, height);
        drawable.draw(canvas);

        canvas.setBitmap(null);
        return bitmap;
    }

    @Override
    public int hashCode() {
        return Util.hashCode(ID.hashCode(), drawable.hashCode());
    }

    @Override
    public void updateDiskCacheKey(@NonNull MessageDigest messageDigest) {
        messageDigest.update(ID_BYTES);

        {
            byte[] radiusData = ByteBuffer.allocate(4).putInt(drawable.hashCode()).array();
            messageDigest.update(radiusData);
        }

    }
}

五、下載地址

神馬筆記最新版本：【whatsnote_lastest.apk】