Glide的初步了解(一)

从网上看了好多关于Glide的文章,自己总结归纳梳理了一下。


使用Android Glide,需要先下载Android Glide的库,Android Glide在github上的项目主页:

https://github.com/bumptech/glide 。

实际的项目使用只需要到Glide的releases页面把jar包下载后导入到本地的libs里面即可直接使用。Glide的releases的页面地址: https://github.com/bumptech/glide/releases  ,在此页面找到最新的jar包,下载后放到自己项目的libs中,比如glide 3.6.0库的jar包下载地址: https://github.com/bumptech/glide/releases/download/v3.6.0/glide-3.6.0.jar


:简单使用

注意:别忘了加联网权限。。。。(不加权限也能运行,不报错,所以别忘了!!)

Glide.with(context).load(url,本地资源,uri都行).into(imageview)

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

动态的GIF图片加载:

Glide.with(context).load(...).asBitmap() //显示gif静态图片
Glide.with(context).load(...).asGif() //显示gif动态图片

本地视频快照:

Glide现在还可以把视频解码为一张图片:
[code]Glide.with(context).load(“视频路径“)
(经过测试,只能把手机本地的mp4视频解析为一张图片,把mp4文件放在raw文件中,不能解析)

对缩略图的支持:

//加载yourView 图片的1/10尺寸作为缩略图,然后加载全图
Glide.with(yourFragment).load(yourUrl).thumbnail(0.1f).into(yourView)

生命周期集成

同时将Activity/Fragment作为 with()参数 的好处是:图片加载会和Activity/Fragment的生命周期保持一致, 请求会在onStop的时候自动暂停,
在onStart的时候重新启动,gif的动画也会在onStop的时候停止,以免在后台消耗电量



图片缓存问题(1)

在第一个页面有一个200x200的ImageView,在第二个页面有一个100x100的ImageView,这两个ImageView本来是要显示同一张图片,却需要下载两次。

不过,你可以改变这种行为,让Glide既缓存全尺寸又缓存其他尺寸:

1
2
3
4
Glide. with ( this )
      .diskCacheStrategy(DiskCacheStrategy.ALL)
      .into(ivImgGlide);

下次在任何ImageView中加载图片的时候,全尺寸的图片将从缓存中取出,重新调整大小,然后缓存。

特性

你可以做到几乎和Picasso一样多的事情,代码也几乎一样。

Image Resizing//.override(300, 200)在图片显示到 ImageView之前重新改变图片大小。

1
2
3
4
5
// Picasso
.resize(300, 200);
  
// Glide
.override(300, 200);

Center Cropping//图片去两边,留中间,且图片填满控件

1
2
3
4
5
// Picasso
.centerCrop();
  
// Glide
.centerCrop();
在Glide中还有另一种缩放裁剪方法 fitCenter(),缩放图像让图像都测量出来等于或小于 ImageView 的边界范围。该图像将会完全显示,但可能不会填满整个 ImageView


Transforming(在后面的博客中会具体介绍)

1
2
3
4
5
// Picasso
.transform( new  CircleTransform())
  
// Glide
.transform( new  CircleTransform(context))

设置占位图或者加载错误图:

1
2
3
4
5
6
7
// Picasso
.placeholder(R.drawable.placeholder)
.error(R.drawable.imagenotfound)
  
// Glide
.placeholder(R.drawable.placeholder)
.error(R.drawable.imagenotfound)

淡入淡出动画(默认就有):

Glide.with(context)  

.load(UsageExampleListViewAdapter.eatFoodyImages[0])  

.placeholder(R.mipmap.ic_launcher) // 占位图  

.error(R.mipmap.future_studio_launcher) // 加载错误图  

.crossFade() //标准的淡入淡出动画,默认激活的

.into(imageViewFade);


还有另外重载方法 .crossFade(int duration)。如果你想要去减慢(或加快)动画,随时可以传一个毫秒的时间给这个方法。动画默认的持续时间是 300毫秒。

没有淡入淡出效果:.dontAnimate()

Glide.with(context)  

.load(UsageExampleListViewAdapter.eatFoodyImages[0])  

.placeholder(R.mipmap.ic_launcher) // 占位图  

.error(R.mipmap.future_studio_launcher) // 加载错误图  

.dontAnimate()

.into(imageViewFade);


Glide比picasso强的地方!!!!!可以加载动态图片

相同的调用方式:

<code class="hljs sql has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">String gifUrl = "http://i.kinja-img.com/gawker-media/image/upload/s<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">--B7tUiM5l--/gf2r69yorbdesguga10i.gif";</span>
Glide  
    .with( context )
    .<span class="hljs-operator" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">load</span>( gifUrl )
    .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">into</span>( imageViewGif );</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

你仍然可以调用处理这个 Gif:

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">Glide  
    <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.with</span>( context )
    <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.load</span>( gifUrl )
    <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.placeholder</span>( R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.drawable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.cupcake</span> )
    <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.error</span>( R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.drawable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.full</span>_cake )
    <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.into</span>( imageViewGif )<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

Gif 检查

如果提供的来源不是一个 Gif,只是一个常规图片,你期望 URL 是一个 Gif,但是Glide 不会自动检查是否是 Gif。因此他们引入了一个额外的防御机制.asGif():

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">Glide  
    <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.with</span>( context )
    <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.load</span>( gifUrl )
    <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.asGif</span>()
    <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.error</span>( R<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.drawable</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.full</span>_cake )
    <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.into</span>( imageViewGif )<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li></ul>

如果 gifUrl 是一个 git,这没什么变化。 
如果这个 gifUrl 不是一个 Gif,Glide 将会把这个 load 当成失败处理,加载.error(R.drawable.full_cake)图片

Gif 转为 Bitmap

如果你的 App 显示一个位置的网络 URL 列表,它可能遇到常规的图片或者 Gif。如果你仅仅想要显示 Gif 的第一帧,你可以调用 asBitmap() 去保证其作为一个常规的图片显示,即使这个 URL 是一个 Gif。

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">Glide  
    <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.with</span>( context )
    <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.load</span>( gifUrl )
    <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.asBitmap</span>()
    <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.into</span>( imageViewGifAsBitmap )<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

这让你用 Glide 显示所有已知的 url 显示为图片的形式。

显示本地视频

现在来谈谈视频。Glide 还能显示视频!只要他们是存储在手机上的。让我们假设你通过让用户选择一个视频后得到了一个文件路径:

<code class="hljs vhdl has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-typename" style="color: rgb(102, 0, 102); box-sizing: border-box;">String</span> filePath = <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"/storage/emulated/0/Pictures/example_video.mp4"</span>;
Glide  
    .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">with</span>( <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">context</span> )
    .load( Uri.fromFile( <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">new</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">File</span>( filePath ) ) )
    .into( imageViewGifAsBitmap );</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

这里需要注意的是,这仅仅对于本地视频起作用。如果没有存储在该设备上的视频(如一个网络 URL 的视频),它是不工作的!如果你想显示视频从网络 URL,去看看 VideoView


从网络中加载图片到 ImageView,且不缓存到内存

<code class="hljs sql has-numbering" 
style="display: block; 
padding: 0px; 
color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; word-wrap: normal; background: transparent;">Glide  
    .with( context )
    .<span class="hljs-operator" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">load</span>( eatFoodyImages[<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>] )
    .skipMemoryCache( <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span> )
    .<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">into</span>( imageViewInternet );</span></code>

我们调用了 .skipMemoryCache(true) 去明确告诉 Glide 跳过内存缓存。

这意味着 Glide 将不会把这张图片放到内存缓存中去。

这里需要明白的是,这只是会影响内存缓存!Glide 将会仍然利用磁盘缓存来避免重复的网络请求。


从网络中加载图片到 ImageView,且不缓存到内存,也不缓存到磁盘

你可以用 .diskCacheStrategy() 方法为 Glide 改变磁盘缓存的行为

Picasso 仅仅缓存了全尺寸的图像。然而 Glide 缓存了原始图像,全分辨率图像和另外小版本的图像。

比如,如果你请求的一个图像是 1000x1000 像素的,但你的 ImageView 是 500x500 像素的,Glide 将会把这两个尺寸都进行缓存。

  • DiskCacheStrategy.NONE  什么都不缓存
  • DiskCacheStrategy.SOURCE  仅仅只缓存原来的全分辨率的图像。将会只有一个 1000x1000 像素的图片
  • DiskCacheStrategy.RESULT 仅仅缓存最终的图像,即降低分辨率后的(或者是转换后的)
  • DiskCacheStrategy.ALL  缓存所有版本的图像(默认行为)

Glide.with( context )  

.load( eatFoodyImages[0] )  

.diskCacheStrategy( DiskCacheStrategy.NONE )  //不缓存到磁盘

.skipMemoryCache( true ) //不缓存到内存

.into( imageViewInternet );


图片请求的优先级

通常,你会遇到这样的使用场景:你的 App 将会需要在同一时间内加载多个图像。

让我们假设你正在构建一个信息屏幕,这里有一张很大的英雄图片在顶部,还有两个小的,在底部还有一些不那么重要的图片。

对于最好的用户体验来说,应用图片元素是显示要被加载和显示的,然后才是底部不紧急的 ImageView。

Glide 可以用 Priority 枚举来支持你这样的行为,调用 .priority() 方法。

  • Priority.LOW //低
  • Priority.NORMAL //正常
  • Priority.HIGH //高
  • Priority.IMMEDIATE //立即

缩略图

第一种缩略方法.thumbnail()可以先看到一个不清晰的图像,等加载完成后看到清楚的
Glide.with( context )  
.load( UsageExampleGifAndVideos.gifUrl )  
.thumbnail(0.1f )  //0.1f 作为参数,Glide 将会显示原始图像的10%的大小
.into( imageView2 );
你传了一个 0.1f 作为参数,Glide 将会显示原始图像的10%的大小。如果原始图像有 1000x1000 像素,那么缩略图将会有 100x100 像素。因为这个图像将会明显比  ImageView  小很多,你需要确保它的 ScaleType 的设置是正确的。

1. SetScaleType(ImageView.ScaleType.CENTER);

    按图片的原来size居中显示,当图片长/宽超过View的长/宽,则截取图片的居中部分显示

2.SetScaleType(ImageView.ScaleType.CENTER_CROP);

    按比例扩大图片的size居中显示,使得图片长(宽)等于或大于View的长(宽) 

(还有几种,忘了可以自己查一下)

第二种方法:

即使是缩略图,也要先从网络上拿到图片,才能变成缩略图进行展示。所以我们也可以加载本地的一张图片的缩略图。


privatevoidloadImageThumbnailRequest() 

{  

// 一个新的Glide但是不加载,也就是本地的一张图片  

DrawableRequestBuilder<String> thumbnailRequest = Glide.with( context )  

.load( eatFoodyImages[2] );  

// 正常的加载网络图片,缩略图加载上面Glide的本地图  

Glide.with( context )  

.load( UsageExampleGifAndVideos.gifUrl )  

.thumbnail( thumbnailRequest )  

.into( imageView3 );

}










  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值