使用XML创建带自定义侧边的矩形：能否实现底部带有特定侧边样式的白色矩形？

嘿，没问题！用XML Drawable就能轻松实现你要的效果，咱们分两种场景来拆解：

一、创建带自定义侧边的矩形 #

这里分两种常见需求：四边统一自定义样式，或者某几条边有特殊样式（比如只有左边加粗变色）。

1. 四边统一自定义侧边的矩形 #

如果只是想给矩形加统一的边框样式（比如颜色、粗细、虚线效果），直接用shape标签就行：

<!-- res/drawable/custom_border_rect.xml -->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <!-- 填充色，比如白色 -->
    <solid android:color="#FFFFFF" />

    <!-- 自定义侧边（边框）样式 -->
    <stroke
        android:width="2dp"       <!-- 边框粗细 -->
        android:color="#FF5722"   <!-- 边框颜色 -->
        android:dashWidth="4dp"   <!-- 虚线的线段长度（可选） -->
        android:dashGap="2dp" />  <!-- 虚线的间隔（可选） -->

    <!-- 可选：圆角 -->
    <corners android:radius="4dp" />

</shape>

2. 某条边（或几条边）有特殊样式的矩形 #

如果需要某条边和其他边不一样（比如左边是红色粗边，其他边是灰色细边），就得用layer-list叠加多个形状来实现：

<!-- res/drawable/custom_side_rect.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 底层：白色填充的基础矩形（无侧边） -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
            <corners android:radius="4dp" />
        </shape>
    </item>

    <!-- 上层：左边的自定义侧边（红色粗边） -->
    <item
        android:left="4dp"
        android:leftWidth="4dp"
        android:leftColor="#FF5722">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <!-- 可选：其他边的细边框 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="#CCCCCC" />
            <corners android:radius="4dp" />
        </shape>
    </item>

</layer-list>

原理是用透明形状叠加出单独的侧边，你可以根据需求调整left/right/top/bottom属性来指定哪条边需要特殊样式。

二、创建底部带特定样式的白色矩形 #

这个需求其实是上面场景的变种，只需要给底部加特殊样式，其他边透明或者和填充色一致就行。举个例子，底部用蓝色虚线边，其他边无样式，白色填充：

<!-- res/drawable/white_rect_with_bottom_border.xml -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 底层：白色填充的基础矩形 -->
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#FFFFFF" />
            <corners android:radius="4dp" />
        </shape>
    </item>

    <!-- 上层：底部的特定样式侧边 -->
    <item
        android:bottom="2dp"
        android:bottomWidth="2dp"
        android:bottomColor="#2196F3"
        android:dashWidth="3dp"
        android:dashGap="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

</layer-list>

如果想要底部是实线粗边，去掉dashWidth和dashGap属性就行。

使用的时候，直接把这些drawable设置给View的android:background属性就可以了，比如：

<TextView
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:background="@drawable/white_rect_with_bottom_border" />

内容的提问来源于stack exchange，提问作者Praveen P.