Glide加载Gif圆角图多次后出现黑边

￡神魔★判官ぃ 2022-01-27 15:51 400阅读 0赞

使用Glide加载Gif图且要求圆角图时，加载多次发现圆角背后多了黑色方角，说具体点就是首次加载会有圆角，第二次加载就会圆角+方角黑边。就像这样：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2libGFkZQ_size_16_color_FFFFFF_t_70]  
到这里，问题也描述的差不多了，有遇到同样问题&心急的朋友可能反手就是一拖鞋  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2libGFkZQ_size_16_color_FFFFFF_t_70 1]

**先给解决方案：加上.diskCacheStrategy(DiskCacheStrategy.SOURCE)即可。**

下面是顺便记录下圆角实现过程和遇到的疑惑点：

Glide加载圆角图可以直接调用自带方法：transform或bitmapTransform；

使用时候需要自定义一个Transformation（或BitmapTransformation）：

public class GlideRoundTransform extends BitmapTransformation { 
        private static float radius = 0f;
    
        public GlideRoundTransform(Context context) { 
            this(context, 4);
        }
    
        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;
        }
    
        @Override
        public String getId() { 
            return getClass().getName() + Math.round(radius);
        }
    }

然后使用时就这样：

ImageView gifRoundView = findViewById(R.id.clip_view);
    
    Glide.with(this).load(gif_url)
            .placeholder(R.drawable.video_img_error)
            .error(R.drawable.video_img_error)
            .diskCacheStrategy(DiskCacheStrategy.SOURCE)
            .transform(new GlideRoundTransformation(this, 10))
            .into(gifRoundView);

但是项目中gif图片有两种：16:9和4:3，要求高度固定，图片不能拉伸（XML中：ImageView需要设置 android:scaleType=“fitCenter”），即16:9时需要gif圆角，4:3时候需要背景圆角，gif居中显示不圆角。我们需要做的就是监听图片下载完成时刻，根据图片大小再决定是否显示圆角。代码如下：

final DrawableRequestBuilder<String> builder = Glide.with(this).load(gif_url)
            .error(R.drawable.video_img_error).placeholder(R.drawable.video_img_error)
            .crossFade().diskCacheStrategy(DiskCacheStrategy.SOURCE)
            /*.bitmapTransform(new GlideRoundTransformation(this, 10))*/;//这一行很重要!!!
    
    //监听是否加载完成
    builder.listener(new RequestListener<String, GlideDrawable>() { 
        @Override
        public boolean onException(Exception e, String s, Target<GlideDrawable> target, boolean b) { 
            return false;
        }
    
        @Override
        public boolean onResourceReady(GlideDrawable resource, String model,
                                       Target<GlideDrawable> target, boolean isFromMemoryCache, boolean isFirstResource) { 
            //如果图片比例(4:3 / 16:9) 和控件比例一样(16:9)，就切5dp圆角，否则不切圆角
            float drawableRatio = 1.00f * resource.getIntrinsicWidth() / Math.max(1, resource.getIntrinsicHeight());
            float imageViewRatio = 16.0f / 9;
            int radiusDp = (drawableRatio >= imageViewRatio ? 10 : 0);
            builder.bitmapTransform(new GlideRoundTransformation(activity, radiusDp));
            return false;
        }
    }).into(gifRoundView);

按照这个思路运行后，发现圆角彻底没了，WTF？？？

最后把添加监听前 注释那行代码放开后，一切按照预想的那样正常运行了，就是说，必须统一先设置圆角，然后在下载完成监听中二次选择圆角或方角，圆角才会起作用，否则圆角就像从来没来过一样。求路过大神评论区指津，抱拳！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2libGFkZQ_size_16_color_FFFFFF_t_70]: /images/20220127/41bf0f62577f4b6dab7597dc61f2e197.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2libGFkZQ_size_16_color_FFFFFF_t_70 1]: /images/20220127/d9c13bc0c91847729580c845529ede47.png