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
來源:简书

你可能感兴趣的:(Glide 加载圆角图片大小不一的问题)