Android development: Uses Glide to dynamically load circular images and rounded images,

Android development: Uses Glide to dynamically load circular images and rounded images,

According to the latest news, the famous Yelp application has also moved to the Glide camp. Besides, Glide works smoothly with Listview, Glide can cache images locally in addition to simple configuration, you can also pre-load the Listview image in advance to make the listview smoother. For details, see the blog post of Yelp.

However, if you want to convert the loaded image to a rounded or circular image, Glide does not use this method in the native mode. Therefore, I expanded BitmapTransformation to implement this function.

First look:

Glide is locally stored by default, but the network does not need to be accessed repeatedly during repeated loading.

How to round the downloaded Image

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();    }}

Customize an extend BitmapTransformation method to convert the obtained bitmap to a circular image. The following describes how to use

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

Here, we have to emphasize a powerful function of Glide. When you upload Activity or Fragment after With, Glide can maintain the image life cycle according to the current Activity or Fragment life cycle, for example, when the activity is destroyed, the image to be loaded is automatically canceled.

How to download the rounded corner image of an image Conversion Layer

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

In this method, you can customize the size of the rounded corner.

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);

For details about how to use Glide, refer to the official documentation. Here is a supplement to the image loading effect. One person thinks Glide is very mature, it can be applied to actual projects. There is also a powerful image loading framework called Fresco, developed by Facebook. The number of stars exceeds Glide, however, I am still inclined to use Glide. Basically, Glide can satisfy all of my functions, and the processing of slice rounded corners is also implemented here. As for Fresco, I personally feel a little complicated, glide is still relatively lightweight to use, so Glide is recommended.

I have also released the source code of this article. You can click this link to view it.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.