Android自定义Drawable：TabView选中态背景描边圆角问题求助

嘿，我看你现在卡在自定义Tab选中背景的描边效果上了——原来的layer-list写法因为每个shape都加了描边，导致衔接处出现多余的线条，右侧的白色矩形还带了不该有的描边，确实头疼。

咱们换个思路来写这个drawable，把描边和填充分开处理，就能完美实现你要的效果：

修正后的drawable/tab_active.xml代码 #

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 1. 底层描边框架：统一实现整个形状的描边 -->
    <item>
        <shape android:shape="rectangle">
            <size android:width="100dp" android:height="40dp" />
            <stroke android:width="2dp" android:color="@color/warmGray" />
            <corners android:topLeftRadius="32dp" android:bottomRightRadius="32dp" />
            <!-- 这里不设solid，让填充透明，留给上层处理 -->
        </shape>
    </item>

    <!-- 2. 左侧斜切补全：覆盖描边多余部分，补主体背景色 -->
    <item android:right="100dp" android:left="-100dp" android:top="-100dp" android:bottom="-100dp">
        <rotate android:fromDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#13a89e" />
                <!-- 不需要描边，底层已经有了 -->
            </shape>
        </rotate>
    </item>

    <!-- 3. 右侧斜切补全：用Tab背景色覆盖多余描边 -->
    <item android:right="-100dp" android:left="100dp" android:top="-100dp" android:bottom="-100dp">
        <rotate android:fromDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#ffffff" />
                <!-- 同样不需要描边，避免和底层重复 -->
            </shape>
        </rotate>
    </item>

    <!-- 4. 主体填充色：和描边预留2dp间距，圆角适配描边宽度 -->
    <item android:top="2dp" android:bottom="2dp" android:left="2dp" android:right="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#13a89e" />
            <corners android:topLeftRadius="30dp" android:bottomRightRadius="30dp" />
            <!-- 圆角比底层小2dp，刚好和描边的圆角对齐 -->
        </shape>
    </item>
</layer-list>

调用代码调整 #

去掉scaleY="-1"，现在的drawable方向已经是正确的：

<View
    android:layout_centerInParent="true"
    android:layout_width="100dp"
    android:layout_height="40dp"
    android:background="@drawable/tab_active" />

为什么这个写法能解决问题？ #

原来的代码给每个layer的shape都加了描边，导致左右旋转矩形的描边和中间矩形的描边重叠，出现多余的线条；右侧白色矩形的描边也破坏了斜切的视觉效果。现在我们把描边统一放在最底层，上层只负责填充对应区域的颜色，既保证了描边的连贯性，又避免了重复描边的问题。

这样调整后，就能完美实现你想要的带特定圆角和连贯描边的Tab选中背景啦！

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