首页 > 其他分享 >Google推荐的图片加载库Glide介绍

Google推荐的图片加载库Glide介绍

时间:2023-05-06 14:10:46浏览次数:44  
标签:Google imageViewHolder Glide image context id 加载


Fresco以及我们今天的主角Glide。它们各有千秋,不能评定谁一定比谁好,只能说哪一个更适合你。

我的理解

下面我来谈一下个人对这些图片加载库的理解,如有错误,还望指教。

Universal Image Loader:一个强大的图片加载库,包含各种各样的配置,最老牌,使用也最广泛。

Picasso: Square出品,必属精品。和OkHttp搭配起来更配呦!

Volley ImageLoader:Google官方出品,可惜不能加载本地图片~

Fresco:Facebook出的,天生骄傲!不是一般的强大。

Glide:Google推荐的图片加载库,专注于流畅的滚动。

更多详情请看stackoverflow上这个问题

初试Glide

下面进入今天的主题,相信之前很多同学都看到过这篇介绍Glide的文章,中文版在这里。文中从各个方面介绍和比较了Glide与Picasso,总体来说二者极为相似,有着近乎相同的API的使用风格。但Glide在缓存策略和加载GIF方面略胜一筹。最后作者也极力推荐了这个库。

而且据说在Google新出的Photos应用中,到处可见Glide的踪迹。看到这里,你是不是已经迫不及待的想试一试这个库呢?就在你下定决心尝试一记的时候,你又听说Yelp app(据说是美国的大众点评)也在使用这个吊炸天的库。你的心中激动万分,发四一定要使用这个库。说干就干,打开Android Studio,在builde.gradle里面添加上


compile 'com.github.bumptech.glide:glide:3.6.1'


然后全局搜索图片加载的地方,全部换成了下面的代码:


Glide.with(mContext)
        .load(url)
        .placeholder(R.drawable.loading_spinner)
        .crossFade()
        .into(myImageView);


在经过漫长的编译过程之后,再次打开APP,看到有着渐现效果的图片呈现在你的面前,你不禁叫道:“wocao,真TM帅!为什么我以前没有发现呢?”。

不过在你使用了几天之后你会发现一些问题:

为什么 有的图片第一次加载的时候只显示占位图,第二次才显示正常的图片呢?

为什么 我总会得到类似You cannot start a load for a destroyed activity这样的异常呢?

为什么 我不能给加载的图片setTag()呢?

为什么?为什么?这么NB的库竟然会有这么多的问题。没错,这就是我今天要讲的重点。怎么避免上面的问题发生。

一些解决方案

1.如果你刚好使用了这个圆形Imageview库或者其他的一些自定义的圆形Imageview,而你又刚好设置了占位的话,那么,你就会遇到第一个问题。如何解决呢?

方案一: 不设置占位;
方案二:使用Glide的Transformation API自定义圆形Bitmap的转换。这里是一个已有的例子
方案三:使用下面的代码加载图片:


Glide.with(mContext)
    .load(url) 
    .placeholder(R.drawable.loading_spinner)
    .into(new SimpleTarget<Bitmap>(width, height) {
        @Override 
        public void onResourceReady(Bitmap bitmap, GlideAnimation anim) {
            // setImageBitmap(bitmap) on CircleImageView 
        } 
    };


2.至于第二个问题,请记住一句话:不要再非主线程里面使用Glide加载图片,如果真的使用了,请把context参数换成getApplicationContext。更多的细节请参考这个issue

3.为什么不能设置Tag,是因为你使用的姿势不对哦。如何为ImageView设置Tag呢?且听我细细道来。

方案一:使用setTag(int,object)方法设置tag,具体用法如下:

Java代码是酱紫的:

Glide.with(context).load(urls.get(i).getUrl()).fitCenter().into(imageViewHolder.image);
        imageViewHolder.image.setTag(R.id.image_tag, i);
        imageViewHolder.image.setOnClickListener(new View.OnClickListener() {
            @Override
                int position = (int) v.getTag(R.id.image_tag);
                Toast.makeText(context, urls.get(position).getWho(), Toast.LENGTH_SHORT).show();
            }
        });


同时在values文件夹下新建ids.xml,添加


<item name="image_tag" type="id"/>


大功告成!

方案二:从Glide的3.6.0之后,新添加了全局设置的方法。具体方法如下:

先实现GlideMoudle接口,全局设置ViewTaget的tagId:


public class MyGlideMoudle implements GlideModule{
    @Override
    public void applyOptions(Context context, GlideBuilder builder) {
        ViewTarget.setTagId(R.id.glide_tag_id);
    }

    @Override
    public void registerComponents(Context context, Glide glide) {

    }
}


同样,也需要在ids.xml下添加id


<item name="glide_tag_id" type="id"/>


最后在AndroidManifest.xml文件里面添加


<meta-data
    android:name="com.yourpackagename.MyGlideMoudle"
    android:value="GlideModule" />


∩_∩)′。

方案三:写一个继承自ImageViewTaget的类,复写它的get/setRequest方法。


Glide.with(context).load(urls.get(i).getUrl()).fitCenter().into(new ImageViewTarget<GlideDrawable>(imageViewHolder.image) {
            @Override
            protected void setResource(GlideDrawable resource) {
                imageViewHolder.image.setImageDrawable(resource);
            }

            @Override
            public void setRequest(Request request) {
                imageViewHolder.image.setTag(i);
                imageViewHolder.image.setTag(R.id.glide_tag_id,request);
            }

            @Override
            public Request getRequest() {
                return (Request) imageViewHolder.image.getTag(R.id.glide_tag_id);
            }
        });

        imageViewHolder.image.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = (int) v.getTag();
                Toast.makeText(context, urls.get(position).getWho(), Toast.LENGTH_SHORT).show();
            }
        });


一些使用技巧

1.Glide.with(context).resumeRequests()和 Glide.with(context).pauseRequests()

当列表在滑动的时候,调用pauseRequests()取消请求,滑动停止时,调用resumeRequests()恢复请求。这样是不是会好些呢?

2.Glide.clear()

当你想清除掉所有的图片加载请求时,这个方法可以帮助到你。

3.ListPreloader

如果你想让列表预加载的话,不妨试一下ListPreloader这个类。


标签:Google,imageViewHolder,Glide,image,context,id,加载
From: https://blog.51cto.com/u_16099425/6249578

相关文章

  • Android开发:使用Glide动态加载圆形图片和圆角图片
    最新消息,鼎鼎大名的Yelp应用也转投Glide的阵营了,而且Glide在跟Listview的配合起来非常的顺畅,Glide除了配置简单,还可以本地缓存图片,也可以实现Listview图片的提前预加载,使得listview的更加的顺滑,具体可以查看Yelp的那篇博文。但是如果碰到要把加载下来的图片转成圆角或者圆形的图......
  • java -cp 错误:找不到或无法加载主类
    java-cp错误:找不到或无法加载主类1.问题场景在一个项目开发中,我需要写一个windows的bat脚本,需要在里面调用SpringBoot项目生成的jar包,我在调用classes下面的jar时通过调用jar包去调用jar包中的某个.java类总是报错误:找不到或无法加载主类最后搞的我心态都崩了,明......
  • 一起单测引起的项目加载失败惨案
    作者:京东科技宋慧超一、前言最近在开发一个功能模块时,在功能自测阶段,通过使用单测测试功能的完整性,在测试单测联通性使用到静态方法测试时,发现单测报错,通过查阅解决方案发现需要对Javaassist包进行排包或者升版本处理。通过排包解决掉单测报错,在部署项目时发现频繁报bean注入失......
  • jQuery AJAX之异步访问和加载片段
    HTML文件<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title></title><scriptsrc="../../Scripts/jquery-3.4.1.min.js"></script><scriptsrc="ajaxindex.js&......
  • 类加载机制和Bean的生命周期
    类加载机制和Bean的生命周期是Java中非常重要的两个概念,它们分别对应了Java类的加载和对象的创建、初始化、销毁等过程。类加载机制是指当Java程序需要使用某个类时,JVM会通过类加载器将该类加载到内存中,并对该类进行初始化。类加载器会按照一定的顺序查找类文件,并加载到内存中。......
  • 使用require.context实现优雅的预加载
    前言在前端开发中,对页面花里胡哨度[注1]要求越高的页面,用到的图片、音频什么的就越多,比如什么结婚请柬、展会请柬、发布会宣传页、数据大屏。虽然现在浏览器不允许网页在没有用户交互的情况下播放音频,但是,我们依旧要在页面展现的同时,准备好所有的静态资源。注1:花里胡哨度(garish......
  • Google谷歌语法 - 让搜索事半功倍
    高效率的搜索方法-谷歌语法适用于多种搜索引擎,原主要对象为Google搜索引擎,其他搜索引擎也适用,如必应bing,百度,搜狗等语法类搜索方法site语法site意思为站点,该语法是限制搜索的目标为域名,然后搜索子域名。比如我们搜索“site:edu.cn”,这样搜出来的内容都是有关于学校的内容,而......
  • 下拉加载
    需求:当有大量数据时,页面需要滚动条下拉到底部时加载更多当一个列表存在成千上万条,但是又没有分页组件的情况,不能一次性加载大量数据。这个时候就需要滚动条下拉到底部时,再重新加载数据思路pageSize设置为20条或更多,超出页面高度;监听滚动条下滑,需要加一个防抖,当滚动条到达底部......
  • el-select数据太多造成页面卡顿?el-select实现触底加载
    当我们使用el-select下拉框的时候,会遇到后端放回的数据太过庞大(成千上万条),导致页面渲染的时候造成卡顿现象。这时候我们可以利用触底加载方法减少资源的消耗,避免页面卡顿。思路:这时候我们可以利用vue的自定义指令,监听到他的下拉滚动事件,当滚动到最后时,(下拉宽高度+可滑动高度距离......
  • vue搭建脚手架出现:无法加载文件 D:\SoftWare\NodeJS\node_global\vue.ps1
    一、前言用VsCode搭建Vue3脚手架时,提示“无法加载文件D:\SoftWare\NodeJS\node_global\vue.ps1”文件 二、解决方法以管理员身份打开VSCode编辑器首先执行get-ExecutionPolicy查看执行策略然后执行set-ExecutionPolicyRemoteSigned把策略模式改为RemoteSigned更改执行......