android - 如何在android中制作药丸形按钮？

Question

我不确定该怎么调用它……也许是药丸状的。谷歌搜索圆角会发现很多人想要一个圆角矩形按钮的帖子。这有点不同，但更像是我尝试将其绘制为 2 个圆圈和一个矩形。

我想通过在 android 上使用 xml 可绘制背景来制作一个形状类似于下面第一张图片但带有文本和图标图像的按钮:

我试过这个看起来不错，但如果按钮长度不同，它不会缩放，你最终会得到一个矩形和一些其他奇怪的东西。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:left="40dp" android:top="0dp" android:bottom="0dp">

        <shape android:shape="oval" >
            <solid android:color="#666666"/>
            <size android:width="40dp" android:height="40dp"></size>

        </shape>

    </item>

    <item android:left="20dp" android:right="20dp">
        <shape android:shape="rectangle" >
            <solid android:color="#666666"/>
            <size android:width="20dp" android:height="20dp"></size>
        </shape>


    </item>

    <item android:right="40dp">
        <shape android:shape="oval" >
            <solid android:color="#666666"/>
            <size android:width="40dp" android:height="40dp"></size>

        </shape>

    </item>


</layer-list>

我也试过像这样创建我的 xml 可绘制对象:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <solid android:color="#666666" />

            <corners android:radius="20dp"/>
            <size android:height="20dp" android:width="60dp"></size>
        </shape>

看起来像这样:

我看过this persons example但是当我做他做的事情时，我的结果在拐角处并不完全圆润。它们更像是上面的第二张图片。

Answer 1

您可以尝试将以下代码保存到可绘制对象中(例如 pill_bg.xml):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="rectangle">

    <corners android:radius="120dp" />

    <solid android:color="@color/white" />

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

    <size
        android:width="300dp"
        android:height="120dp" />

</shape>

看看尺寸部分和半径。然后将可绘制对象应用于您的 View ，例如:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="250dp"
    android:layout_height="60dp"
    android:background="@drawable/pill_bg" />

如您所见，您的 View 可以有不同的大小，背景将被缩放。