Glide使用及加载圆形图片和圆角图片

本文以glide 3.7版本为例

Glide使用

Glide可以说是安卓开发者最常使用的图片加载库。它支持本地图片及网络图片的加载，还支持gif的显示，且API设计灵活易于使用。glide在加载图片列表时，滚动效果平滑流畅，这也是它很突出的特点。

在使用3.7版本加载gif时，如果gif较复杂，显示时有抖动重影问题。实测发现加载gif的效果不如开源库android-gif-drawable

基本使用方法：

Glide
    .with(mContext)
    .load(url)
    .centerCrop()
    .placeholder(R.drawable.loading_spinner)
    .into(imageView);

圆形图片Transformation

需要自定义Transformation，代码如下：

package cn.com.***.opensource.glide;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Matrix;
import android.graphics.Paint;
import com.bumptech.glide.Glide;
import com.bumptech.glide.load.Transformation;
import com.bumptech.glide.load.engine.Resource;
import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
import com.bumptech.glide.load.resource.bitmap.BitmapResource;

public class GlideCircleTransform implements Transformation<Bitmap> {

    private BitmapPool mBitmapPool;

    public GlideCircleTransform(Context context) {
        this(Glide.get(context).getBitmapPool());
    }

    public GlideCircleTransform(BitmapPool pool) {
        this.mBitmapPool = pool;
    }

    @Override
    public Resource<Bitmap> transform(Resource<Bitmap> resource, int outWidth, int outHeight) {
        Bitmap source = resource.get();
        int size = Math.min(source.getWidth(), source.getHeight());

        int width = (source.getWidth() - size) / 2;
        int height = (source.getHeight() - size) / 2;

        Bitmap bitmap = mBitmapPool.get(size, size, Bitmap.Config.ARGB_8888);
        if (bitmap == null) {
            bitmap = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
        }

        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        BitmapShader shader =
                new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
        if (width != 0 || height != 0) {
            // source isn't square, move viewport to center
            Matrix matrix = new Matrix();
            matrix.setTranslate(-width, -height);
            shader.setLocalMatrix(matrix);
        }
        paint.setShader(shader);
        paint.setAntiAlias(true);

        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);

        return BitmapResource.obtain(bitmap, mBitmapPool);
    }

    @Override public String getId() {
        return "CropCircleTransformation()";
    }
}

圆角图片Transformation

package cn.com.iyouqu.opensource.glide;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;

import com.bumptech.glide.load.engine.bitmap_recycle.BitmapPool;
import com.bumptech.glide.load.resource.bitmap.BitmapTransformation;

public class GlideRoundTransform extends BitmapTransformation {
      private static float radius = 0f;
      public GlideRoundTransform(Context context) {
        this(context, 4);
      }
      public GlideRoundTransform(Context context, int dp) {
        super(context);
        radius = Resources.getSystem().getDisplayMetrics().density * dp;
      }
      @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return roundCrop(pool, toTransform);
      }
      private static Bitmap roundCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;
        Bitmap result = pool.get(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
        if (result == null) {
          result = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Bitmap.Config.ARGB_8888);
        }
        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(source, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        RectF rectF = new RectF(0f, 0f, source.getWidth(), source.getHeight());
        canvas.drawRoundRect(rectF, radius, radius, paint);
        return result;
      }
      @Override public String getId() {
        return getClass().getName() + Math.round(radius);
      }
}

该方案相对简单，只能实现四角全部绘制为圆角。可参考开源库https://github.com/wasabeef/glide-transformations的RoundedCornersTransformation方案，可随意设置圆角类型。该库提供了多种自定义形状供学习。

自定义图形调用方式

Glide
    .with(mContext)
    .load(url)
    .centerCrop()
    .placeholder(R.drawable.loading_spinner)
    .bitmapTransform(new GlideCircleTransform(mContext)
    .crossFade().diskCacheStrategy(DiskCacheStrategy.SOURCE)
    .into(imageView);

参考：
https://github.com/bumptech/glide glide
https://github.com/wasabeef/glide-transformations glide自定义图形