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

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

先给解决方案:加上.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???

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章