如何在安卓系统中制作一个药丸形状的按钮？

Question

如何在安卓系统中制作一个药丸形状的按钮？

androidbuttonuser-interfaceandroid-drawable

7

我不确定该如何称呼这个形状...或许是药丸形状。在谷歌上搜索圆角会出现很多关于想要带有圆角矩形按钮的帖子。这个形状有些不同，更像是两个圆和一个矩形，我试着画了出来。

我想制作一个类似下面第一张图片的按钮，但使用一个xml可绘制的背景在Android上加入文本和图标：

我尝试过这个方法，看起来还不错，但如果按钮长度不同，则无法缩放，最终会出现一个矩形和其他奇怪的东西。

<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>

enter image description here

我尝试创建我的xml drawable如下所示：

<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>

它看起来像这样：

enter image description here

我查看了这个人的例子，但当我按照他所做的去做时，我的结果在角落处并不完全圆形。它们更像上面第二张图片。

- startoftext

1

你尝试过调整半径值吗？那是控制外观的参数。 - TWhite

1

我知道你想使用XML来创建按钮，但我认为正确的方法是使用NinePatch图像。 - Larry McKenzie

你能否发布第二个的完整XML文件？ - Rod_Algonquin

@twhite 是的，请查看 XML 的第二个块。 - startoftext

@Larry 我宁愿不使用九宫格。 - startoftext

显示剩余3条评论

4个回答

7

这个可以很好地适应任何视图背景。

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

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

    <solid android:color="@android:color/holo_red_dark" />
</shape>

- Carson Holzheimer

任何包含1000dp的东西都像是一个hack。你为什么把它做得这么高？ - Marty Miller

它有点取巧，但它能用。这是为了防止在将其应用于大视图的背景时出现平坦的边缘。 - Carson Holzheimer

6

截至 Material Components Android库v1.1.0-beta01版本，您可以使用MaterialButton和shapeAppearance样式轻松定义一个药丸按钮，而无需预先知道按钮的高度或猜测半径值是否足够高以覆盖按钮的一半边缘。

只需像这样定义一个样式：

<style name="PillShapeAppearance">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

将其设置在您的MaterialButton上，如下所示：

<com.google.android.material.button.MaterialButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ...
        app:shapeAppearanceOverlay="@style/PillShapeAppearance"
        />

每个我查看过的其他答案都没有提到的关键是，要使用百分比值设置cornerSize，以便正确应用它所支持的分数值。

- pumpkinpie65

我发现这个解决方案非常有用。它对我非常有效，我推荐使用它。 - Kudzai Mutsvairo

-3

你可以在任何设计程序中制作该按钮，还可以制作一个类似的按钮，使其看起来像被按下，然后制作一个选择器可绘制对象并将其分配给按钮背景。这是我制作漂亮按钮的方式。

- user3497504

我问的是如何在xml中绘制它，而不是如何一般地完成它。我知道我可以创建一个Nine Patch，但如果我可以在xml中完成它，为什么要这样做呢？这就是我所问的。 - startoftext

为什么呢？一个很好的原因是因为你不知道如何在XML上制作它，也许你很着急。另一个很好的原因是你可以更精细地控制你想要显示的可绘制对象，或者你想要创建真正好的可绘制对象来给用户留下深刻印象。选择适合你的方式。 - user3497504

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pahomi · Accepted Answer

你可以将以下代码保存到drawable文件夹中（例如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>

查看尺寸和半径。然后将可绘制对象应用于您的视图，例如：

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

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