如何在android中制作葯丸形狀的按鈕？

Question

我不知道該怎么稱呼這個……葯丸形狀的。 谷歌搜索圓角會發現很多人想要一個帶圓角的矩形按鈕。 這有點不同，但更像是我試圖將其繪制為 2 個圓圈和一個矩形。

我想通過在 android 上使用 xml drawable 背景制作一個形狀類似於下面第一張圖片的按鈕，但其中包含文本和圖標圖像：

我試過這個看起來不錯，但如果按鈕長度變化，它不會縮放，你最終會得到一個矩形和一些其他奇怪的東西。

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

看起來像這樣：

我看過這個人的例子，但是當我做他做的事情時，我的結果在角落里並不完全圓潤。 它們更像上面的第二張圖片。

Answer 1

您可以嘗試將以下代碼保存到可繪制對象（例如pil_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>

看一下尺寸部分和半徑。 然后將 drawable 應用於您的視圖，例如：

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

如您所見，您的視圖可以有不同的大小，背景將被縮放。

Answer 2

從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以便正確應用它支持的分數值。

Answer 3

這可以為任何視圖背景正確調整大小。

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

Answer 4

好吧，您可以在任何設計程序中制作該按鈕，也可以制作一個類似的按鈕，使其看起來像被按下，然后您制作一個可繪制的選擇器並將其分配給按鈕背景。 這就是我做非常棒的按鈕的方式