Glide Module 案例: 通过加载自定义大小图片优化

原文：Glide Module Example: Optimizing By Loading Images In Custom Sizes
作者：Norman Peitek
翻译：Dexter0218

在过去的几篇文章中，我们已经看了大量使用Glide module自定义Glide的内容。今天我们要展示最后一个例子，可能是最有趣的一个：如何从你的服务器请求特定尺寸的图片。

Glide 系列概览

1. 入门简介
2. 高级加载
3. 适配器(ListView, GridView)
4. 占位图& 淡入淡出动画
5. 图片大小 & 缩放
6. 播放GIF & 视频
7. 缓存基础
8. 请求优先级
9. 缩略图
10. 回调：定制view中使用SimpleTarget和ViewTarget
11. 通知栏和桌面小控件的图片加载
12. 异常: 调试和报错处理
13. 自定义变换
14. 用animate()定制动画
15. 整合网络协议栈
16. 用Modules定制Glide
17. Glide Module 案例: 接受自签名HTTPS证书
18. Glide Module 案例: 自定义缓存
19. Glide Module 案例: 通过加载自定义大小图片优化
20. 动态使用 Model Loaders
21. 如何旋转图片
22. 系列综述

---

为何请求特定尺寸图片

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

// 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注册一个新的模型：

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类，创建一个我们模型请求的handler的实例。

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

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

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

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请求被创建，将会去处理图片加载：

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:

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请求：

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让Android侧非常简单。初始化的步骤有点复杂，但是一但理解了概念，是非常有用的。

本文展示给你的方法：会用到在每个单独请求上。如果你在图像的URL上混合使用，哪个可以调整大小和图像的URL，不能调整？下期，我们将告诉你在一个请求上如何动态地应用相同的思想。