有人知道如何用Glide显示圆角图像吗? 我正在用Glide加载图像,但我不知道如何将圆角参数传递给这个库。

我需要显示图像像下面的例子:


当前回答

看看这篇文章,glide vs毕加索… 编辑:链接的文章并没有指出图书馆之间的重要区别。Glide会自动回收。详见TWiStErRob的评论。

Glide.with(this).load(URL).transform(new CircleTransform(context)).into(imageView);

public static class CircleTransform extends BitmapTransformation {
    public CircleTransform(Context context) {
        super(context);
    }

    @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) {
        return circleCrop(pool, toTransform);
    }

    private static Bitmap circleCrop(BitmapPool pool, Bitmap source) {
        if (source == null) return null;

        int size = Math.min(source.getWidth(), source.getHeight());
        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;

        // TODO this could be acquired from the pool too
        Bitmap squared = Bitmap.createBitmap(source, x, y, size, size);

        Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888);
        if (result == null) {
            result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888);
        }

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP));
        paint.setAntiAlias(true);
        float r = size / 2f;
        canvas.drawCircle(r, r, r, paint);
        return result;
    }

    @Override public String getId() {
        return getClass().getName();
    }
} 

其他回答

其他的解决方法对我都不起作用。我发现它们都有明显的缺点:

使用滑动转换的解决方案不能使用占位符 使用圆形图像视图的解决方案不适用于动画(即交叉渐隐) 使用父类的通用方法来剪辑子类(即这里接受的答案)的解决方案不能很好地与glide一起工作

有趣的是,在摸索了一番之后,我发现了Fresco图书馆关于圆角和圆的页面,其中他们列出了基本相同的限制,并以声明结尾:

在Android上没有真正好的解决方案,人们必须在上述的权衡中做出选择

令人难以置信的是,在这个时候我们仍然没有一个真正的解决方案。基于上面的链接,我有一个替代的解决方案。这种方法的缺点是它假设你的背景是纯色的(角落不是真正透明的)。你可以这样使用它:

<RoundedCornerLayout ...>
    <ImageView ...>
</RoundedCornerLayout>

要点在这里,完整代码在这里:

public class RoundedCornerLayout extends RelativeLayout {
    private Bitmap maskBitmap;
    private Paint paint;
    private float cornerRadius;

    public RoundedCornerLayout(Context context) {
        super(context);
        init(context, null, 0);
    }

    public RoundedCornerLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);

        setWillNotDraw(false);
    }

    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);

        if (maskBitmap == null) {
            // This corner radius assumes the image width == height and you want it to be circular
            // Otherwise, customize the radius as needed
            cornerRadius = canvas.getWidth() / 2;
            maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
        }

        canvas.drawBitmap(maskBitmap, 0f, 0f, paint);
    }

    private Bitmap createMask(int width, int height) {
        Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(mask);

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.WHITE); // TODO set your background color as needed

        canvas.drawRect(0, 0, width, height, paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        canvas.drawRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, paint);

        return mask;
    }
}

Roman Samoylenko的答案是正确的,只是函数变了。 正确答案是

Glide.with(context)
                .load(yourImage)
                .apply(RequestOptions.circleCropTransform())
                .into(imageView);

您也可以使用这个实现,不过值得注意的是,这个实现是基于匕首柄的

提供程序实现

@Module
@Named("circleCrop")
@InstallIn(SingletonComponent::class)
object AppModule {
    @Singleton
    @Provides
    fun provideGlideInstance(
        @ApplicationContext context: Context
    ) = Glide.with(context).setDefaultRequestOptions(
        RequestOptions()
            .placeholder(R.drawable.logo)
            .error(R.drawable.logo)
            .apply(RequestOptions().circleCropTransform())
            .diskCacheStrategy(DiskCacheStrategy.DATA)
    )
}

依赖注入

@Inject
@Named("circleCrop")
 lateinit var glide: RequestManager

加载图片

    glide.load(hotel.image).into(imgItemSearch)

圆圈裁剪+占位符+交叉渐隐

 Glide.with(context!!)
                    .load(randomImage)
                    .apply(RequestOptions.bitmapTransform(CircleCrop()).error(R.drawable.nyancat_animated))
                    .transition(DrawableTransitionOptions()
                            .crossFade())
                    .into(picture)

为了Glide 4.x.x

use

Glide
  .with(context)
  .load(uri)
  .apply(
      RequestOptions()
        .circleCrop())
  .into(imageView)

医生说

圆形图片:CircleImageView/CircularImageView/RoundedImageView 已知与TransitionDrawable (.crossFade()有问题 .thumbnail()或.placeholder())和动画gif,使用 BitmapTransformation (.circleCrop()将在v4中可用)或 .dontAnimate()来修复这个问题