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秒的渐变动画

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

 


点此查看Android开发笔记的完整目录

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章