带间距的多笔画

Question

我想要一个带有两个笔画的按钮样式，它们之间有一些间距。我的第一种方法并不令人满意，因为在角落里笔画之间的间距是不同的：

灰色笔划应紧密围绕蓝色渐变，白色笔划的圆角半径应适合其他笔划。

这是我的代码：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <shape android:shape="rectangle">

            <padding android:left="2dp"
                android:top="2dp"
                android:right="2dp"
                android:bottom="2dp"/>

            <stroke
                android:width="1dp"
                android:color="#7F7F7F"/>

            <corners
                android:radius="6dp"/>
        </shape>
    </item>

    <item >
        <shape android:shape="rectangle">
            <padding android:left="2dp"
                android:top="2dp"
                android:right="2dp"
                android:bottom="2dp"/>

            <gradient
                android:startColor="@color/colorBlueLight"
                android:endColor="@color/colorBlueDark"
                android:angle="270"/>

            <corners
                android:radius="6dp" />
        </shape>
    </item>

    <item >
        <shape android:shape="rectangle">

            <padding android:left="2dp"
                android:top="2dp"
                android:right="2dp"
                android:bottom="2dp"/>

            <stroke
                android:width="2dp"
                android:color="#FFFFFF"/>

            <corners
                android:radius="6dp"/>
        </shape>
    </item>

</layer-list>

Answer 1

嗯……这就是几何学的原理。

只要保持内圆角矩形和外圆角矩形的角相同，距离A就不等于。Bradius

您可以做的就是尝试通过将内角修改radius为较小的值来“隐藏”此效果。找到一个满足您需求的合适值（我4dp在下面的代码中使用作为示例）。

<item >
    <shape android:shape="rectangle">

        <padding android:left="2dp"
            android:top="2dp"
            android:right="2dp"
            android:bottom="2dp"/>

        <stroke
            android:width="2dp"
            android:color="#FFFFFF"/>

        <corners
            android:radius="4dp"/>
    </shape>
</item>

并使用较小的内部radius：