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 )       .load( "http://nuuneoi.com/uploads/source/playstore/cover.jpg" )       .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 );

}