Android 圆角GradientDrawable视图叠加时圆角透色如何解决

问题现象 #

两个尺寸一致、背景为相同圆角参数GradientDrawable的View叠加摆放时，圆角位置会出现颜色混合的透色、边缘发虚问题。即使给上层Drawable添加同色描边、将上下层View完全对齐，依然无法消除边缘模糊透色的现象，预期效果为圆角边缘清晰、无叠色透底。

复现代码 #

布局XML #

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="100dp">
        <View
            android:id="@+id/view_1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
        <View
            android:id="@+id/view_2"
            android:layout_width="match_parent"
            android:layout_marginTop="10dp"
            android:layout_height="match_parent"/>
    </FrameLayout>
</FrameLayout>

Kotlin 业务代码 #

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val view1 = findViewById<View>(R.id.view_1)
        val view2 = findViewById<View>(R.id.view_2)
        val bg1 = GradientDrawable().apply {
            setColor(Color.BLUE)
            cornerRadius = 20.toPxF()
        }
        val bg2 = GradientDrawable().apply {
            setColor(Color.RED)
            cornerRadius = 20.toPxF()
        }
        view1.background = bg1
        view2.background = bg2
    }
}

问题根因 #

GradientDrawable渲染圆角时默认开启抗锯齿，会在圆角边缘生成半透明过渡像素实现视觉上的平滑效果。两个带半透明边缘的View叠加时，上层的半透明边缘像素会和下层View的颜色做Alpha混合，最终出现叠色透底、边缘发虚的问题。添加描边、对齐View位置都无法消除抗锯齿生成的半透明像素，因此无法解决问题。

解决方案 #

• 方案1：自定义硬边圆角Drawable
  自行实现Drawable类，绘制圆角路径时关闭画笔抗锯齿（paint.isAntiAlias = false），圆角边缘只生成完全不透明/完全透明的二值像素，从根源避免半透明像素叠加。该方案实现简单，缺点是圆角边缘会存在轻微像素锯齿，适合对边缘锐利度要求高于平滑度的场景。
• 方案2：合并绘制逻辑，避免圆角区域重叠
  如果两个叠加View的位置、尺寸、圆角参数固定，不需要使用两个独立View叠加布局。直接在同一个Drawable或自定义View的Canvas中按区域绘制色块：下层色块仅绘制不被上层遮挡的部分，上层色块绘制完整圆角矩形，从根源上避免两个圆角的边缘像素重叠，既可以保留抗锯齿的平滑圆角效果，也不会出现透色问题。以上述偏移10dp的场景为例，下层蓝色块仅需要绘制顶部10dp高度的圆角区域，剩余区域完全被上层红色块覆盖，不需要绘制。
• 方案3：使用Outline硬裁剪上层View
  给上层View设置自定义ViewOutlineProvider，开启clipToOutline = true按照圆角轮廓严格裁剪View内容，Android 11及以上版本可以关闭Outline裁剪的抗锯齿，实现无半透明边缘的硬裁剪，避免叠色。

内容的提问来源于stack exchange，提问作者glllobys