Glide4.9图片框架(一)之加载图片的常规使用方式

从接触应用层开发开始,图片相关的功能一直都是Android开发人员比较关注的问题,从最开始的ImageLoader,到Square公司开发的Picasso图片加载框架,再到如今的主流图片加载框架Glide,其实我们都知道这几个图片框架的核心都离不开缓存,内存缓存和磁盘缓存,两者结合极大程度的提高了图片的加载效率。但是我们从框架中学到远不止这些,接下来我会分几篇来分析下Glide框架到底为何能成为主流的图片加载框架呢,首先看看它的一些常用的使用方式。

基本使用

本次我们使用glide4.9.0版本来讲述功能和代码,首先需要在gradle中配置:

repositories {
  mavenCentral()
  maven { url 'https://maven.google.com' }
}

dependencies {
  implementation 'com.github.bumptech.glide:glide:4.9.0'
  annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'
}

不要忘记了添加权限~

  <uses-permission android:name="android.permission.INTERNET"/>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

混淆文件:

-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}
# target API 低于 Android API 27
-dontwarn com.bumptech.glide.load.resource.bitmap.VideoDecoder
# for DexGuard only
-keepresourcexmlelements manifest/application/meta-data@value=GlideModule

常规加载图片

Glide.with(this)
  .load(imgUrl)
  .into(imageView);

绝大多数加载图片的功能都能用上面一行代码解决,除了部分需要特定场景的需求,则需要用到Glide的其他功能,我们来看下加载的效果图

加载图片.gif

加载占位图

Glide官方提供的占位图有三种,分别是Placeholder,Error,FallBack。

  • Placeholder主要用于当前我们加载的图片还未成功显示的时候作为当前图片的临时显示,如果请求图片一直没有成功,并且没有设置Error和FallBack占位图,那么Placeholder占位图则会一直显示。
  • Error则是用于当我们的图片加载失败了会显示,当没有设置FallBack的时候,那么Error占位图则会一直显示。
  • FallBack则是表示如果所加载的图片文件或者URL为空,那么这个时候加载的就是FallBack占位图,相当于是view加载没有获取到图片的url时候加载的默认图。

Placeholder占位图的使用

Glide.with(this)
  .load(url)
  .placeholder(new ColorDrawable(Color.GREEN))
  .into(view);

这里我们给Placeholder设置本地drawable资源和设置背景色都行,为了省时间我设置的背景色,我们来看看添加背景色占位图后的效果,这里为了能够清晰的看出效果,选择了比较明亮的原谅色,正常的开发中使用较多的还是灰白色的占位图。


Animation_palceholder.gif

Error占位图的使用

Glide.with(this)
  .load(url)
  .error(new ColorDrawable(Color.RED))
  .into(view);

这里给Error设置的红色,功能和Placeholder一样,我关闭了网络请求权限,显示的则是一直请求出错的占位图。

Animation_error.gif

FallBack占位图的使用

Glide.with(this)
  .load(url)
  .fallback(new ColorDrawable(Color.BLUE))
  .into(view);

RequestOptions

通常情况下,一般的链式调用能满足我们的需求,但是glide也提供了这样的功能,当我们加载多个img时,必定需要多次去使用glide和设置加载的选项,那么如果这些选项存在公共的设置,应该可以提取出来,那么这是options的作用了,单独提取出来也使代码更简洁,我们来看看使用方式:

RequestOptions requestOptions = new RequestOptions()
                .error(new ColorDrawable(Color.RED))
                .centerCrop();

Glide.with(this)
  .load(url)
   .apply(requestOptions)
  .into(view);

TransitionOptions

TransitionOptions一般用于当图片加载完成后,如果设置了占位图,那么是获取到的图片替换掉占位图的一个过度动画,例如淡入淡出,羡慕就尝试使用淡入的效果设置加载完成后TransitionOptions的设置;看运行结果和Placeholder占位图的绿色背景比较,明显在设置图片的时候有了 一个缓慢的过渡,这样避免了图片闪过的场景。

Glide.with(this)
    .load(url)
    .placeholder(new ColorDrawable(Color.GREEN))
    .transition(withCrossFade())
    .into(view);
Animation_Transition.gif

RequestBuilder

RequestBuilder相对比较灵活,它携带了一个图片加载的几个重要元素,包括请求的rul和常规的设置(占位图,Options,缩略图等),针对不同的需求,我们同样也能单独先创建RequestBuilder,然后再去load(url)和into(view),看看下面的例子:

RequestBuilder<Drawable> requestBuilder = Glide.with(this).asDrawable();
requestBuilder.load(url).into(view);

Thumbnail

Thumbnail表示缩略图,当我们请求图片还未能加载的时候,可以选择优先展示另一个缩略图的图片url,直到原图片展示成功,这样对于用户来说是友好的。

Glide.with(this)
  .load(url)
  .thumbnail(Glide.with(this)
    .load(thumbnailUrl))
  .into(imageView);

如果加载的图片只有一个url,而没有缩略图的url,那么你可以像下面这么做,在thumbnail里面设置图片的宽高,则执行加载指定宽高的缩略图,最终效果如下,可以清晰的看到在显示原图之前有一个缩略图的过渡,这样看起来效果是不是比最初的直接load好多了呢?

   Glide.with(this)
            .load(url)
            .placeholder(new ColorDrawable(Color.GREEN))
            .transition(withCrossFade())
            .thumbnail(Glide.with(this).load(url).override(60))
            .into(imageView);
Animation_thumbnail.gif

SizeMultiplier

如果你想加载一张图片的缩略图,那么sizeMultiplier表示为这张图缩小多少比例,如下设置为缩小四分之一

Glide.with(this)
  .load(url)
  .thumbnail(/*sizeMultiplier*/ 0.25f)
  .into(imageView);

请求失败后再次请求

这种做法类似于thumbnail,当mainurl请求失败后,则会去请求twourl,当我们同时设置了thumbnail请求,那么它只会在mainurl请求失败后去再次请求;

Glide.with(this)
  .load(mainurl)
  .error(Glide.with(this)
      .load(twourl))
  .into(imageView);

Transformations

通常Transformations 用来对获取的图片资源进行裁剪、缩放、GIF动画转换等操作,一般情况下Glide提供了CenterCrop、FitCenter、CircleCrop的内置转换,单独使用或者结合RequestOptions使用,如下使用:

Glide.with(this)
  .load(mainurl)
  .centerCrop()
  .into(imageView);

如果使用多个转换,MultiTransformation可以省略,CustomTransformation为自定义的Transformation,MultiTransformation构造函数的传入参数的顺序,决定了这些转换的实现顺序,如果效果重合,那么后面的参数效果会覆盖前面的效果,那么需要如下使用方式:

Glide.with(fragment)
  .load(url)
  .transform(new MultiTransformation(new centerCrop(), new CustomTransformation())
  .into(imageView);

如果对图片有特定的转换需求,那么需要定制化transformation,Glide为我们提供了许多Transformation,假如我们需要对bitmap特定转化,那么可以使用BitmapTransformation,使用方法如下:

public class CustomTrans extends BitmapTransformation {

    private static final String ID = "com.glide.demo.CustomTrans";
    private static String ID_BYTES = null;

    static {
        try {
            ID_BYTES = String.valueOf(ID.getBytes(STRING_CHARSET_NAME));
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
    }

    @Override
    public Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        if (toTransform.getWidth() == outWidth && toTransform.getHeight() == outHeight) {
            return toTransform;
        }
        //操作图片,得到新的bitmap
        return Bitmap.createScaledBitmap(toTransform, outWidth, outHeight, /*filter=*/ true);
    }

    /**
     * 下面三个方法必须重写,将当前类的hashcode作为当前转换的bitmap的key
     * 便于存储到磁盘和内存,那么下次获取则通过当前key获取缓存
     * @param
     */
    @Override
    public boolean equals(Object o) {
        return o instanceof CustomTrans;
    }

    @Override
    public int hashCode() {
        return ID.hashCode();
    }

    @Override
    public void updateDiskCacheKey(MessageDigest messageDigest) {
        messageDigest.update(Byte.parseByte(ID_BYTES));
    }
}

缓存设置

Glide.with(this)
  .load(mainurl)
  //跳过内存缓存
  .skipMemoryCache(true)
  //缓存所有版本的图像
  .diskCacheStrategy(DiskCacheStrategy.ALL)
  //跳过磁盘缓存
  .diskCacheStrategy(DiskCacheStrategy.NONE)
   //只缓存原来分辨率的图片
  .diskCacheStrategy(DiskCacheStrategy.DATA)
  //只缓存最终的图片
  .diskCacheStrategy(DiskCacheStrategy.RESOURCE)
  .into(imageView);

总结

关于一些常规的Glide使用方法暂时总结到这里,后面会陆续再补充的更全面,本篇文章也会陆续更新,下一章我们一起看下Glide源码,一共会分几个层面来解析,如有什么疑问也能提出,随时修正和改进。最后放出官方文档和源码地址:

Github地址:https://github.com/bumptech/glide
官方文档:http://bumptech.github.io/glide/
官方文档中文版:https://muyangmin.github.io/glide-docs-cn/

Glide源码之如何绑Activity的生命周期的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,406评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,732评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,711评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,380评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,432评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,301评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,145评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,008评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,443评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,649评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,795评论 1 347
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,501评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,119评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,731评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,865评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,899评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,724评论 2 354