滑行圆角变换问题答案

【问题标题】：glide rounded corner transform issue滑行圆角变换问题
【发布时间】：2021-12-02 19:55:19
【问题描述】：

我使用以下代码使用 glide 将圆角图像加载到 imageview 中：

Glide.with(this)
                .load(url)
                .listener(new RequestListener<Drawable>() {
                    @Override
                    public boolean onLoadFailed(@Nullable GlideException e, Object model, Target<Drawable> target, boolean isFirstResource) {
                        return false;
                    }
                    @Override
                    public boolean onResourceReady(Drawable resource, Object model, Target<Drawable> target, DataSource dataSource, boolean isFirstResource) {
                        return false;
                    }
                })
                .transition(withCrossFade())
                .apply(new RequestOptions().transform(new RoundedCorners(50)).error(R.drawable.default_person).skipMemoryCache(true).diskCacheStrategy(DiskCacheStrategy.NONE))
                .into(mBinding.profileImgv);

图像由于某种原因被像素化。谁能告诉我问题出在哪里？

【问题讨论】：

嗨，你解决了这个问题吗？我也有同样的问题。

标签： android

【解决方案1】：

我遇到了同样的问题，我的问题是我尝试加载的图像以像素为单位 (320x480) 的尺寸较小，然后是 ImageView 的以像素为单位的尺寸。我的解决方案如下：

xml文件中我的ImageView：

    <ImageView
    android:id="@+id/image_program_thumb"
    android:layout_width="match_parent"
    android:layout_height="186dp" />

ProgramViewHolder.java 类

@BindView(R.id.image_program_thumb) ImageView mProgramThumbnail;
.....
void bindData(final Program item) {
    RequestOptions requestOptions = new RequestOptions();
    requestOptions = requestOptions.transforms(new CenterCrop(), new RoundedCorners(16));
    Glide.with(itemView.getContext())
            .load(item.getImage())
            .apply(requestOptions)
            .into(mProgramThumbnail);
....

}

附：我用的是4.2.0版本的Glide

【讨论】：

请提醒transforms() 中的参数顺序很重要！ CenterCrop() 必须在 RoundedCorners() 之前完成。
@androiddeveloper 它应该在那里，请查看文档：bumptech.github.io/glide/doc/generatedapi.html bumptech.github.io/glide/javadocs/400/com/bumptech/glide/…
@androiddeveloper 完全是 ))) 如果您检查我上面的示例代码，那是我使用过的类 RequestOptions requestOptions = new RequestOptions(); requestOptions = requestOptions.transforms(new CenterCrop(), new RoundedCorners(16));
嗯...对不起。我要删除我写的这些愚蠢的cmets，并给你+1。
但是如何为圆角添加描边（宽度+颜色）呢？这个也有吗？

【解决方案2】：

在 Glide V4 中

这样试试

 Glide.with(this.context)
                .load(url)
                .apply(RequestOptions.bitmapTransform(new RoundedCorners(14)))
                .into(ImageView);

【讨论】：

感谢您的关注
只有.apply(RequestOptions.bitmapTransform(new RoundedCorners(14))) 行足以应用角。无需添加.apply(RequestOptions.diskCacheStrategyOf(DiskCacheStrategy.ALL))。顺便谢谢你的回答。
这是答案，但请确保在您的 ImageView 中，您必须没有设置 android:scaleType="centerCrop"。否则将无法正常工作。

【解决方案3】：

对于 Glide v4.9 转换（java）：

Glide.with(this)
            .load(R.drawable.sample)
            .transform(new CenterCrop(),new RoundedCorners(25))
            .into(image);

【讨论】：

【解决方案4】：

对于 Glide v4.9，以下转换工作正常：

Glide.with(holder.imageView.context)
        .load(myDataset[position])
        .transform(CenterInside(),RoundedCorners(24))
        .into(holder.imageView)

【讨论】：

为我工作 v4.9

【解决方案5】：

这对我有用（生成的 API、Glide 4.9、Kotlin）：

GlideApp.with(imageView)
    .load(pictureUri)
    .transform(CenterCrop(), RoundedCorners(8))
    .into(imageView)

在这里找到：https://github.com/wasabeef/glide-transformations/issues/94

【讨论】：

【解决方案6】：

正如您在我的回答here 中看到的，也可以使用Glide's Generated API 来实现。它需要一些初始工作，但随后为您提供了 Glide 的所有功能以及执行任何操作的灵活性，因为您编写了实际代码，所以我认为从长远来看这是一个很好的解决方案。另外，使用非常简单整洁。

首先，设置Glide 4+版本：

implementation 'com.github.bumptech.glide:glide:4.6.1'
annotationProcessor 'com.github.bumptech.glide:compiler:4.6.1'

然后创建Glide的app模块类来触发注解处理：

@GlideModule
public final class MyAppGlideModule extends AppGlideModule {}

然后创建实际工作的 Glide 扩展。你可以自定义它来做任何你想做的事情：

@GlideExtension
public class MyGlideExtension {

private MyGlideExtension() {}

    @NonNull
    @GlideOption
    public static RequestOptions roundedCorners(RequestOptions options, @NonNull Context context, int cornerRadius) {
        int px = Math.round(cornerRadius * (context.getResources().getDisplayMetrics().xdpi / DisplayMetrics.DENSITY_DEFAULT));
        return options.transforms(new RoundedCorners(px));
    }
}

添加这些文件后，构建您的项目。

然后像这样在你的代码中使用它：

GlideApp.with(this)
    .load(imageUrl)
    .roundedCorners(getApplicationContext(), 5)
    .into(imageView);

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
感谢@Sree 的评论添加了答案的基本部分。
是否也可以在这个圆角输出中添加描边？
别忘了在参数中的RequestOptions 和options 之间添加一个空格。
已修复。谢谢@grrigore。

【解决方案7】：

在 Kotlin 上：

       Glide.with(applicationContext)
            .load("YourUrl")
            .centerCrop()
            .apply(RequestOptions.bitmapTransform(RoundedCorners(12)))
            .into(imgTest)

【讨论】：

【解决方案8】：

要在 Glide 版本 4 中简单地添加角，只需使用这个简单的旋转网：

val cornerRadius = context.resources.getDimensionPixelSize(R.dimen.corner_radius)

Glide.with(this)
    .asBitmap()
    .load(image)
    .apply(RequestOptions.bitmapTransform(RoundedCorners(cornerRadius)))
    .into(imageView)

【讨论】：

不幸的是，这根本不起作用？

【解决方案9】：

Glide.with(context).load(url).centerCrop().into(new BitmapImageViewTarget(imageView) {
        @Override
        protected void setResource(Bitmap resource) {
            RoundedBitmapDrawable circularBitmapDrawable =
                    RoundedBitmapDrawableFactory.create(context.getResources(), resource);
            circularBitmapDrawable.setCircular(true);
            imageView.setImageDrawable(circularBitmapDrawable);
        }
    });

【讨论】：

我不想有一个圆形图像视图...只是为图像视图添加一些边框半径
@tsiro 你用的是哪个flide virsion
glide:4.0.0-RC0版本
没有asBitmap方法
让我们continue this discussion in chat.

【解决方案10】：

Sir Codesalot 的回答有变化

而不是这样做

GlideApp.with(this)
            .load(imageUrl)
            .roundedCorners(getApplicationContext(), 5)
            .into(imageView);

这样做

Glide.with(holder.ivBook.context)
            .load(timeline.bookImageUrl)
            .apply(MyGlideExtension.roundCorners(new RequestOptions, holder.ivBook.context, 10))
            .into(holder.ivBook)

`

【讨论】：

【解决方案11】：

Glide.with(this)
            .load(user.getPhotoUrl())
            .centerCrop()
            .apply(RequestOptions.bitmapTransform(new RoundedCorners(150)))//this line of code help to rounded the image to circle`enter code here`
            .placeholder(R.mipmap.ic_launcher)
            .into(userPic);

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案12】：

我已经为此（here 和 here）和 Kotlin 制作了类似解决方案的一些修改版本。

使用示例：

val borderWidth= TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 1, context.resources.displayMetrics).toInt()
Glide.with(activity)
      .asBitmap()
      .load(photoUrl)
      .apply(RequestOptions.centerCropTransform())
      .apply(RequestOptions.bitmapTransform(RoundedCornersTransformation(activity, iconRoundedCornersRadius, 0, 0xff999999.toInt(), borderWidth)))
      .into(object : BitmapImageViewTarget(imageView) {
                                    override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) {
                                        super.onResourceReady(resource, transition)
                                        //do something if needed
                                    }
                                })

RoundedCornersTransformation.kt

class RoundedCornersTransformation @JvmOverloads constructor(private val bitmapPool: BitmapPool, private val radius: Int, private val margin: Int,
                                                             private val cornerType: CornerType = CornerType.ALL) : Transformation<Bitmap> {
    private val diameter: Int = radius * 2
    private var color = Color.BLACK
    private var border: Int = 0

//    val id: String
//        get() = ("RoundedTransformation(radius=" + radius + ", margin=" + margin + ", diameter="
//                + diameter + ", cornerType=" + cornerType.name + ")")

    enum class CornerType {
        ALL,
        TOP_LEFT, TOP_RIGHT, BOTTOM_LEFT, BOTTOM_RIGHT,
        TOP, BOTTOM, LEFT, RIGHT,
        OTHER_TOP_LEFT, OTHER_TOP_RIGHT, OTHER_BOTTOM_LEFT, OTHER_BOTTOM_RIGHT,
        DIAGONAL_FROM_TOP_LEFT, DIAGONAL_FROM_TOP_RIGHT, BORDER
    }

    constructor(context: Context, radius: Int, margin: Int, @ColorInt color: Int, border: Int) : this(context, radius, margin, CornerType.BORDER) {
        this.color = color
        this.border = border
    }

    @JvmOverloads
    constructor(context: Context, radius: Int, margin: Int,
                cornerType: CornerType = CornerType.ALL) : this(Glide.get(context).bitmapPool, radius, margin, cornerType)

    override fun transform(context: Context, resource: Resource<Bitmap>, outWidth: Int, outHeight: Int): Resource<Bitmap> {
        val source = resource.get()
        val width = source.width
        val height = source.height
        var bitmap: Bitmap? = bitmapPool.get(width, height, Bitmap.Config.ARGB_8888)
        if (bitmap == null)
            bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)
        val canvas = Canvas(bitmap!!)
        val paint = Paint()
        paint.isAntiAlias = true
        paint.shader = BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
        drawRoundRect(canvas, paint, width.toFloat(), height.toFloat())
        return BitmapResource.obtain(bitmap, bitmapPool)!!
    }

    private fun drawRoundRect(canvas: Canvas, paint: Paint, width: Float, height: Float) {
        val right = width - margin
        val bottom = height - margin
        when (cornerType) {
            RoundedCornersTransformation.CornerType.ALL -> canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(), paint)
            RoundedCornersTransformation.CornerType.TOP_LEFT -> drawTopLeftRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.TOP_RIGHT -> drawTopRightRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.BOTTOM_LEFT -> drawBottomLeftRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.BOTTOM_RIGHT -> drawBottomRightRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.TOP -> drawTopRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.BOTTOM -> drawBottomRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.LEFT -> drawLeftRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.RIGHT -> drawRightRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.OTHER_TOP_LEFT -> drawOtherTopLeftRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.OTHER_TOP_RIGHT -> drawOtherTopRightRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.OTHER_BOTTOM_LEFT -> drawOtherBottomLeftRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.OTHER_BOTTOM_RIGHT -> drawOtherBottomRightRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.DIAGONAL_FROM_TOP_LEFT -> drawDiagonalFromTopLeftRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.DIAGONAL_FROM_TOP_RIGHT -> drawDiagonalFromTopRightRoundRect(canvas, paint, right, bottom)
            RoundedCornersTransformation.CornerType.BORDER -> drawBorder(canvas, paint, right, bottom)
//            else -> canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(), paint)
        }
    }

    private fun drawTopLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), (margin + diameter).toFloat()),
                radius.toFloat(), radius.toFloat(), paint)
        canvas.drawRect(RectF(margin.toFloat(), (margin + radius).toFloat(), (margin + radius).toFloat(), bottom), paint)
        canvas.drawRect(RectF((margin + radius).toFloat(), margin.toFloat(), right, bottom), paint)
    }

    private fun drawTopRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(),
                radius.toFloat(), paint)
        canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom), paint)
        canvas.drawRect(RectF(right - radius, (margin + radius).toFloat(), right, bottom), paint)
    }

    private fun drawBottomLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, (margin + diameter).toFloat(), bottom),
                radius.toFloat(), radius.toFloat(), paint)
        canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), bottom - radius), paint)
        canvas.drawRect(RectF((margin + radius).toFloat(), margin.toFloat(), right, bottom), paint)
    }

    private fun drawBottomRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(right - diameter, bottom - diameter, right, bottom), radius.toFloat(),
                radius.toFloat(), paint)
        canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom), paint)
        canvas.drawRect(RectF(right - radius, margin.toFloat(), right, bottom - radius), paint)
    }

    private fun drawTopRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF(margin.toFloat(), (margin + radius).toFloat(), right, bottom), paint)
    }

    private fun drawBottomRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, right, bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom - radius), paint)
    }

    private fun drawLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF((margin + radius).toFloat(), margin.toFloat(), right, bottom), paint)
    }

    private fun drawRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom), paint)
    }

    private fun drawOtherTopLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, right, bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom - radius), paint)
    }

    private fun drawOtherTopRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, right, bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF((margin + radius).toFloat(), margin.toFloat(), right, bottom - radius), paint)
    }

    private fun drawOtherBottomLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF(margin.toFloat(), (margin + radius).toFloat(), right - radius, bottom), paint)
    }

    private fun drawOtherBottomRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), bottom), radius.toFloat(), radius.toFloat(),
                paint)
        canvas.drawRect(RectF((margin + radius).toFloat(), (margin + radius).toFloat(), right, bottom), paint)
    }

    private fun drawDiagonalFromTopLeftRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), (margin + diameter).toFloat(), (margin + diameter).toFloat()),
                radius.toFloat(), radius.toFloat(), paint)
        canvas.drawRoundRect(RectF(right - diameter, bottom - diameter, right, bottom), radius.toFloat(),
                radius.toFloat(), paint)
        canvas.drawRect(RectF(margin.toFloat(), (margin + radius).toFloat(), right - diameter, bottom), paint)
        canvas.drawRect(RectF((margin + diameter).toFloat(), margin.toFloat(), right, bottom - radius), paint)
    }

    private fun drawDiagonalFromTopRightRoundRect(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        canvas.drawRoundRect(RectF(right - diameter, margin.toFloat(), right, (margin + diameter).toFloat()), radius.toFloat(),
                radius.toFloat(), paint)
        canvas.drawRoundRect(RectF(margin.toFloat(), bottom - diameter, (margin + diameter).toFloat(), bottom),
                radius.toFloat(), radius.toFloat(), paint)
        canvas.drawRect(RectF(margin.toFloat(), margin.toFloat(), right - radius, bottom - radius), paint)
        canvas.drawRect(RectF((margin + radius).toFloat(), (margin + radius).toFloat(), right, bottom), paint)
    }

    private fun drawBorder(canvas: Canvas, paint: Paint, right: Float, bottom: Float) {
        // stroke
        val strokePaint = Paint()
        strokePaint.style = Paint.Style.STROKE
        strokePaint.color = color
        strokePaint.strokeWidth = border.toFloat()
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(), paint)
        // stroke
        canvas.drawRoundRect(RectF(margin.toFloat(), margin.toFloat(), right, bottom), radius.toFloat(), radius.toFloat(), strokePaint)
    }


    override fun updateDiskCacheKey(messageDigest: MessageDigest) {
    }
}

【讨论】：

@Itoun 为什么不呢？
半径不适用于顶角
@Itoun 您能否发布一个示例 POC 来显示此问题？也许在 Github 上？

【解决方案13】：

 Glide.with(getContext())              
.setDefaultRequestOptions(requestOptions)             
.load("URL Here")             
 .apply(RequestOptions.bitmapTransform(new RoundedCorners(14)))
.into("Your View reference")

【讨论】：

您好，欢迎来到 stackoverflow，感谢您的回答。虽然这段代码可能会回答这个问题，但您是否可以考虑添加一些解释来说明您解决了什么问题，以及您是如何解决的？这将有助于未来的读者更好地理解您的答案并从中学习。