聊聊Android優秀的圖片加載緩存的開源框架？UIL、Glide、Picasso

今天總結下有關Android的圖片開源框架UIL、Glide、Picasso、固然不止這些還有okhttp、xutlis、afinal、andbase、volley等等，今天主要是對於Glide使用進行總結。

Glide是谷歌推薦使用的加載圖片的框架，它相對於其餘的框架有更多的有點，說到Glide咱們不得不談談Picasso,爲何呢？這是由於Picasso的使用與Glide的使用上很是的類似，可是細細看，有明顯不一樣，首先咱們看下Picasso與Glide的基本用法？

Picasso:            

1   Picasso.with(this)
2                 .load(url)//加載圖片
3                 .placeholder(R.mipmap.ic_launcher)//正在加載時的圖片
4                 .error(R.mipmap.ic_launcher)//加載錯誤是的圖片
5                 .into(glide_image2);

Glide:

1  Glide.with(this)
2                 .load(url)//加載圖片
3                 .placeholder(R.mipmap.ic_launcher)//正在加載時的圖片
4                 .error(R.mipmap.ic_launcher)//加載錯誤是的圖片
5                 .into(glide_image);

一、看到沒有，是否是同樣呢，基本上它們的用法一直，可是咱們在使用Glide時須要注意，Glide.with(this),咱們在傳入的時候，我建議傳入Actitiy,Fragment對應得context,而不是全局的context,爲何呢，這是由於這樣咱們可讓Gilde加載圖片與咱們的Activity，Fragment的生命週期一直，建立時去加載，銷燬時中止加載，

二、Glide的加載速度比Picasso的加載速度要快，可是消耗的內存要比Picasso的內存高，爲何呢這是由於Gilde他是根據你傳入的尺寸進行緩存，若是倆個地方須要      全尺寸緩存，另外一個地方按照比例緩存，那麼Glide須要緩存倆次，而Picsso是全尺寸的緩存，每當從新加載時，須要從新繪製

 1  /**
 2      * Glide的全尺寸緩存
 3      */
 4     public void GlideImage3(String url) {
 5         Glide.with(this)
 6                 .load(url)//加載圖片
 7                 .placeholder(R.mipmap.ic_launcher)//正在加載時的圖片
 8                 .error(R.mipmap.ic_launcher)//加載錯誤是的圖片
 9                 .diskCacheStrategy(DiskCacheStrategy.ALL)
10                 .into(glide_image);
11     }

 

3，Picasso加載的bitmap格式ARGB_8888而Glide所加載的bitmap格式ARGB_565固然咱們能夠經過實現GlideMenu來實現

 1 /**
 2  * 更改Glide的bitmap的格式爲ARGB_8888
 3  * Created by joe.xiang on 2016/6/9.
 4  */
 5 public class GlideConfigration implements GlideModule {
 6 
 7 
 8     @Override
 9     public void applyOptions(Context context, GlideBuilder builder) {
10         builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
11     }
12 
13     @Override
14     public void registerComponents(Context context, Glide glide) {
15 
16     }
17 }

 

四、Glide的setTag方法不一樣之處？

   咱們能夠經過在咱們的values下創建一個ids的xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <item name="image_tag" type="id"/>
</resources>

經過Image.setTag(R.id.image_tag,url)的形式來進行設置

 

 

五、Glide如何設置圓形圖片

    對於如何製做圓形的方法，有不少能夠經過自定義ImageView，固然Glide也給咱們提供了不少的方法來時圓角圖片。通常有一下方法

    一、自定一個Transform 繼承 BitmapTransformation

 1 /**
 2  * Created by joe.xiang on 2016/6/9.
 3  */
 4 public  class CircleTransform extends BitmapTransformation {
 5 
 6     public CircleTransform(Context context) {
 7         super(context);
 8     }
 9 
10     @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
11         return circleCrop(pool, toTransform);
12     }
13 
14     private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
15         if (source == null) return null;
16         int size = Math.min(source.getWidth(), source.getHeight());
17         int x = (source.getWidth() - size) / 2;
18         int y = (source.getHeight() - size) / 2;
19 
20         // TODO this could be acquired from the pool too
21         Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);
22         Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
23         if (result == null) {
24             result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
25         }
26         Canvas canvas = new Canvas(result);
27         Paint paint = new Paint();
28         paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
29         paint.setAntiAlias(true);
30         float r = size / 2f;
31         canvas.drawCircle(r, r, r, paint);
32         return result;
33     }
34 
35     @Override public String getId() {
36         return getClass().getName();
37     }
38 }

 1   /**
 2      * 經過Glide的TransForMation 自定義圓形圖片的bitmap
 3      */
 4     public void RoundImage(String url) {
 5         Glide.with(this)
 6                 .load(url)
 7                 .asBitmap()
 8                 .transform(new CircleTransform(this))
 9                 .into(glide_image5);
10     }

 

 二、咱們能夠經過BitmapImageVieTarget，來獲得一個帶圓角的RoundBitmapDrawable；

 1  /**
 2      * 經過RoundBitmapDrawable
 3      */
 4     public void RoundImage2(String url) {
 5         Glide.with(this)
 6                 .load(url)
 7                 .asBitmap()
 8                 .into(new BitmapImageViewTarget(glide_image6) {
 9                     @Override
10                     protected void setResource(Bitmap resource) {
11                         RoundedBitmapDrawable RoundedBitmapDrawable = RoundedBitmapDrawableFactory.create(Glide_1.this.getResources(), resource);
12                         RoundedBitmapDrawable.setCircular(true);
13                         glide_image6.setImageDrawable(RoundedBitmapDrawable);
14                     }
15                 });
16     

三、咱們能夠經過自定義RoundedCornerLayout 繼承RelavityLayout來實現圓角圖片效果

 1 **
 2  * Created by joe.xiang on 2016/6/9.
 3  */
 4 public class RoundedCornerLayout  extends RelativeLayout {
 5     private Bitmap maskBitmap;
 6     private Paint paint;
 7     private float cornerRadius;
 8 
 9     public RoundedCornerLayout(Context context) {
10         super(context);
11         init(context, null, 0);
12     }
13 
14     public RoundedCornerLayout(Context context, AttributeSet attrs) {
15         super(context, attrs);
16         init(context, attrs, 0);
17     }
18 
19     public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyle) {
20         super(context, attrs, defStyle);
21         init(context, attrs, defStyle);
22     }
23 
24     private void init(Context context, AttributeSet attrs, int defStyle) {
25         paint = new Paint(Paint.ANTI_ALIAS_FLAG);
26 
27         setWillNotDraw(false);
28     }
29 
30     @Override
31     public void draw(Canvas canvas) {
32         super.draw(canvas);
33 
34         if (maskBitmap == null) {
35             // This corner radius assumes the image width == height and you want it to be circular
36             // Otherwise, customize the radius as needed
37             cornerRadius = canvas.getWidth() / 2;
38             maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
39         }
40 
41         canvas.drawBitmap(maskBitmap, 0f, 0f, paint);
42     }
43 
44     private Bitmap createMask(int width, int height) {
45         Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
46         Canvas canvas = new Canvas(mask);
47 
48         Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
49         paint.setColor(Color.WHITE); // TODO set your background color as needed
50 
51         canvas.drawRect(0, 0, width, height, paint);
52 
53         paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
54         canvas.drawRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, paint);
55         return mask;
56     }
57 }

 1   <huanxin.exmaple.com.android_glidedemo.RoundedCornerLayout
 2                    android:layout_width="200dp"
 3                    android:layout_height="200dp">
 4                        <ImageView
 5                            android:id="@+id/glide_image7"
 6                            android:layout_width="200dp"
 7                            android:layout_height="200dp"
 8                            android:scaleType="centerCrop"
 9                            />
10  </huanxin.exmaple.com.android_glidedemo.RoundedCornerLayout>

使用上跟通常使用沒什麼區別。。。。。

4 、固然咱們亦可使用開源的圓角圖片的自定義控件？

1   Glide.with(this).load(url).into(new SimpleTarget<GlideDrawable>() {
2              @Override
3              public void onResourceReady(GlideDrawable resource, GlideAnimation<? super GlideDrawable> glideAnimation) {
4                  //使用自定義的圓角圖片
5              }
6          });

對於Glide加載圖片還有不少能夠去研究的地方，它還能夠加載gif的動態圖，不過這個方法要謹慎使用，由於這個很是耗內存，對於Glide的使用花了一個下午對於他的一些基本使用就總結致使，過段時間深刻研究後在總結了、一下附上加載的圖片效果圖。