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

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

Glide是谷歌推薦使用的加載圖片的框架，它相對於其他的框架有更多的有點，說到Glide我們不得不談談Picasso,為什么呢？這是因為Picasso的使用與Glide的使用上非常的相似，但是細細看，有明顯不同，首先我們看下Picasso與Glide的基本用法？

Picasso:            

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

Glide:

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

1、看到沒有，是不是一樣呢，基本上它們的用法一直，但是我們在使用Glide時需要注意，Glide.with(this),我們在傳入的時候，我建議傳入Actitiy,Fragment對應得context,而不是全局的context,為什么呢，這是因為這樣我們可以讓Gilde加載圖片與我們的Activity，Fragment的生命周期一直，創建時去加載，銷毀時停止加載，

2、Glide的加載速度比Picasso的加載速度要快，但是消耗的內存要比Picasso的內存高，為什么呢這是因為Gilde他是根據你傳入的尺寸進行緩存，如果倆個地方需要      全尺寸緩存，另一個地方按照比例緩存，那么Glide需要緩存倆次，而Picsso是全尺寸的緩存，每當重新加載時，需要重新繪制

 /**
     * Glide的全尺寸緩存
     */
    public void GlideImage3(String url) {
        Glide.with(this)
                .load(url)//加載圖片
                .placeholder(R.mipmap.ic_launcher)//正在加載時的圖片
                .error(R.mipmap.ic_launcher)//加載錯誤是的圖片
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .into(glide_image);
    }

 

3，Picasso加載的bitmap格式ARGB_8888而Glide所加載的bitmap格式ARGB_565當然我們可以通過實現GlideMenu來實現

/**
 * 更改Glide的bitmap的格式為ARGB_8888
 * Created by joe.xiang on 2016/6/9.
 */
public class GlideConfigration implements GlideModule {


    @Override
    public void applyOptions(Context context, GlideBuilder builder) {
        builder.setDecodeFormat(DecodeFormat.PREFER_ARGB_8888);
    }

    @Override
    public void registerComponents(Context context, Glide glide) {

    }
}

 

4、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)的形式來進行設置

 

 

5、Glide如何設置圓形圖片

    對於如何制作圓形的方法，有很多可以通過自定義ImageView，當然Glide也給我們提供了很多的方法來時圓角圖片。一般有一下方法

    1、自定一個Transform 繼承 BitmapTransformation

/**
 * Created by joe.xiang on 2016/6/9.
 */
public  class CircleTransform extends BitmapTransformation {

    public CircleTransform(Context context) {
        super(context);
    }

    @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return circleCrop(pool, toTransform);
    }

    private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;
        int size = Math.min(source.getWidth(), source.getHeight());
        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;

        // TODO this could be acquired from the pool too
        Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);
        Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
        }
        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);
        return result;
    }

    @Override public String getId() {
        return getClass().getName();
    }
}

  /**
     * 通過Glide的TransForMation 自定義圓形圖片的bitmap
     */
    public void RoundImage(String url) {
        Glide.with(this)
                .load(url)
                .asBitmap()
                .transform(new CircleTransform(this))
                .into(glide_image5);
    }

 

 2、我們可以通過BitmapImageVieTarget，來得到一個帶圓角的RoundBitmapDrawable；

 /**
     * 通過RoundBitmapDrawable
     */
    public void RoundImage2(String url) {
        Glide.with(this)
                .load(url)
                .asBitmap()
                .into(new BitmapImageViewTarget(glide_image6) {
                    @Override
                    protected void setResource(Bitmap resource) {
                        RoundedBitmapDrawable RoundedBitmapDrawable = RoundedBitmapDrawableFactory.create(Glide_1.this.getResources(), resource);
                        RoundedBitmapDrawable.setCircular(true);
                        glide_image6.setImageDrawable(RoundedBitmapDrawable);
                    }
                });
    

3、我們可以通過自定義RoundedCornerLayout 繼承RelavityLayout來實現圓角圖片效果

**
 * Created by joe.xiang on 2016/6/9.
 */
public class RoundedCornerLayout  extends RelativeLayout {
    private Bitmap maskBitmap;
    private Paint paint;
    private float cornerRadius;

    public RoundedCornerLayout(Context context) {
        super(context);
        init(context, null, 0);
    }

    public RoundedCornerLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);

        setWillNotDraw(false);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        if (maskBitmap == null) {
            // This corner radius assumes the image width == height and you want it to be circular
            // Otherwise, customize the radius as needed
            cornerRadius = canvas.getWidth() / 2;
            maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
        }

        canvas.drawBitmap(maskBitmap, 0f, 0f, paint);
    }

    private Bitmap createMask(int width, int height) {
        Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(mask);

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.WHITE); // TODO set your background color as needed

        canvas.drawRect(0, 0, width, height, paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        canvas.drawRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, paint);
        return mask;
    }
}

  <huanxin.exmaple.com.android_glidedemo.RoundedCornerLayout
                   android:layout_width="200dp"
                   android:layout_height="200dp">
                       <ImageView
                           android:id="@+id/glide_image7"
                           android:layout_width="200dp"
                           android:layout_height="200dp"
                           android:scaleType="centerCrop"
                           />
 </huanxin.exmaple.com.android_glidedemo.RoundedCornerLayout>

使用上跟一般使用沒什么區別。。。。。

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

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

對於Glide加載圖片還有很多可以去研究的地方，它還可以加載gif的動態圖，不過這個方法要謹慎使用，因為這個非常耗內存，對於Glide的使用花了一個下午對於他的一些基本使用就總結導致，過段時間深入研究后在總結了、一下附上加載的圖片效果圖。