Glide入门教程（11）自定义变换

发表于 | 分类于 ， ， ， ， | 阅读次数
字数统计 | 阅读时长
自定义变换

变换

       在图片显示出之前可以对图片进行变换处理。例如，如果你的app需要显示一张灰度图，但只能获取到一个原始全色彩的版本，你可以使用一个变换将图片从有明艳色彩的版本转换成黑白版。变换不仅限于颜色。你可以改变图片的很多属性：大小、边框、色彩、像素点等等。在之前介绍用Glide调整图片大小时，已经介绍了自带的两个变换fitCenter和 centerCrop。这两个方案都有一个显著的特征，它们有自己的Glide转换方法，所以这篇文章不再介绍了。

实现你自己的变换

       为了实现自定义的变换，需要创建一个新的类去实现变换接口。这个方法需要实现的内容还是相当复杂的，你需要深入探索Glide的内部结构才能让其工作好。如果只是想要常规的图片（不包括Gif和视频）变换，我们建议只要处理抽象的BitmapTransformation类。它简化了相当多的实现，能覆盖95%的使用范围。

       先看一下BitmapTransformation实现的一个例子。我们的框架必须继承BitmapTransformation类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
public class BlurTransformation extends BitmapTransformation {

    public BlurTransformation(Context context) {
        super( context );
    }

    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return null; // todo
    }

    @Override
    public String getId() {
        return null; // todo
    }
}

       我们借助Renderscript来实现图片的模糊处理。

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
46
public class BlurTransformation extends BitmapTransformation {

    private RenderScript rs;

    public BlurTransformation(Context context) {
        super( context );

        rs = RenderScript.create( context );
    }

    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        Bitmap blurredBitmap = toTransform.copy( Bitmap.Config.ARGB_8888, true );

        // Allocate memory for Renderscript to work with
        Allocation input = Allocation.createFromBitmap(
            rs,
            blurredBitmap,
            Allocation.MipmapControl.MIPMAP_FULL,
            Allocation.USAGE_SHARED
        );
        Allocation output = Allocation.createTyped(rs, input.getType());

        // Load up an instance of the specific script that we want to use.
        ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
        script.setInput(input);

        // Set the blur radius
        script.setRadius(10);

        // Start the ScriptIntrinisicBlur
        script.forEach(output);

        // Copy the output to the blurred bitmap
        output.copyTo(blurredBitmap);

        toTransform.recycle();

        return blurredBitmap;
    }

    @Override
    public String getId() {
        return "blur";
    }
}

       getId()方法为这个变换描述了一个独有的识别。Glide使用那个关键字作为缓存系统的一部分。防止出现异常问题，确保其唯一。

应用一个简单的变换

       Glide有两个不同的方式进行变换。第一个是传递一个你的类的实例作为.transform()的参数。不管是图片还是gif，都可以进行变换（经测试，如果是gif，模糊后有很大几率不显示动画，用Glide加载Gif本来就有存在动画不播放的问题）。另一个则是使用.bitmapTransform()，它只接受bitmap的变换。由于我们的实现都是基于bitmap，我们可以使用第一个：

1
2
3
4
5
6
Glide  
    .with( context )
    .load( eatFoodyImages[0] )
    .transform( new BlurTransformation( context ) )
    //.bitmapTransform( new BlurTransformation( context ) ) // this would work too!
    .into( imageView1 );

       这可以让Glide从网络下载的图片自动实现模糊算法，是很有用的。

实现多重变换

       通常，Glide的流接口（fluent interface）允许方法被连接在一起，然而变换并不是这样的。确保你只调用.transform()或者.bitmapTransform()一次，不然，之前的设置将会被覆盖。然而你可以通过传递多个转换对象当作参数到.transform()（或者.bitmapTransform()）中来进行多重变换：

1
2
3
4
5
Glide  
    .with( context )
    .load( eatFoodyImages[1] )
    .transform( new GreyscaleTransformation( context ), new BlurTransformation( context ) )
    .into( imageView2 );

       在这段代码中，我们先对图片进行了灰度变换，然后模糊处理。Glide会为你自动进行两个转换。

       提示：当你使用变换的时候，你不能使用.centerCrop()或者.fitCenter()。

Glide的变换集合

       Glide-transformations,它提供了许多变换的集合。值得去看一下你的idea是否已经被实现了。

       这个库有2个不同版本。扩展库包括更多的变换，并且是用手机的GPU进行计算。需要一个额外的依赖，所以这两个版本的设置有点不一样。看看支持变换的列表，再决定需要用哪个版本。

Glide变换的设置

       设置是很简单的，对于基本版，可以在你的build.gradle里加一行：

1
2
3
dependencies {  
    compile 'jp.wasabeef:glide-transformations:2.0.0'
}

       如果你想要使用GPU变换：

1
2
3
4
5
6
7
8
9
10
repositories {  
    jcenter()
    mavenCentral() // GPUImage for Android
}

dependencies {  
    compile 'jp.wasabeef:glide-transformations:2.0.0'
    // If you want to use the GPU Filters
    compile 'jp.co.cyberagent.android.gpuimage:gpuimage-library:1.3.0'
}

Glide变换的使用

       在你同步了Android Studio的builde.gradle文件后，你已经可以进行使用变换集合了。使用方式与使用自定义变换一样。假如我们要用glide变换集合去模糊图片：

1
2
3
4
5
Glide  
    .with( context )
    .load( eatFoodyImages[2] )
    .bitmapTransform( new jp.wasabeef.glide.transformations.BlurTransformation( context, 25 ) )
    .into( imageView3 );

       你也可以像上面一样应用一组变换。一个单独的变换或者一组变换，.bitmapTransform()都可以接受。

变换集合列表

Crop

1
CropTransformation, CropCircleTransformation, CropSquareTransformation, RoundedCornersTransformation

Color

1
ColorFilterTransformation, GrayscaleTransformation

Blur

1
BlurTransformation

Mask

1
MaskTransformation

GPU Filter (use GPUImage)

       Will require add dependencies for GPUImage.

1
2
3
ToonFilterTransformation, SepiaFilterTransformation, ContrastFilterTransformation
InvertFilterTransformation, PixelationFilterTransformation, SketchFilterTransformation
SwirlFilterTransformation, BrightnessFilterTransformation, KuwaharaFilterTransformation VignetteFilterTransformation

参考资料：
签到钱就到 Glide入门教程——13.自定义变换
wasabeef glide-transformations

Fork me on GitHub