如何用ShapeDrawables创建带间距的并排三个圆形抽屉把手

你遇到的问题核心是LayerList里的Item默认会填充整个Drawable容器，且未给每个圆形Shape设置固定尺寸，导致Oval随容器拉伸成椭圆，偏移方式也不对。以下是两种可行方案：

方案1：修改LayerList XML，给每个Shape固定尺寸 #

给每个<shape>添加<size>标签限制宽高（确保是正圆），再用android:left控制间距：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 第一个圆形 -->
    <item>
        <shape android:shape="oval">
            <solid android:color="@color/lavender" />
            <!-- 固定宽高，保证是正圆 -->
            <size android:width="20dp" android:height="20dp" />
        </shape>
    </item>
    <!-- 第二个圆形，左移拉开与第一个的间距 -->
    <item android:left="40dp">
        <shape android:shape="oval">
            <solid android:color="@color/lavender" />
            <size android:width="20dp" android:height="20dp" />
        </shape>
    </item>
    <!-- 第三个圆形，继续左移拉开间距 -->
    <item android:left="80dp">
        <shape android:shape="oval">
            <solid android:color="@color/lavender" />
            <size android:width="20dp" android:height="20dp" />
        </shape>
    </item>
</layer-list>

• 调整size里的数值可以改变圆形大小；
• 调整android:left的数值可以控制间距（比如40dp的话，圆形本身20dp，间距就是20dp）；
• 若要让三个圆整体居中，可给整个<layer-list>套一层<inset>，或给每个Item添加android:gravity="center"。

方案2：布局中用LinearLayout+单个圆形Shape（更灵活） #

如果抽屉把手是布局中的View，这种方式更易维护：

1. 先定义单个圆形的Shape（drawable/circle_handle.xml）：

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/lavender" />
    <size android:width="20dp" android:height="20dp" />
</shape>

2. 在布局文件中用LinearLayout排列三个View：

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center"
    android:padding="10dp">

    <View
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:background="@drawable/circle_handle" />

    <View
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginLeft="20dp"
        android:background="@drawable/circle_handle" />

    <View
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginLeft="20dp"
        android:background="@drawable/circle_handle" />
</LinearLayout>

这种方式可随时调整圆形大小、间距，甚至给单个圆形添加交互逻辑，比LayerList更灵活。

原代码问题说明 #

你之前的代码未给Shape设置固定尺寸，导致Oval填满整个容器（若容器是长条形，就会被拉成椭圆）；中间的透明Shape完全多余，它会覆盖整个容器，反而干扰正常显示。

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