[Android]图片加载库Glide

- 日理万妓 2024-03-27 15:10 17阅读 0赞

**目录**

Glide的介绍

Glide的基本使用

指定图片的格式

Glide占位符

指定图片的大小

过渡动画

图片变换

Generated API

--------------------

#### Glide的介绍 ####

--------------------

Glide是一个快速高效的Android图片加载库，可以自动加载网络，本地文件，app资源中的文件，注重于平滑的滚动。

开源地址：https://github.com/bumptech/glide

中文文档：https://muyangmin.github.io/glide-docs-cn/

**添加依赖**

implementation 'com.github.bumptech.glide:glide:4.11.0'

添加网络权限

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

#### Glide的基本使用 ####

--------------------

加载图片:

val imageview:ImageView=findViewById(R.id.imageview)
            Glide.with(this)
                .load("https://images.pexels.com/photos/10396930/pexels-photo-10396930.jpeg?cs=srgb&dl=pexels-valeriia-miller-10396930.jpg&fm=jpg")
                .into(imageview)

下面我们来看一下这些方法的解析吧

Glide.with()方法用于创建一个加载图片的实例

with()方法可以接收Context，Activity，Fragment类型的参数，这个参数的生命周期将会和加载的图片绑定在一起，如果传递的是activity，那么这个图片是和activity绑定在一起的，activity退出销毁，那么Glide就会把图片加入到它的内存之中管理，也不会去显示这张图片了。

load()方法用于指定待加载的图片资源，包括网络图片，本地图片，应用资源，二进制流，Uri对象等。

![76f81e2dd98f41cdbfd0b75145ec15e6.png][]

into()方法，希望图片显示在哪个ImageView，就把这个ImageView的实例传进去。

#### 指定图片的格式 ####

--------------------

在with()方法的后面加入一个asBitmap()方法，就表示强制指定加载静态图片。

在with()方法的后面加入一个asGif()方法，就表示强制指定加载动态图片。

在with()方法的后面加入一个asFile()方法，就表示强制指定加载文件格式。

在with()方法的后面加入一个asDrawable()方法，就表示强制指定加载Drawable格式。

#### Glide占位符 ####

--------------------

Glide4中占位符的使用方法，包括（placeholder，error，fallback）三种占位符

> 1.placeholder 正在请求图片的时候展示的图片
> 
> 2.error 如果请求失败的时候展示的图片（如果没有设置，还是展示placeholder的占位符）
> 
> 3.fallback 如果请求的url/model为null的时候展示的图片（如果没有设置，还是展示placeholder的占位符）

val requestOption:RequestOptions=RequestOptions()
                .placeholder(R.drawable.load)
                .error(R.drawable.error)
                .fallback(R.drawable.fallback)
            val imageview:ImageView=findViewById(R.id.imageview)
             Glide.with(this)
                .load("https://images.pexels.com/photos/10396930/pexels-photo-10396930.jpeg?cs=srgb&dl=pexels-valeriia-miller-10396930.jpg&fm=jpg")
                .apply(requestOption)
                .into(imageview)

![7b9aecc1af544f68843ff93b027e98cc.png][]

#### 指定图片的大小 ####

--------------------

Glide不会直接将图片的完整尺寸全部加载到内存中，而是用多少加载多少，Glide会自动判断ImageView的大小，然后只将这么大的图片像素加载到内存当中，帮助我们节省开支。

Glide提供override方法指定图片的尺寸，Glide就只会将图片加载成100\*100像素的尺寸，而不会管ImageView的大小。

val requestOption:RequestOptions=RequestOptions()
                .placeholder(R.drawable.load)
                .error(R.drawable.error)
                .fallback(R.drawable.fallback)
                .override(100,100)

#### 过渡动画 ####

--------------------

定义Glide如何从占位符到新加载的图片，或从缩略图到全尺寸图片过渡

交叉淡入（避免占位图还能显示）

val factory:DrawableCrossFadeFactory=DrawableCrossFadeFactory.Builder()
                .setCrossFadeEnabled(true)
                .build()

Glide.with(this)
                .load("https://images.pexels.com/photos/10396930/pexels-photo-10396930.jpeg?cs=srgb&dl=pexels-valeriia-miller-10396930.jpg&fm=jpg")
                .apply(requestOption)
                 .transition(DrawableTransitionOptions.withCrossFade(factory))
                .into(imageview)

#### 图片变换 ####

--------------------

获取资源并修改它，然后返回被修改后的资源，通常交换操作是用来完成裁剪或对位图应用过滤器。比如对图片进行圆角配置。

> 1.CircleCrop：圆角
> 
> 2.RoundedCorners:四个角统一指定
> 
> 3.GranularRoundedCorners：四个角度单独指定
> 
> 4.Rotate：旋转

下面我们来试试

1.CircleCrop：圆角

Glide.with(this)
                .load("https://images.pexels.com/photos/10396930/pexels-photo-10396930.jpeg?cs=srgb&dl=pexels-valeriia-miller-10396930.jpg&fm=jpg")
                .apply(requestOption)
                 .transform(CircleCrop())
                 .into(imageview)

![d8b80d8df7374c47876c86e2c331730e.png][]

2.RoundedCorners:四个角统一指定

Glide.with(this)
                .load("https://images.pexels.com/photos/10396930/pexels-photo-10396930.jpeg?cs=srgb&dl=pexels-valeriia-miller-10396930.jpg&fm=jpg")
                .apply(requestOption)
                 .transform(RoundedCorners(80))
                 .into(imageview)

![e3de38beaea94b7d8ccf3fe7a2223279.png][]

3.GranularRoundedCorners：四个角度单独指定

Glide.with(this)
                .load("https://images.pexels.com/photos/10396930/pexels-photo-10396930.jpeg?cs=srgb&dl=pexels-valeriia-miller-10396930.jpg&fm=jpg")
                .apply(requestOption)
                 .transform(GranularRoundedCorners(30f,80f,80f,30f))
                 .into(imageview)

![e5e7114832a94c259d1143b6d0e0f36a.png][]

4.Rotate：旋转

![dacffe54bd204edc8f5a27bb905a3300.png][]

#### Generated API ####

添加Glide注解处理器的依赖：

plugins {
        ...
        id 'kotlin-kapt'
    }
    dependencies {
    ...
    kapt 'com.github.bumptech.glide:compiler:4.9.0'
    }

新建MyAppModule继承自AppGlideModule，并添加@GlideModule注解：

@GlideModule
    class MyAppModule: AppGlideModule() {
    }

然后点击Build->Make Module'Glide.app.main'，就会自动生成GlideApp类

此时我们能够更简单的完成占位符等配置

GlideApp.with(this)
                .load("https://images.pexels.com/photos/10396930/pexels-photo-10396930.jpeg?cs=srgb&dl=pexels-valeriia-miller-10396930.jpg&fm=jpg")
                .placeholder(R.drawable.load)

[76f81e2dd98f41cdbfd0b75145ec15e6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/8cd0bc3264254fcbbca1e4a0a36d884f.png
[7b9aecc1af544f68843ff93b027e98cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ef9f3fa228f04ef3a59ad373300788a8.png
[d8b80d8df7374c47876c86e2c331730e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/ff57c2d49aad4b268f278700ddb4f691.png
[e3de38beaea94b7d8ccf3fe7a2223279.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/b5c2581c40734c6d8bb56eb53cb42739.png
[e5e7114832a94c259d1143b6d0e0f36a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/aaea68585a3a4e8db59e017e8cba8c31.png
[dacffe54bd204edc8f5a27bb905a3300.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/12cc253547fa46a9bb2bab1052ba2bc9.png