Glide的基本用法

2017-07-31  本文已影响81人  zsj1225

为什么要学Glide图片加载框架。Glide是Google官方推荐的图片加载框架。

1.Glide使用前的配置

1.1配置依赖

Android studio 的配置:

app/build.gradle文件当中添加如下依赖:

dependencies {
    compile 'com.github.bumptech.glide:glide:3.7.0'
}

Eclipse的配置

jar包的地址:
http://central.maven.org/maven2/com/github/bumptech/glide/glide/3.7.0/glide-3.7.0.jar

1.2 设置网络权限

在AndroidManifest.xml中声明一下网络权限才行:

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

2.加载图片--最基本的使用方式

2.1 最基本的使用

public void loadImageGlide(View view) {
    String url = "https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png";
    Glide.with(this).load(url).into(imageView);
}

效果如下:

Gif_20170730_222337.gif

实际上核心的代码就只有这一行而已:

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

2.1 Glide.with(this).load(url).into(imageView)的解析

2.1.1 with()方法 --> 控制生命周期

Glide.with()方法的创建一个加载图片的实例。with()方法的参数可以接收,Context,Activity或者Fragment类型的参数。

注意:with()方法传不同类型的参数决定了Glide加载图片的生命周期。当传入是Activity或者Fragment的实例,那么当这个Activity或者Fragment销毁的时候,Glide图片加载也会停止。

2.1.2 load()方法 --> 从哪里来

这个方法用于指定要加载的图片的内容。
除了加载Uri图片外,Glide还支持

// 加载本地图片
File file = new File(getExternalCacheDir() + "/image.jpg");
Glide.with(this).load(file).into(imageView);

// 加载应用资源
int resource = R.drawable.image;
Glide.with(this).load(resource).into(imageView);

// 加载二进制流
byte[] image = getImageBytes();
Glide.with(this).load(image).into(imageView);

// 加载Uri对象
Uri imageUri = getImageUri();
Glide.with(uri).load(image).into(imageView);

2.1.3 into()方法 --> 到哪里去

要把图片显示到哪里。显示到ImageViewd上,就传入ImageView的实例就可以了。
当然into方法不仅仅只能接受ImageView类型的参数,还支持很多跟丰富的用法,那些属于高级技巧,以后有时间会再讲。

2.2 总结

总结:Glide最基本的使用方式,就三步,1.先with() 设置图片加载的生命周期,2再load() 图片资源从哪里来,3.最后into()把图放哪里。掌握这三步,你就是算已经入门Glide了。

3. 占位符

前提:从网络加载图片,图片有可能不能立马显示出来,给用户一个空白,影响用户体验。应该显示一张加载中的临时图,等图片加载完成,就替代临时图,来提高用户体验。

3.1设置加载中占位图

在load()和into() 之间加入placeholder()方法,然后将占位图片的资源id传入到这个方法中即可。

Glide.with(this)
     .load(url)
     .placeholder(R.drawable.loading)
     .into(imageView);

但是你现在点加载方法,很可能看不到占位符。因为Glide有非常强大的缓冲机制,会自动缓冲加载过的图片。下载加载会直接从缓冲中读取,而不会再去网络去下载,因此加载的速度非常快,所以展位图可能根本来不及显示。
为了看得到占位图,禁止Glide的缓冲功能。

禁止Glide的缓冲功能。
Glide.with(this)
     .load(url)
     .placeholder(R.drawable.loading)
     .diskCacheStrategy(DiskCacheStrategy.NONE)//禁用掉Glide的缓存功能
     .into(imageView);

效果如下:

设置加载中占位图.gif

其实Glide当中绝大多数API的用法,其实就是在load()和into()方法之间串接任意想添加的功能就可以了。

3.2 设置异常占位图

Glide.with(this)
     .load(url)
     .placeholder(R.drawable.loading)
     .error(R.drawable.error)//设置异常占位符
     .diskCacheStrategy(DiskCacheStrategy.NONE)
     .into(imageView);

4 指定图片格式

Glide支持显示gif图。

4.1 设置gif动态图

    String url = "http://s1.dwstatic.com/group1/M00/C3/AC/4a5697ed8f6b73be31fa8e4c8d445370.gif";
    Glide.with(this)
    .load(url)
    .placeholder(R.drawable.loading)
    .diskCacheStrategy(DiskCacheStrategy.NONE)
    .into(ImageView);

其实就是把uri改成gif图的资源就行了。Glide内部会自动判断图片的格式
效果图如下:

设置gif动态图.gif

想指定图片的格式怎么办?

4.1 指定加载的图片仅为静态图片

Glide.with(this)
     .load(url)
     .asBitmap()//设置只允许加载静态图片,如果uri是gif就显示第一帧的图片。
     .placeholder(R.drawable.loading)
     .error(R.drawable.error)
     .diskCacheStrategy(DiskCacheStrategy.NONE)
     .into(imageView);

效果如下:

指定加载的图片仅为静态图片.gif

4.3 指定加载的图片仅为gif动态图片

Glide.with(this)
     .load(url)
     .asGif()//设置只允许加载gif图片,如果uri是静态图片就显示error的占位图。
     .placeholder(R.drawable.loading)
     .error(R.drawable.error)
     .diskCacheStrategy(DiskCacheStrategy.NONE)
     .into(imageView);

效果如下:

指定加载的图片仅为gif动态图片.gif

指定图片大小

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

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

而使用Glide,我们完全不需要担心图片内存浪费。因为Glide会自动判断ImageView控件的大小,然后对图片进行压缩,再显示到ImageView上的。

硬要设置图片的大小也是可以的。

设置图片的大小实现

Glide.with(this)
     .load(url)
     .placeholder(R.drawable.loading)
     .error(R.drawable.error)
     .diskCacheStrategy(DiskCacheStrategy.NONE)
     .override(100, 100)//将图片加载成100*100像素的尺寸
     .into(imageView);

效果如下:

设置图片的大小.gif

参考博客:
http://blog.csdn.net/guolin_blog/article/details/53759439?utm_source=tuicool&utm_medium=referral

上一篇下一篇

猜你喜欢

热点阅读