使用Glide的BitmapTransformation实现圆角边框图片

使用Glide的BitmapTransformation实现圆角边框图片

一、哪里需要圆角边框图片

神马笔记中有几个地方需要圆角边框图片

  1. 笔记/文件夹列表界面
  2. 重新命名笔记界面
  3. 移动笔记界面
  4. ……

二、实现效果

图标略小,大致可以看出是圆角,并且带有边框的图片。

三、实现原理

Glide已经提供了圆角图片的实现。应用RoundedCorners即可变换为圆角图片。但是,支持圆角图片显得有些单调,并且无法与背景区分开发,添加边框可以实现更好的效果。

既然RoundedCorners已经实现了圆角效果,我们只需要在RoundedCorners基础上绘制边框即可。

四、完整代码

采用拷贝代码的方式重用RoundedCorners。在RoundedCorners基础上绘制边框Drawable即可。

注:RoundedMask以内部类形式存在于RecordIconView中。RecordIconView为笔记/文件夹的专属ImageView。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
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