Glide 加载圆角图片大小不一的问题

 
 

  
  
最近开发中遇到一个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(),先将图片变换为固定的大小，然后在此基础上在进行裁剪，再次运行之后所有的项的圆角就看着一般大了。
 
 

链接：https://www.jianshu.com/p/995ea072dc6b
來源：简书