Android Glide图片加载框架(一)基本用法

文章目录

  • 一、前言
  • 二、简介
  • 三、基本用法
    • 第一步:调用 Glide.with() 方法创建加载图片的实例
    • 第二步:调用 load() 方法指定待加载的图片资源
    • 第三步:调用 into() 方法绑定显示控件
    • 总结
  • 四、扩展用法
    • 1、占位图
    • 2、指定图片格式
    • 3、指定图片大小


Android Glide图片加载框架系列文章

Android Glide图片加载框架(一)基本用法

Android Glide图片加载框架(二)源码解析之with()

Android Glide图片加载框架(二)源码解析之load()

Android Glide图片加载框架(二)源码解析之into()

Android Glide图片加载框架(三)缓存机制


一、前言


现在Android上的图片加载框架非常成熟,像UniversalImageLoader、Glide、Picasso、Fresco等等,每一个功能都十分强大,他们使用场景有重合的,也有不同的地方,从框架的易用性、功能以及包的大小多方面考虑,还是选择Glide来进行深入的研究,这也是Google官方推荐使用的图片加载框架。

下面我们通过一系列文章,由浅入深来了解Glide的用法。


二、简介


Glide是Google推荐的用于Android平台上的图片加载和缓存函数库。这个库被广泛应用在Google的开源项目中,Glide为包含图片的滚动列表做了尽可能流畅的优化。除了静态图片,Glide也支持GIF格式图片的显示。Glide提供了灵活的API可以让开发者方便地替换下载图片所用的网络函数库,默认情况下,它使用HttpUrlConnection作为网络请求模块,开发者也可以根据自己项目的实际需求灵活使用Google的Volley或者Square的OkHttp等函数库进行替换。

目前Glide最新版本是4.11.0,但是我们下面以4.8.0版本为例进行讲解,首先在项目的build.gradle文件中添加如下依赖:

dependencies {implementation 'com.github.bumptech.glide:glide:4.8.0'
}

另外,Glide中需要用到网络功能,因此你还得在AndroidManifest.xml中声明一下网络权限才行:

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

就是这么简单,然后我们就可以自由地使用Glide中的任意功能了。


三、基本用法


首先打开项目的布局文件,在布局当中加入一个Button和一个ImageView,如下所示:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><Buttonandroid:layout_width="match_parent"android:layout_height="50dp"android:id="@+id/btn_load"android:layout_margin="10dp"android:text="Load Image"/><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_margin="10dp"android:id="@+id/img"/>
</LinearLayout>

为了让用户点击Button的时候能够将刚才的图片显示在ImageView上,我们需要修改MainActivity中的代码,如下所示:

public class MainActivity extends AppCompatActivity {Button btn;ImageView img;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);init();}private void init(){btn = (Button)findViewById(R.id.btn_load);img = (ImageView)findViewById(R.id.img);btn.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {btnLoad();}});}private void btnLoad(){String url = "http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg";Glide.with(this).load(url).into(img);}
}

没错,就是这么简单。现在我们来运行一下程序,效果如下图所示:

在这里插入图片描述
可以看到,一张网络上的图片已经被成功下载,并且展示到ImageView上了。

而我们到底做了什么?实际上核心的代码就只有这一行而已:

Glide.with(this).load(url).into(img);

千万不要小看这一行代码,实际上仅仅就这一行代码,你已经可以做非常非常多的事情了,包括加载网络上的图片、加载手机本地的图片、加载应用资源中的图片等等。

下面我们就来详细解析一下这行代码。


第一步:调用 Glide.with() 方法创建加载图片的实例


with()方法可以接收 Context、Activity或者Fragment类型的参数 。也就是说我们选择的范围非常广,不管是在Activity还是Fragment中调用with()方法,都可以直接传this。那如果调用的地方既不在Activity中也不在Fragment中呢?也没关系,我们可以获取当前应用程序的 ApplicationContext ,传入到with()方法当中。

注意: with()方法中传入的实例会决定Glide加载图片的生命周期 ,如果传入的是Activity或者Fragment的实例,那么当这个Activity或Fragment被销毁的时候,图片加载也会停止。如果传入的是ApplicationContext,那么只有当应用程序被杀掉的时候,图片加载才会停止。

在这里插入图片描述

第二步:调用 load() 方法指定待加载的图片资源


Glide支持加载各种各样的图片资源,包括 网络图片、本地图片、应用资源、二进制流、Uri对象 等等。因此load()方法也有很多个方法重载,除了我们刚才使用的加载一个字符串网址之外,你还可以这样使用load()方法:

在这里插入图片描述


第三步:调用 into() 方法绑定显示控件


这个方法就很简单了,我们希望让图片显示在哪个ImageView上,把这个ImageView的实例传进去就可以了。当然,into()方法不仅仅是只能接收ImageView类型的参数,还支持很多更丰富的用法,不过那个属于高级技巧,我们会在后面的文章当中学习。

在这里插入图片描述


总结

那么回顾一下Glide最基本的使用方式,其实就是关键的三步走:

with() -> load() -> into()

熟记这三步,你就已经入门Glide了。


四、扩展用法


现在我们来学一些Glide的扩展内容。其实刚才所学的三步走就是Glide最核心的东西,而我们后面所要学习的所有东西都是在这个三步走的基础上不断进行扩展而已。


1、占位图

观察刚才加载网络图片的效果,你会发现,点击了Load Image按钮之后,要稍微等一会图片才会显示出来。这其实很容易理解,因为从网络上下载图片本来就是需要时间的。那么我们有没有办法再优化一下用户体验呢?当然可以,Glide提供了各种各样非常丰富的API支持,其中就包括了 占位图功能

顾名思义,占位图就是指在图片的加载过程中,我们先显示一张临时的图片,等图片加载出来了再替换成要加载的图片

下面我们就来学习一下Glide占位图功能的使用方法,首先我事先准备好了一张default_image.png图片,用来作为占位图显示。然后修改Glide加载部分的代码,如下所示:

String url = "http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg";RequestOptions options = new RequestOptions();
options.placeholder(R.mipmap.default_image);Glide.with(this).load(url).apply(options).into(img);

没错,就是这么简单。首先我们初始化RequestOptions对象,调用该对象的placeholder()方法,然后将占位图片的资源id传入到这个方法中,最后在load()方法之后调用apply()方法,将RequestOptions实例化对象传进来即可。

不过如果你现在重新运行一下代码并点击Load Image,很可能是根本看不到占位图效果的。因为Glide有非常强大的缓存机制,我们刚才加载那张必应美图的时候Glide自动就已经将它缓存下来了,下次加载的时候将会直接从缓存中读取,不会再去网络下载了,因而加载的速度非常快,所以占位图可能根本来不及显示。

因此这里我们还需要稍微做一点修改,来让占位图能有机会显示出来,修改代码如下所示:

String url = "http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg";RequestOptions options = new RequestOptions();
options.placeholder(R.mipmap.default_image);
options.diskCacheStrategy(DiskCacheStrategy.NONE);Glide.with(this).load(url).apply(options).into(img);

可以看到,我们调用了RequestOptions对象的diskCacheStrategy()方法,并传入DiskCacheStrategy.NONE参数,这样就可以禁用掉Glide的缓存功能。

关于Glide缓存方面的内容我们将会在后面的文章进行详细的讲解,这里只是为了测试占位图功能而加的一个额外配置,暂时你只需要知道禁用缓存必须这么写就可以了。

现在重新运行一下代码,效果如下图所示:

在这里插入图片描述
可以看到,当点击Load Image按钮之后会立即显示一张占位图,然后等真正的图片加载完成之后会将占位图替换掉。

当然,这只是占位图的一种,除了这种加载占位图之外,还有一种异常占位图。异常占位图就是指,如果因为某些异常情况导致图片加载失败,比如说手机网络信号不好,这个时候就显示这张异常占位图。

异常占位图的用法相信你已经可以猜到了,首先准备一张error.jpg图片,然后修改Glide加载部分的代码,如下所示:

String url = "http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg";RequestOptions options = new RequestOptions();
options.placeholder(R.mipmap.default_image);
options.error(R.mipmap.error);
options.diskCacheStrategy(DiskCacheStrategy.NONE);Glide.with(this).load(url).apply(options).into(img);

很简单,我们调用了RequestOptions对象的error()方法就可以指定异常占位图了。

现在你可以将图片的url地址修改成一个不存在的图片地址,或者干脆直接将手机的网络给关了,然后重新运行程序,效果如下图所示:

在这里插入图片描述
这样我们就把Glide提供的占位图功能都掌握了。


2、指定图片格式

我们还需要再了解一下Glide另外一个强大的功能,那就是 Glide是支持加载GIF图片 的。这一点确实非常牛逼,因为相比之下Jake Warton曾经明确表示过,Picasso是不会支持加载GIF图片的。

而使用 Glide加载GIF图并不需要编写什么额外的代码,Glide内部会自动判断图片格式 。比如这是一张GIF图片的URL地址:

http://p1.pstatp.com/large/166200019850062839d3

我们只需要将刚才那段加载图片代码中的URL地址替换成上面的地址就可以了,现在重新运行一下代码,效果如下图所示:

在这里插入图片描述
也就是说, 不管我们传入的是一张普通图片,还是一张GIF图片,Glide都会自动进行判断,并且可以正确地把它解析并展示出来


如果我想指定图片的格式该怎么办呢?


就比如说,我希望加载的这张图必须是一张静态图片,我不需要Glide自动帮我判断它到底是静图还是GIF图。

想实现这个功能仍然非常简单,我们只需在with()方法后再串接一个新的方法就可以了,如下所示:

String url = "http://p1.pstatp.com/large/166200019850062839d3";RequestOptions options = new RequestOptions();
options.placeholder(R.mipmap.default_image);
options.error(R.mipmap.error);
options.diskCacheStrategy(DiskCacheStrategy.NONE);Glide.with(this).asBitmap().load(url).apply(options).into(img);

在这里插入图片描述
可以看到,这里在with()方法的后面加入了一个asBitmap()方法,这个方法的意思就是说这里只允许加载静态图片,不需要Glide去帮我们自动进行图片格式的判断了。

现在重新运行一下程序,效果如下图所示:

在这里插入图片描述
由于调用了asBitmap()方法,现在GIF图就无法正常播放了,而是会在界面上显示第一帧的图片。

那么类似地,既然我们能强制指定加载静态图片,就也能强制指定加载动态图片。比如说我们想要实现必须加载动态图片的功能,就可以这样写:

String url = "http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg";RequestOptions options = new RequestOptions();
options.placeholder(R.mipmap.default_image);
options.error(R.mipmap.error);
options.diskCacheStrategy(DiskCacheStrategy.NONE);Glide.with(this).asGif().load(url).apply(options).into(img);

这里调用了asGif()方法替代了asBitmap()方法,很好理解,相信不用我多做什么解释了。


那么既然指定了只允许加载动态图片,如果我们传入了一张静态图片的URL地址又会怎么样呢?


试一下就知道了,将图片的URL地址改成刚才的必应美图,然后重新运行代码,效果如下图所示。

在这里插入图片描述
没错, 如果指定了只能加载动态图片,而传入的图片却是一张静图的话,那么结果自然就只有加载失败喽


3、指定图片大小

实际上,使用Glide在绝大多数情况下我们都是不需要指定图片大小的。

在学习本节内容之前,你可能还需要先了解一个概念,就是我们平时在加载图片的时候很容易会造成内存浪费。什么叫内存浪费呢?比如说一张图片的尺寸是1000 x 1000像素,但是我们界面上的ImageView可能只有200 x 200像素,这个时候如果你不对图片进行任何压缩就直接读取到内存中,这就属于内存浪费了,因为程序中根本就用不到这么高像素的图片。

而使用Glide,我们就完全不用担心图片内存浪费,甚至是内存溢出的问题。因为Glide从来都不会直接将图片的完整尺寸全部加载到内存中,而是用多少加载多少。Glide会自动判断ImageView的大小,然后只将这么大的图片像素加载到内存当中,帮助我们节省内存开支。

当然,Glide也并没有使用什么神奇的魔法,它内部的实现原理其实就是上面那篇文章当中介绍的技术,因此掌握了最基本的实现原理,你也可以自己实现一套这样的图片压缩机制。

也正是因为Glide是如此的智能,所以刚才在开始的时候我就说了,在绝大多数情况下我们都是不需要指定图片大小的,因为 Glide会自动根据ImageView的大小来决定图片的大小

不过,如果你真的有这样的需求,必须给图片指定一个固定的大小,Glide仍然是支持这个功能的。修改Glide加载部分的代码,如下所示:

String url = "http://cn.bing.com/az/hprichbg/rb/Dongdaemun_ZH-CN10736487148_1920x1080.jpg";RequestOptions options = new RequestOptions();
options.placeholder(R.mipmap.default_image);
options.error(R.mipmap.error);
options.diskCacheStrategy(DiskCacheStrategy.NONE);
options.override(100, 100);Glide.with(this).load(url).apply(options).into(img);

仍然非常简单,这里使用override()方法指定了一个图片的尺寸,也就是说,Glide现在只会将图片加载成100 x 100像素的尺寸,而不会管你的ImageView的大小是多少了。

现在你已经了解了Glide的基本用法,当然也是一些最常用的用法。下一篇文章当中,我们会尝试去分析Glide的源码,研究一下在这些基本用法的背后,Glide到底执行了什么神奇的操作,能够使得我们加载图片变得这么简单?感兴趣的朋友请继续阅读




本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/446767.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

操作系统 进程 学习以及思考

进程管理逻辑图 将多个程序拷贝到进程中&#xff0c;占用内存&#xff0c;如图扇形区域&#xff0c;当酷狗进程需要资源的时候&#xff0c;会通过I/O子系统取用资源的过程中&#xff0c;会放弃对cpu的占用&#xff0c;cpu就会处理别的进程&#xff0c;因此提高了cpu的利用率&am…

Android Glide图片加载框架(二)源码解析之with()

文章目录一、前言二、如何阅读源码三、源码解析1、with()Android Glide图片加载框架系列文章 Android Glide图片加载框架&#xff08;一&#xff09;基本用法 Android Glide图片加载框架&#xff08;二&#xff09;源码解析之with() Android Glide图片加载框架&#xff08;二…

计算机操作系统生产者和消费者模型的简单介绍

同步互斥小口诀 画图理解题目判断题目类型分析进程数目 填写进程模板补充基本代码(伪代码)补充PV代码检查调整代码 注意事项 代码是一步一步写出来的&#xff0c;代码是反复调整写出来的60%是生产者和消费者模型30%是读者和写者的模型 生产者和消费者 例子1 妈妈每次放放一…

Android Glide图片加载框架(二)源码解析之load()

文章目录一、前言二、源码分析1、load()Android Glide图片加载框架系列文章 Android Glide图片加载框架&#xff08;一&#xff09;基本用法 Android Glide图片加载框架&#xff08;二&#xff09;源码解析之with() Android Glide图片加载框架&#xff08;二&#xff09;源码…

计算机操作系统读者和写者模型的简单介绍以及思考

读者和写者 读写两组进程&#xff0c;共享一个文件&#xff0c;多个读者可以同时访问文件&#xff0c;多个写者不可以同时访问文件&#xff0c;写者和读者也不可以同时访问文件共享读&#xff1b;独占写特征:1,资源被谁占有&#xff1b;2&#xff0c;写者改变资源&#xff0c;…

Android Glide图片加载框架(二)源码解析之into()

文章目录一、前言二、源码解析1、into(ImageView)2、GlideContext.buildImageViewTarget()3、RequestBuilder.into(Target,RequestListener,RequestOptions);4、RequestBuilder.buildRequest()5、SingleRequest.obtain()6、isEquivalentTo()、isSkipMemoryCacheWithCompletePre…

2014年考研英语一翻译知识点

题目讲解网址 总结 1.做翻译题,不用看句子前后的地方,直接看要翻译的部分 2.多根据语境去翻译 3.如果是不认识的单词,一般都是我们平常经常使用/说的词的代替高级词 题目句子 It is also the reason why when we try to describe music with words, all wecan do is articul…

计算机操作系统 死锁问题

概念 条件是基础&#xff0c;在一定的原因下&#xff0c;产生结果死锁三胞胎 死锁 僵持&#xff0c;消耗时间&#xff0c;双方都占用了部分资源&#xff0c;不释放活锁 双方互相谦让&#xff0c;都不占用资源饥饿 谦让的一方一直等待&#xff0c;无法占有资源&#xff0c;导致…

武忠祥.高等数学.基础课-第一章函数 极限 连续P10

sin(1/x) 详细解析网址 1.图像 2.极限 x–>0时,函数极限不存在 sin2x 详细作图网址 1.图像 2.周期为Π f(x)周期为T,f(axb)周期为T/|a| 所以sinx周期为2Π,sin2x周期为2Π/2Π |sinx| 详细讲解网址 1.图像 2.周期:Π 3.绝对值 &#xff08;1&#xff09;y|sinx|的图…

算法章节 递归、排序、⼆分查找

递归 概念与特性函数调⽤函数⾃身的编程⽅式叫做递归&#xff0c;调⽤为”递“&#xff0c;返回为”归“三个条件1. ⼀个问题的解可以分解为多个⼦问题的解&#xff1b; 2. 分解之后的⼦问题&#xff0c;除了数据规模不同&#xff0c;求解思路跟原问题相同&#xff1b; 3. 存在…

codeforces 50A-C语言解题报告

50A题目网址 解题报告-others 题目解析 1.输入n x m大小的木板,使用21大小的多米诺去填满,求最多的多米诺数目 2.通过分析把木板分为奇数和偶数的情况 1)有一边是偶数的情况: 使用2去填满 2)两个边都是奇数 奇数-1偶数 还是让木板的(奇数-1)边去和2平行,再加上 (m-1)/2(n/1)…

Java命令:jps — 查看进程信息

文章目录一、简介二、常用命令1、jps2、jps -l3、jps -q4、jps -m5、jps -v6、jps失效一、简介 JVM Process Status Tool&#xff0c;显示指定系统内所有的HotSpot虚拟机进程。 功能&#xff1a; 显示当前所有java进程pid的命令&#xff0c;我们可以通过这个命令来查看到底启…

操作系统概述 记录操作系统相关知识

操作系统 现代计算机系统由一个或多个处理器、主存、打印机、键盘、鼠标、显示器、网络接口以及各种输入/输出设备构成。上面提到的这些东西都属于硬件资源&#xff0c;用户不会直接和硬件进行交互&#xff0c;计算机安装了一层软件&#xff0c;这层软件能够通过响应用户输入的…

JDK工具使用大全

文章目录一、简介一、简介 在JDK的bin目录下有很多命令行工具&#xff1a; 常用工具使用详解如下&#xff1a; Java命令&#xff1a;jps — 查看进程信息 Java命令&#xff1a;jstack — 获取线程dump信息 Java命令&#xff1a;jmap — 打印指定进程的共享对象内存映射或…

Linux进程 excel族函数的用法

介绍 使用fork创建一个进程之后&#xff0c;经常会在新进程中调用exec函数执行别的程序当前进程调用exec函数之后&#xff0c;这个进程会被完全替代换成新的程序&#xff0c;即便如此仍然是同一个进程&#xff0c;进程ID不变函数族 execl execlp execle execvp execvpe头文件 …

C++primer 12章 动态内存和智能指针

C引入智能指针的目的 使用智能指针来管理动态分配的对象&#xff0c;当一个对象应该被释放的时候&#xff0c;指向他的智能指针确保自动释放它 内存分配 静态内存&#xff1a;局部static对象、类static数据成员、定义在任何函数之外的变量栈内存&#xff1a;定义在函数内的非…

Mac下iTerm2的安装与配置

目录一、iTerm2简介二、下载以及安装三、iTerm2主题配置四、配置Oh My Zsh1、安装方式&#xff08;1&#xff09;一键安装&#xff08;2&#xff09;手动安装3、切换zsh4、修改主题五、配置Meslo字体六、声明高亮七、自动建议填充八、iTerm2快速隐藏和显示九、iTerm2隐藏用户名…

Java命令:jinfo — 查看进程参数

目录一、简介二、常用命令1、jinfo -flags pid : 打印当前指定java进程中已经设定的所有JVM参数信息2、jinfo -flag pid : 打印指定名称的参数3、jinfo -flag [|-] pid : 打开或关闭参数4、jinfo -sysprops pid : 打印当前java进程中设定的系统环境参数一、简介 jinfo 是 JDK …

C++primer第八章 IO库 8.1 IO类

IO库设施 istream &#xff08;输入流&#xff09;类型&#xff0c;提供输入操作。ostream &#xff08;输出流&#xff09;类型&#xff0c;提供输出操作。cin,—个 istream对象&#xff0c;从标准输入读取数据。cout, 一个ostream对象&#xff0c;向标准输出写入数据。cerr…

2014年英语一作文partB漫画作文

题目 Write an essay of 160-200 words based on the following drawing.In your essay you should describe the drawing brieflyexplain its intended meaning,give your comments 做题点 1.使用三段式,第一段:图片内容;第二段:图片暗示;第三段:写自己的评论 2.描述图片…