Glide设置Dialog内图片顶部4dp圆角异常问题求助

问题分析 #

当前实现用Glide给图片设置顶部圆角，同时通过两个Drawable实现底部左右圆角背景，但效果不符合预期，可能的诱因包括：

• dp转px计算错误导致圆角尺寸偏差
• 多Drawable叠加时的布局层级或遮挡问题
• Glide变换规则与图片控件的scaleType冲突
• Shapable Image的样式配置未正确生效

解决方案 #

1. 确保dp转px计算正确

先检查dpToPx函数的实现逻辑，错误的像素转换会直接导致圆角大小不符合预期：

fun dpToPx(dp: Int): Int {
    return (dp * Resources.getSystem().displayMetrics.density).toInt()
}

如果你的函数逻辑与上述不一致，优先修正这个基础计算。

2. 合并底部圆角Drawable（简化布局）

无需拆分两个Drawable，用单个shape实现底部左右圆角，减少布局复杂度：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <corners
        android:bottomLeftRadius="4dp"
        android:bottomRightRadius="4dp" />
</shape>

将这个Drawable设置给图片控件的父布局背景，而非图片本身，避免与Glide的圆角转换逻辑冲突。

3. 修正Glide加载逻辑（保证圆角生效）

确认GranularRoundedCorners的参数顺序正确（依次为：左上、右上、右下、左下），同时添加centerCrop保证图片填充控件，避免圆角被拉伸变形：

Glide.with(ctx)
    .load(quizNoticeImage)
    .centerCrop() // 确保图片填充控件，避免圆角显示异常
    .transform(GranularRoundedCorners(radius, radius, 0f, 0f))
    .listener(object : RequestListener<Drawable> {
        override fun onLoadFailed(
            e: GlideException?,
            model: Any?,
            target: Target<Drawable>?,
            isFirstResource: Boolean
        ): Boolean {
            noShowAgain()
            return false
        }

        override fun onResourceReady(
            resource: Drawable?,
            model: Any?,
            target: Target<Drawable>?,
            dataSource: DataSource?,
            isFirstResource: Boolean
        ): Boolean {
            vBarHorizontal.visible()
            vBarVertical.visible()
            tvNoShowAgain.visible()
            tvClose.visible()
            return false
        }
    })
    .into(ivQuiz)

4. 用ShapableImageView替代原生ImageView（更可靠方案）

如果Glide的transform始终有问题，直接使用Material组件的ShapeableImageView实现图片顶部圆角，无需Glide转换：

• 布局文件配置ShapableImageView：

<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/ivQuiz"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    app:shapeAppearanceOverlay="@style/TopRoundedImageStyle" />

• 在styles.xml中定义顶部圆角样式：

<style name="TopRoundedImageStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopLeft">4dp</item>
    <item name="cornerSizeTopRight">4dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
</style>

• Glide加载时无需添加transform，直接into即可：

Glide.with(ctx)
    .load(quizNoticeImage)
    .centerCrop()
    .listener(...)
    .into(ivQuiz)

最后将合并后的底部圆角Drawable设置给ShapableImageView的父布局背景，即可实现图片顶部圆角、底部背景圆角的效果。

5. 检查Dialog窗口配置

确保Dialog窗口没有额外padding或背景干扰：

window?.run {
    setLayout(width, ViewGroup.LayoutParams.WRAP_CONTENT)
    setBackgroundDrawable(ColorDrawable(Color.TRANSPARENT))
    decorView.setPadding(0, 0, 0, 0) // 移除默认padding，避免圆角被遮挡
}

内容的提问来源于stack exchange，提问作者띵바이러스