Glide网络加载图片框架使用教程

 compile 'com.github.bumptech.glide:glide:3.7.0'//加载网络图片使用glide

      Glide,和Picasso很相似,可以从各种图片来源加载和显示图片,并且很好的支持缓存。同时，它在对图片操作时，只占用很少的内存。Glide已经被谷歌官方的应用程序所使用(如2015年的 Google I / O的应用程序)，同时，它和Picasso一样受到Android应用开发者的欢迎。

一、首先

在项目的build.gradle中导入，Gidle架包。

<code class="hljs xml has-numbering"><span class="hljs-tag"><span class="hljs-title">dependenc{
<span style="font-size:18px;"> <span style="color:#FF6666;">compile 'com.github.bumptech.glide:glide:3.7.0'//加载网络图片使用glide</span></span>
}
二、
</span></span></code><h2 id="简单使用从url中加载图片">简单使用，从URL中加载图片</h2><p>和Picasso一样,Glide也使用流式的接口。Glide 至少需要三个参数构造一个完整的图片加载请求:</p><ul><li>with(Context context) - 上下文环境</li><li>load(String imageUrl) - 需要加载图片的URL.</li><li>into(ImageView targetImageView) - 图片显示的ImageView.</li></ul>

（）下面是最简单加载网络图片的用法：

<code class="hljs avrasm has-numbering">ImageView targetImageView = (ImageView) findViewById(R<span class="hljs-preprocessor">.id</span><span class="hljs-preprocessor">.imageView</span>)<span class="hljs-comment">;</span>
String internetUrl = <span class="hljs-string">"http://i.imgur.com/DvpvklR.png"</span><span class="hljs-comment">;</span>
Glide
    <span class="hljs-preprocessor">.with</span>(context)
    <span class="hljs-preprocessor">.load</span>(internetUrl)
    <span class="hljs-preprocessor">.into</span>(targetImageView)<span class="hljs-comment">;

</span></code><h2 id="从其他源加载图片">从其他源加载图片</h2><p>1、从资源文件中加载：</p><p><pre class="prettyprint" name="code"><code class="hljs avrasm has-numbering">int resourceId = R<span class="hljs-preprocessor">.mipmap</span><span class="hljs-preprocessor">.ic</span>_launcher<span class="hljs-comment">;</span>

Glide
    <span class="hljs-preprocessor">.with</span>(context)
    <span class="hljs-preprocessor">.load</span>(resourceId)
    <span class="hljs-preprocessor">.into</span>(imageViewResource)<span class="hljs-comment">;</span></code>

2、从文件中加载图片：

<code class="hljs vhdl has-numbering"><span class="hljs-keyword">File</span> <span class="hljs-keyword">file</span> = <span class="hljs-keyword">new</span> <span class="hljs-keyword">File</span>(Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES), <span class="hljs-string">"Running.jpg"</span>);

Glide
    .<span class="hljs-keyword">with</span>(<span class="hljs-keyword">context</span>)
    .load(<span class="hljs-keyword">file</span>)
    .into(imageViewFile);</code>

3、从URI中加载图片：

<code class="hljs avrasm has-numbering">Uri uri = resourceIdToUri(context, R<span class="hljs-preprocessor">.mipmap</span><span class="hljs-preprocessor">.future</span>_studio_launcher)<span class="hljs-comment">;</span>

Glide
    <span class="hljs-preprocessor">.with</span>(context)
    <span class="hljs-preprocessor">.load</span>(uri)
    <span class="hljs-preprocessor">.into</span>(imageViewUri)<span class="hljs-comment">;</span></code>

四、

占位图，错误图，和淡入淡出效果

<code class="hljs avrasm has-numbering">Glide
    <span class="hljs-preprocessor">.with</span>(context)
    <span class="hljs-preprocessor">.load</span>(UsageExampleListViewAdapter<span class="hljs-preprocessor">.eatFoodyImages</span>[<span class="hljs-number">0</span>])
    <span class="hljs-preprocessor">.placeholder</span>(R<span class="hljs-preprocessor">.mipmap</span><span class="hljs-preprocessor">.ic</span>_launcher) //设置占位图
    <span class="hljs-preprocessor">.error</span>(R<span class="hljs-preprocessor">.mipmap</span><span class="hljs-preprocessor">.future</span>_studio_launcher) //设置错误图片
    <span class="hljs-preprocessor">.crossFade</span>() //设置淡入淡出效果，默认<span class="hljs-number">300</span>ms，可以传参
    //<span class="hljs-preprocessor">.dontAnimate</span>() //不显示动画效果
    <span class="hljs-preprocessor">.into</span>(imageViewFade)<span class="hljs-comment">;</span></code>

设置图片大小和缩放形式

<code class="hljs sql has-numbering">Glide
    .with(context)
    .<span class="hljs-operator"><span class="hljs-keyword">load</span>(UsageExampleListViewAdapter.eatFoodyImages[<span class="hljs-number">0</span>])
    .override(<span class="hljs-number">600</span>, <span class="hljs-number">200</span>) //设置加载资源图片的像素宽高。
    .<span class="hljs-keyword">into</span>(imageViewResize);
</span></code><p>当不知道ImageView的大小的时候，这个选项是非常有用的，我们可以设置需要加载的图片尺寸。</p><p>Glide支持两种图片缩放形式，CenterCrop 和 FitCenter 
CenterCrop：等比例缩放图片，直到图片的狂高都大于等于ImageView的宽度，然后截取中间的显示。</p><p><span style="color:#FF6666;">
</span></p><p><span style="color:#FF6666;">1、FitCenter：等比例缩放图片，宽或者是高等于ImageView的宽或者是高。</span></p><p><pre class="prettyprint" name="code"><code class="hljs avrasm has-numbering">Glide
    <span class="hljs-preprocessor">.with</span>(context)
    <span class="hljs-preprocessor">.load</span>(UsageExampleListViewAdapter<span class="hljs-preprocessor">.eatFoodyImages</span>[<span class="hljs-number">0</span>])
    <span class="hljs-preprocessor">.override</span>(<span class="hljs-number">600</span>, <span class="hljs-number">200</span>)
    <span class="hljs-preprocessor">.fitCenter</span>() 
    <span class="hljs-preprocessor">.into</span>(imageViewResizeFitCenter)<span class="hljs-comment">;
2、CenterCrop：等比例缩放图片，直到图片的狂高都大于等于ImageView的宽度，然后截取中间的显示。

</span></code><pre class="prettyprint" name="code"><code class="hljs avrasm has-numbering">Glide
    <span class="hljs-preprocessor">.with</span>(context)
    <span class="hljs-preprocessor">.load</span>(UsageExampleListViewAdapter<span class="hljs-preprocessor">.eatFoodyImages</span>[<span class="hljs-number">0</span>])
    <span class="hljs-preprocessor">.override</span>(<span class="hljs-number">600</span>, <span class="hljs-number">200</span>) // resizes the image to these dimensions (<span class="hljs-keyword">in</span> pixel)
    <span class="hljs-preprocessor">.centerCrop</span>() // this cropping technique scales the image so that it fills the requested bounds <span class="hljs-keyword">and</span> then crops the extra.
    <span class="hljs-preprocessor">.into</span>(imageViewResizeCenterCrop)<span class="hljs-comment">;
</span></code><h2 id="加载gif和视频文件">加载GIF和视频文件</h2>Fresco支持加载GIF，并且使用的方式和加载图片一样：
<pre class="prettyprint" name="code"><code class="hljs avrasm has-numbering">String gifUrl = <span class="hljs-string">"http://i.kinja-img.com/gawker-media/image/upload/s--B7tUiM5l--/gf2r69yorbdesguga10i.gif"</span><span class="hljs-comment">;</span>
Glide  
    <span class="hljs-preprocessor">.with</span>( context )
    <span class="hljs-preprocessor">.load</span>( gifUrl )
    <span class="hljs-preprocessor">.asGif</span>()
    <span class="hljs-preprocessor">.error</span>( R<span class="hljs-preprocessor">.drawable</span><span class="hljs-preprocessor">.full</span>_cake )
    <span class="hljs-preprocessor">.into</span>( imageViewGif )<span class="hljs-comment">;</span></code>

Glide可以加载视频的缩略图：

<code class="hljs vhdl has-numbering"><span class="hljs-typename">String</span> filePath = <span class="hljs-string">"/storage/emulated/0/Pictures/example_video.mp4"</span>;

Glide  
    .<span class="hljs-keyword">with</span>( <span class="hljs-keyword">context</span> )
    .load( Uri.fromFile( <span class="hljs-keyword">new</span> <span class="hljs-keyword">File</span>( filePath ) ) )
    .into( imageViewGifAsBitmap );</code>

Glide缓存策略

Glide默认开启磁盘缓存和内存缓存，当然也可以对单张图片进行设置特定的缓存策略。
1、设置图片不加入到内存缓存

<code class="hljs sql has-numbering">Glide  
    .with( context )
    .<span class="hljs-operator"><span class="hljs-keyword">load</span>( eatFoodyImages[<span class="hljs-number">0</span>] )
    .skipMemoryCache( <span class="hljs-keyword">true</span> )
    .<span class="hljs-keyword">into</span>( imageViewInternet );
2、设置图片不加入到磁盘缓存
</span></code><pre class="prettyprint" name="code"><code class="hljs avrasm has-numbering">Glide  
    <span class="hljs-preprocessor">.with</span>( context )
    <span class="hljs-preprocessor">.load</span>( eatFoodyImages[<span class="hljs-number">0</span>] )
    <span class="hljs-preprocessor">.diskCacheStrategy</span>( DiskCacheStrategy<span class="hljs-preprocessor">.NONE</span> )
    <span class="hljs-preprocessor">.into</span>( imageViewInternet )
3、Glide支持多种磁盘缓存策略</code><ul><li>DiskCacheStrategy.NONE :不缓存图片</li><li>DiskCacheStrategy.SOURCE :缓存图片源文件</li><li>DiskCacheStrategy.RESULT:缓存修改过的图片</li><li>DiskCacheStrategy.ALL:缓存所有的图片，默认</li></ul><p><h2 id="图片加载优先级">图片加载优先级</h2>Glide支持为图片加载设置优先级，优先级高的先加载，优先级低的后加载：</p><p><pre class="prettyprint" name="code"><code class="hljs avrasm has-numbering">private void loadImageWithHighPriority() {  
    Glide
        <span class="hljs-preprocessor">.with</span>( context )
        <span class="hljs-preprocessor">.load</span>( UsageExampleListViewAdapter<span class="hljs-preprocessor">.eatFoodyImages</span>[<span class="hljs-number">0</span>] )
        <span class="hljs-preprocessor">.priority</span>( Priority<span class="hljs-preprocessor">.HIGH</span> )
        <span class="hljs-preprocessor">.into</span>( imageViewHero )<span class="hljs-comment">;</span>
}

private void loadImagesWithLowPriority() {  
    Glide
        <span class="hljs-preprocessor">.with</span>( context )
        <span class="hljs-preprocessor">.load</span>( UsageExampleListViewAdapter<span class="hljs-preprocessor">.eatFoodyImages</span>[<span class="hljs-number">1</span>] )
        <span class="hljs-preprocessor">.priority</span>( Priority<span class="hljs-preprocessor">.LOW</span> )
        <span class="hljs-preprocessor">.into</span>( imageViewLowPrioLeft )<span class="hljs-comment">;</span>

    Glide
        <span class="hljs-preprocessor">.with</span>( context )
        <span class="hljs-preprocessor">.load</span>( UsageExampleListViewAdapter<span class="hljs-preprocessor">.eatFoodyImages</span>[<span class="hljs-number">2</span>] )
        <span class="hljs-preprocessor">.priority</span>( Priority<span class="hljs-preprocessor">.LOW</span> )
        <span class="hljs-preprocessor">.into</span>( imageViewLowPrioRight )<span class="hljs-comment">;</span>
}</code>

Glide获取Bitmap

Glide通过Target的回调获取Bitmap，最常用的是SimpleTarget：

<code class="hljs cs has-numbering"><span class="hljs-keyword">private</span> SimpleTarget target = <span class="hljs-keyword">new</span> SimpleTarget<Bitmap>() {  
    @Override
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onResourceReady</span>(Bitmap bitmap, GlideAnimation glideAnimation) {
        <span class="hljs-comment">// do something with the bitmap</span>
        <span class="hljs-comment">// for demonstration purposes, let's just set it to an ImageView</span>
        imageView1.setImageBitmap( bitmap );
    }
};

<span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">loadImageSimpleTarget</span>() {  
    Glide
        .with( context ) <span class="hljs-comment">// could be an issue!</span>
        .load( eatFoodyImages[<span class="hljs-number">0</span>] )
        .asBitmap()
        .<span class="hljs-keyword">into</span>( target );
}</code>

设置Bitmap的大小：

<code class="hljs cs has-numbering"><span class="hljs-keyword">private</span> SimpleTarget target2 = <span class="hljs-keyword">new</span> SimpleTarget<Bitmap>( <span class="hljs-number">250</span>, <span class="hljs-number">250</span> ) {  
    @Override
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onResourceReady</span>(Bitmap bitmap, GlideAnimation glideAnimation) {
        imageView2.setImageBitmap( bitmap );
    }
};

<span class="hljs-keyword">private</span> <span class="hljs-keyword">void</span> <span class="hljs-title">loadImageSimpleTargetApplicationContext</span>() {  
    Glide
        .with( context.getApplicationContext() ) <span class="hljs-comment">// safer!</span>
        .load( eatFoodyImages[<span class="hljs-number">1</span>] )
        .asBitmap()
        .<span class="hljs-keyword">into</span>( target2 );
}</code>