文章目录

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



一、前言



现在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">

    <Button
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:id="@+id/btn_load"
        android:layout_margin="10dp"
        android:text="Load Image"/>


    <ImageView
        android: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;

    @Override
    protected 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() {
            @Override
            public 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);
    }
}

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

harmonyOs加载图片框架 android图片加载框架_ide


可以看到，一张网络上的图片已经被成功下载，并且展示到ImageView上了。

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

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

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

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



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



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

注意：with()方法中传入的实例会决定Glide加载图片的生命周期

harmonyOs加载图片框架 android图片加载框架_ide_02


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



Glide支持加载各种各样的图片资源，包括 网络图片、本地图片、应用资源、二进制流、Uri对象

harmonyOs加载图片框架 android图片加载框架_位图_03



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



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

harmonyOs加载图片框架 android图片加载框架_harmonyOs加载图片框架_04



总结

那么回顾一下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缓存方面的内容我们将会在后面的文章进行详细的讲解，这里只是为了测试占位图功能而加的一个额外配置，暂时你只需要知道禁用缓存必须这么写就可以了。

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

harmonyOs加载图片框架 android图片加载框架_位图_05


可以看到，当点击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地址修改成一个不存在的图片地址，或者干脆直接将手机的网络给关了，然后重新运行程序，效果如下图所示：

harmonyOs加载图片框架 android图片加载框架_加载_06


这样我们就把Glide提供的占位图功能都掌握了。


2、指定图片格式

我们还需要再了解一下Glide另外一个强大的功能，那就是 Glide是支持加载GIF图片

而使用 Glide加载GIF图并不需要编写什么额外的代码，Glide内部会自动判断图片格式

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

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

harmonyOs加载图片框架 android图片加载框架_ide_07


也就是说， 不管我们传入的是一张普通图片，还是一张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);

harmonyOs加载图片框架 android图片加载框架_harmonyOs加载图片框架_08


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

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

harmonyOs加载图片框架 android图片加载框架_位图_09


由于调用了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地址改成刚才的必应美图，然后重新运行代码，效果如下图所示。

harmonyOs加载图片框架 android图片加载框架_ide_10


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


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到底执行了什么神奇的操作，能够使得我们加载图片变得这么简单