Glide動態加載圓形圖片和圓角圖片

最新消息，鼎鼎大名的Yelp應用也轉投Glide的陣營了，而且Glide在跟Listview的配合起來非常的順暢，Glide除了配置簡單，還可以本地緩存圖片，也可以實現Listview圖片的提前預加載，使得listview的更加的順滑，具體可以查看Yelp的那篇博文。

但是如果碰到要把加載下來的圖片轉成圓角或者圓形的圖片，怎麼處理呢，Glide原生沒有這個方法，於是我拓展了BitmapTransformation來實現這個功能。

請先看效果圖：

Glide是默認本地存儲的，但重複加載的時候，是不需要重複訪問網絡。

下載的圖片轉圓形的方法

public class GlideCircleTransform extends BitmapTransformation {
    public GlideCircleTransform(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();
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37

自定義一個extend BitmapTransformation的方法，把獲得的bitmap轉化成圓形圖片，下面是使用方法

private RequestManager glideRequest;
glideRequest = Glide.with(this);
glideRequest.load("https://www.baidu.com/img/bdlogo.png").transform(new GlideCircleTransform(context)).into(imageView);

• 1
• 2
• 3

• 1
• 2
• 3

這裏不得不強調下Glide的一個強大的功能，當你在With後面的傳Activity或者Fragment，Glide就可以根據當前Activity或者Fragment的生命週期維護圖片的生命週期，比如但activity銷燬的時候，就會自動取消需要加載的圖片

下載圖片轉換層圓角圖片的方法

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);
        this.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);
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39

在這個方法裏面，你可以自定義圓角的大小，使用方式也非常簡單

glideRequest.load("https://www.baidu.com/img/bdlogo.png").transform(new GlideRoundTransform(context)).into(imageView);

glideRequest.load("https://www.baidu.com/img/bdlogo.png").transform(new GlideRoundTransform(context, 10)).into(imageView);

• 1
• 2
• 3

• 1
• 2
• 3

Glide的詳細的使用方法可以參考官方的文檔，這裏是作爲加載圖片效果的一個補充，一人覺得目前Glide已經很成熟了，可以考慮應用到實際的項目中去，目前還有一個很強大的圖片加載框架，叫做Fresco，Facebook開發的，star的數量是超過Glide的，不過本人還是傾向於使用Glide，基本上Glide已經可以滿足我所有的功能，再加上圖片的圓角處理這裏也實現了，至於Fresco個人感覺偏複雜了點，還是Glide使用起來比較輕便，故推薦Glide。

這個文章的源碼我也放出來了，可以點擊這個鏈接查看

(function () { ('pre.prettyprint code').each(function () { var lines = (this).text().split(′\n′).length;var numbering = $('

').addClass('pre-numbering').hide(); (this).addClass(′has−numbering′).parent().append( numbering); for (i = 1; i