Android开发笔记（一百七十一）使用Glide加载网络图片

如何方便而又快速地显示网络图片，一直是安卓网络编程的热门课题，前些年图片缓存框架Picasso、Fresco等等大行其道，以至于谷歌按捺不住也开发了自己的Glide开源库。由于Android本身就是谷歌开发的，Glide与Android系出同门，因此Glide成为事实上的官方推荐图片缓存框架。不过Glide并未集成到Android的SDK当中，开发者需要另外给App工程导入Glide库，也就是修改模块的build.gradle，在dependencies节点内部添加如下一行依赖库配置：

    implementation 'com.github.bumptech.glide:glide:4.11.0'

导包完成之后，即可在代码中正常使用Glide。当然Glide的用法确实简单，默认情况只要以下这行代码就够了：

        Glide.with(活动实例).load(网址字符串).into(图像视图);

可见Glide的图片加载代码至少需要三个参数，说明如下： 1、当前页面的活动实例，参数类型为Activity。如果是在页面代码内部调用，则填写this表示当前活动即可。 2、网络图片的链接地址，以http或者https打头，参数类型为字符串。 3、准备显示网络图片的图像视图实例，参数类型为ImageView。 假设在Activity内部调用Glide，且图片链接放在mImageUrl，演示的图像视图名叫iv_network，那么实际的Glide加载代码是下面这样的：

        Glide.with(this).load(mImageUrl).into(iv_network);

如果不指定图像视图的拉伸类型，Glide默认采用FIT_CENTER方式显示图片，相当于在load方法和into方法中间增加调用fitCenter方法，就像如下代码这般：

        // 显示方式为容纳居中fitCenter
        Glide.with(this).load(mImageUrl).fitCenter().into(iv_network);

除了fitCenter方法，Glide还提供了centerCrop方法对应CENTER_CROP，提供了centerInside方法对应CENTER_INSIDE，其中增加centerCrop方法的加载代码如下所示：

        // 显示方式为居中剪裁centerCrop
        Glide.with(this).load(mImageUrl).centerCrop().into(iv_network);

增加centerInside方法的加载代码如下所示：

        // 显示方式为居中入内centerInside
        Glide.with(this).load(mImageUrl).centerInside().into(iv_network);

另外，Glide还支持圆形剪裁，即只显示图片中央的圆形区域，此时方法调用改成了circleCrop，具体代码示例如下：

        // 显示方式为圆形剪裁circleCrop
        Glide.with(this).load(mImageUrl).circleCrop().into(iv_network);

以上四种显示方式的界面效果分别如下列四图所示。

虽然Glide支持上述四种显示类型，但它无法设定FIT_XY对应的平铺方式，若想让图片平铺至充满整个图像视图，还得调用图像视图的setScaleType方法，将拉伸类型设置为ImageView.ScaleType.FIT_XY。 一旦把图像视图的拉伸类型改为FIT_XY，则之前的四种显示方式也将呈现不一样的景象，拉伸类型变更后的界面分别如下列四图所示。

图片缓存框架之所以高效，是因为它不但封装了访问网络的步骤，而且引入了三级缓存机制。具体说来，是先到内存中查找图片，有找到就直接显示内存图片，没找到的话再去磁盘查找图片；在磁盘能找到就直接显示磁盘图片，没找到的话再去请求网络；如此便形成“内存→磁盘→网络”的三级缓存。 对于Glide而言，默认已经开启了三级缓存机制，当然也可以根据实际情况另行调整。除此之外，Glide还提供了一些个性化的功能，方便开发者定制不同场景的需求。具体到编码上，则需想办法将个性化选项告知Glide，比如下面这句图片加载代码：

        Glide.with(this).load(mImageUrl).into(iv_network);

可以拆分为以下两行代码：

        // 构建一个加载网络图片的建造器
        RequestBuilder<Drawable> builder = Glide.with(this).load(mImageUrl);
        builder.into(iv_network); // 在图像视图上展示网络图片

原来load方法返回的是请求建造器，调用建造器对象的into方法，方能在图像视图上展示网络图片。除了into方法，建造器RequestBuilder还提供了apply方法，该方法表示启用指定的请求选项。于是添加了请求选项的完整代码示例如下：

        // 构建一个加载网络图片的建造器
        RequestBuilder<Drawable> builder = Glide.with(this).load(mImageUrl);
        RequestOptions options = new RequestOptions(); // 创建glide的请求选项
        // 在图像视图上展示网络图片。apply方法表示启用指定的请求选项
        builder.apply(options).into(iv_network);

可见请求选项为RequestOptions类型，详细的选项参数就交给它的下列方法了： placeholder：设置加载开始的占位图。在得到网络图片之前，会先在图像视图展现占位图。 error：设置发生错误的提示图。网络图片获取失败之时，会在图像视图展现提示图。 override：设置图片的尺寸。注意该方法有多个重载方法，倘若调用只有一个参数的方法并设置Target.SIZE_ORIGINAL，表示展示原始图片；倘若调用拥有两个参数的方法，表示先将图片缩放到指定的宽度和高度，再展示缩放后的图片。 diskCacheStrategy：设置指定的缓存策略。 skipMemoryCache：设置是否跳过内存缓存（但不影响硬盘缓存）。为true表示跳过，为false表示不跳过。 disallowHardwareConfig：关闭硬件加速，防止过大尺寸的图片加载报错。 fitCenter：保持图片的宽高比例并居中显示，图片需要顶到某个方向的边界但不能越过边界，对应拉伸类型FIT_CENTER。 centerCrop：保持图片的宽高比例，充满整个图像视图，剪裁之后居中显示，对应拉伸类型CENTER_CROP。 centerInside：保持图片的宽高比例，在图像视图内部居中显示，图片只能拉小不能拉大，对应拉伸类型CENTER_INSIDE。 circleCrop：展示圆形剪裁后的图片。 另外，Glide允许播放加载过程的渐变动画，让图片从迷雾中逐渐变得清晰，有助于提高用户体验。这个渐变动画通过建造器的transition方法设置，调用代码例子如下所示：

        builder.transition(DrawableTransitionOptions.withCrossFade(3000)); // 设置时长3秒的渐变动画

加载网络图片的渐变过程效果如下面两图所示。