Glide入门教程（17）加载自定义大小图片

发表于 | 分类于 ， ， ， ， | 阅读次数
字数统计 | 阅读时长
从服务器请求特定尺寸的图片

为何请求特定尺寸图片

       我们在做的最新项目用到一个媒体服务器，提供非常高的分辨率图片服务（图片分辨率在6000x4500像素）。我们可以直接使用链接下载源文件，不过在考虑设备带宽、内存和电池的时候，这么做是相当低效的。即使在今天的设备上显示高分辨率，对于显示如此极端的分辨率，还是没有任何好处。因此Glide总是测量ImageView的尺寸，然后降低图片的内存消耗以匹配它。然而，无法避免要去下载和计算，完成降低图片大小的任务。因此，媒体服务器有一个新特性：它可以提供指定分辨率的图片。通过下面的方法实现：

1
2
3
4
5
6
// previous way: we directly accessed the images
https://futurestud.io/images/logo.png

// new way, server could handle additional parameter and provide the image in a specific size
// in this case, the server would serve the image in 400x300 pixel size
https://futurestud.io/images/logo.png?w=400&h=300

       媒体服务器在磁盘上保存了之前计算的大小，如果之前没有请求，可以在服务器上快速缩放图片。现在，Android这边的初始化实现了计算ImageView的大小，然后让Glide的请求带有链接URL (如 ../logo.png?w=400&h=300)，像之前介绍的一样。这样的方法可以解决问题，但是有点太复杂，特别是如果你认为Glide在这里可以提供帮助的话。

另一个自定义GlideModule

       我们会声明一个新的Glide module。在这个案例中，我们必须用Glide.register()方法向Glide注册一个新的模型：

1
2
3
4
5
6
7
8
9
public class CustomImageSizeGlideModule implements GlideModule {  
    @Override public void applyOptions(Context context, GlideBuilder builder) {
        // nothing to do here
    }

    @Override public void registerComponents(Context context, Glide glide) {
        glide.register(CustomImageSizeModel.class, InputStream.class, new CustomImageSizeModelFactory());
    }
}

       .register()设置Glide，实现针对CustomImageSizeModel接口的所有请求。所以这行可以创建并传递一个CustomImageSizeModel的实例到Glide。为了处理这个新的自定义模型，我们必须写一个CustomImageSizeModelFactory类，创建一个我们模型请求的实例。

       在完成上面的添加Glide module后，应该有两个类。第一个是CustomImageSizeModel：

1
2
3
public interface CustomImageSizeModel {  
    String requestCustomSizeUrl(int width, int height);
}

       CustomImageSizeModel只是一个接口，添加宽度和高度作为参数。这样，我们可以从媒体服务器请求精确像素的图片。另一个类是CustomImageSizeModelFactory：

1
2
3
4
5
6
7
8
9
10
11
private class CustomImageSizeModelFactory implements ModelLoaderFactory<CustomImageSizeModel, InputStream> {  
    @Override
    public ModelLoader<CustomImageSizeModel, InputStream> build(Context context, GenericLoaderFactory factories) {
        return new CustomImageSizeUrlLoader( context );
    }

    @Override
    public void teardown() {

    }
}

       这个类只是实现Glide的ModelLoaderFactory接口，它创建了CustomImageSizeUrlLoader的一个新实例，一但Glide请求被创建，将会去处理图片加载：

1
2
3
4
5
6
7
8
9
10
public class CustomImageSizeUrlLoader extends BaseGlideUrlLoader<CustomImageSizeModel> {  
    public CustomImageSizeUrlLoader(Context context) {
        super( context );
    }

    @Override
    protected String getUrl(CustomImageSizeModel model, int width, int height) {
        return model.requestCustomSizeUrl( width, height );
    }
}

       新的Glide module完成，并准备自定义大小请求。我们已经完成了Glide module的所有事情，但实际上还没有创建CustomImageSizeModel接口的实现。为了用CustomImageSizeModel传递请求到Glide，我们需要一个类，创建定制图片大小的URL:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
public class CustomImageSizeModelFutureStudio implements CustomImageSizeModel {  
    String baseImageUrl;

    public CustomImageSizeModelFutureStudio(String baseImageUrl) {
        this.baseImageUrl = baseImageUrl;
    }

    @Override
    public String requestCustomSizeUrl(int width, int height) {
        // previous way: we directly accessed the images
        // https://futurestud.io/images/logo.png

        // new way, server could handle additional parameter and provide the image in a specific size
        // in this case, the server would serve the image in 400x300 pixel size
        // https://futurestud.io/images/logo.png?w=400&h=300
        return baseImageUrl + "?w=" + width + "&h=" + height;
    }
}

       上面的CustomImageSizeModelFutureStudio类中，我们已经实现了根据添加的宽高参数创建图片URL的逻辑。最终，我们可以创建这个类的实例，并创建一个Glide请求：

1
2
3
4
5
6
7
String baseImageUrl = "https://futurestud.io/images/example.png";  
CustomImageSizeModel customImageRequest = new CustomImageSizeModelFutureStudio( baseImageUrl );

Glide  
        .with( context )
        .load( customImageRequest )
        .into( imageView2 );

       正如上面所见，你不需要传递准确的尺寸。Glide会测量ImageView并用我们的请求传递它。现在，服务器会用一个完美优化的图片作为响应。

       当然，你可以只添加额外的CustomImageSizeModel模型实现，如果有多个服务器，它们使用不同的逻辑创建URL。只要创建一个CustomImageSizeModel实现，并传递到你的Glide请求中。你想用多少model实现就可以用多少个。

参考资料：
签到钱就到 Glide入门教程——19.Glide Module 案例: 通过加载自定义大小图片优化

Fork me on GitHub