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相关的一些文章:
后续:
因需求改变,需要叫圆角改为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);