Android-2

Glide加载圆角图片

2018-05-10  本文已影响99人  请叫我财迷

第一步添加依赖

项目的gradle文件里

compile 'com.github.bumptech.glide:glide:3.6.1'

因为glide不支持直接加载Round Pictures,所有我们需要自定义RoundTransform来继承BitmapTransformation;实现transform方法来绘制圆角效果
代码如下:


public class GlideRoundTransform extends BitmapTransformation {

    private static float radius = 0f;

    public GlideRoundTransform(Context context) {
        this(context, 0);
    }

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

加载时:

Glide.with(LoveBabyApplication.appContext).load(url).dontAnimate().placeholder(placePicRes).error(errorPicRes).transform(new GlideRoundTransform(LoveBabyApplication.appContext,15)).into(view);

其中placePicRes是加载未完成时显示的图片,errorPicRes是加载失败显示的图片。view为显示的ImageView.但此方法有弊端,加载如http://oibgnmnrv.qnssl.com/user_20170927222241_456789_0*0,拍摄出来的图片将压缩失败,不能显示圆角。

后来改进:Glide.with(LoveBabyApplication.appContext).load(url).dontAnimate().placeholder(placePicRes).error(errorPicRes) .transform(new CenterCrop(LoveBabyApplication.appContext),new GlideRoundTransform(LoveBabyApplication.appContext,10)).into(view);

或者引用MultiTransformation:

Glide.with(LoveBabyApplication.appContext).load(url).dontAnimate().placeholder(placePicRes).error(errorPicRes) .transform(new MultiTransformation(new CenterCrop(LoveBabyApplication.appContext),newGlideRoundTransform(LoveBabyApplication.appContext,10))).into(view);

这是因为默认情况下,每个transform()调用,或任何特定转换方法(fitCenter(),centerCrop(),bitmapTransform()etc)的调用都会替换掉之前的变换,如果你想在单次加载中应用多个变换,需使用MultiTransformation类;另请注意,你向MultiTransformation的构造器传入变换参数的顺序,决定了这些变换的应用顺序。如上面的方法中,如果将new MultiTransformation(new CenterCrop(LoveBabyApplication.appContext),new GlideRoundTransform(LoveBabyApplication.appContext,10)))改成new MultiTransformation(new GlideRoundTransform(LoveBabyApplication.appContext,10),new CenterCrop(LoveBabyApplication.appContext)));将显示不出图片。

参考链接:Glide v4 -变换

Glide加载圆形图片和圆角图片

与Glide相关的一些文章:

Google推荐的图片加载库Glide介绍

Glide 系列预览

后续:

因需求改变,需要叫圆角改为8px,也就是4dp时,该方法不起作用了,需要更新

   Glide.with(LoveBabyApplication.appContext)
                .load(url).dontAnimate()
                .placeholder(placePicRes).error(errorPicRes)
                .transform(new CenterCrop(LoveBabyApplication.appContext),new GlideRoundTransform(LoveBabyApplication.appContext,4))
                .diskCacheStrategy(DiskCacheStrategy.SOURCE)
                .crossFade().into(view);
上一篇下一篇

猜你喜欢

热点阅读