最近开发中遇到一个Glide加载图片的问题,具体表现为同一个列表,各个item中ImageView需要裁剪相同大小的圆角,而使用测试数据填充时出现了不同item圆角大小不一的情况,这是截图。可以看到,第一项的图片圆角明显比其他的大很多,而且裁剪区域很模糊。
对于这种情况,开始我尝试了修改scaleType属性和Glide中修改asBitmap()、centerCrop()、fitCenter()等方法都没有效果。然后我怀疑是ListView布局复用的问题,可是禁掉了ListView布局优化之后还是老样子。
Adapter :
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (null == convertView) {
convertView = LayoutInflater.from(mContext).inflate(R.layout.item_star_topic, null);
holder = new ViewHolder(convertView);
convertView.setTag(holder);
} else {
holder = (ViewHolder) convertView.getTag();
}
if (!TextUtils.isEmpty(mList.get(position).getPic())) {
Glide.with(mContext).load(mList.get(position).getPic())
.transform(new GlideRoundTransform(mContext, 3))
.into(holder.mTopicPic);
}
}
GlideRoundTransform :
public GlideRoundTransform(Context context, int dp) {
super(context);
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;
}
其中adapter中是普通的加载图片,只是在Glide中加了transform来实现圆角裁剪,GlideRoundTransform是从其他博客借鉴的,之前用的都没有问题,自己想不通,就求助大神解答吧。
我在github的glide项目下提了一个issue,希望有人可以帮忙,很快得到了回复,他觉得是图片尺寸的问题,我也用他推荐的override()方法来重写图片大小之后再进行裁剪,但没有效果,代码如下:
Glide.with(mContext).load(mList.get(position).getPic())
.override(750,350)
.transform(new GlideRoundTransform(mContext, 3))
.into(holder.mTopicPic);
然后他问为什么第一张图看着这么模糊,我才意识到可能是测试数据出了问题,然后也确实是这样的,第一张图和第二张图尺寸明显不一样,而自定义的GlideRoundTransform是将原始在原始图片的基础上裁剪相应大小的圆角,对于尺寸小的图片裁剪完之后放到固定大小的ImageView中,肯定会变形。
最终的解决方案 :
Glide.with(mContext).load(mList.get(position).getPic())
.override(750,350)
.transform(new fitCenter(),new GlideRoundTransform(mContext, 3))
.into(holder.mTopicPic);
非常简单,就是使用了transfrom的重载方法,在传进去transfrom的同时传入一个fitcenter(),先将图片变换为固定的大小,然后在此基础上在进行裁剪,再次运行之后所有的项的圆角就看着一般大了。