Glide 中 centerCrop() 与 .transform() 共用问题(包括 4.0.0 以上解决方法)

问题

当我们在显示一张图片的时候,想让他等比例缩放到ImageView的大小,又想这张图片实现矩形圆角。

我们一开始会想到这么设置:

.transform(new GlideRoundImage(getActivity()))
.centerCrop()

But,这样设置后,图片只有centerCrop效果,却没有矩形圆角效果。如图:
这里写图片描述

但是这并不是我们想要的效果,然后会想着去掉centerCrop看看是怎样的:

.transform(new GlideRoundImage(getActivity()))

结果却是这样的,没错! 图片并没有按比例缩放.。如图:
这里写图片描述

原因

看centerCrop()方法的源码可知,也是需要调用transform()方法的。所以前后共用CenterCrop会覆盖掉GlideRoundImage的效果。

public BitmapRequestBuilder<ModelType, TranscodeType> centerCrop() {
        return transform(glide.getBitmapCenterCrop());
    }

解决方法:

.transform(new CenterCrop(getActivity()),new GlideRoundImage(getActivity()))

2个效果同时放在transform里面就可以解决问题了,效果图:
这里写图片描述

Glide 4.0.0以上解决方法

将圆角矩形GlideRoundImage中的transform方法改成如下即可,意思就是先将bitmap转换成带centerCrop属性的bitmap,然后再转换成圆角。如下:

    @Override
    protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        Bitmap bitmap = TransformationUtils.centerCrop(pool, toTransform, outWidth, outHeight);
        return roundCrop(pool, bitmap);
    }

代码中使用:

        RequestOptions myOptions = new RequestOptions().transform(new GlideRoundImage(this,20));
        Glide.with(this)
                .load(imgUrl)
                .apply(myOptions)
                .into(mIv_img);

附上矩形圆角的代码: https://github.com/wildma/GlideRoundImage

  • 8
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值