Android 使用layer-list实现分块圆角背景时中间描边重叠为2dp如何解决

问题原因 #

你当前的实现中，上下两个shape都设置了四周1dp的灰色描边，两个shape在中间拼接位置的描边发生重叠，导致中间的线条厚度变成2dp，不符合预期。

修复代码 #

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 外层描边层 -->
    <item>
        <shape>
            <solid android:color="@color/gray_BB" />
            <corners android:radius="3dp" />
        </shape>
    </item>
    <!-- 清空描边内部区域 -->
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="1dp"
        android:bottom="1dp">
        <shape>
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>
    <!-- 上半部分白色区域 -->
    <item
        android:height="40dp"
        android:gravity="top"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape>
            <solid android:color="@color/white100" />
            <corners
                android:topLeftRadius="3dp"
                android:topRightRadius="3dp" />
        </shape>
    </item>
    <!-- 下半部分灰色区域 -->
    <item
        android:height="40dp"
        android:gravity="bottom"
        android:left="1dp"
        android:right="1dp"
        android:bottom="1dp">
        <shape>
            <solid android:color="@color/gray_F4" />
            <corners
                android:bottomLeftRadius="3dp"
                android:bottomRightRadius="3dp" />
        </shape>
    </item>
    <!-- 中间分割线 -->
    <item
        android:height="1dp"
        android:gravity="center"
        android:left="1dp"
        android:right="1dp">
        <shape>
            <solid android:color="@color/gray_BB" />
        </shape>
    </item>
</layer-list>

实现逻辑 #

1. 统一在最外层做描边和圆角处理，避免上下两个shape分别加描边导致重叠
2. 内部上下色块仅设置填充色和对应位置的圆角，无需额外添加描边
3. 中间单独绘制1dp的灰色分割线，厚度刚好符合要求，不会出现重叠问题

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