使用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】