如何在android drawable中設置具有動態大小和寬高比的聯合形狀

Question

我想制作如下圖所示的形狀。 圖中尺寸如下

• 圓形/橢圓尺寸為 30px
• 圓角矩形高度為 20px，寬度為 65px
• 矩形起點設置為圓心，因此圖形總大小為 80 像素。

但是，對於 drawable，我需要響應大小，以便我可以將它用於任何大小的視圖。

我能夠通過重疊來創建一個形狀，從而產生類似的錯覺。 我不確定 android 中是否可以使用布爾值（圖形）類型。

可繪制的 XML

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <size
                android:width="75dp"
                android:height="30dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item android:right="60dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary" />
            <size
                android:width="30dp"
                android:height="30dp" />
        </shape>
    </item>

    <item android:left="15dp" android:top="10dp" android:bottom="10dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimary" />
            <size
                android:width="66dp"
                android:height="20dp" />
            <corners
                android:bottomRightRadius="20dp"
                android:topRightRadius="20dp" />
        </shape>
    </item>

</layer-list>

上面的 XML 生成形狀如下圖所示

當我將形狀設置為View輸出時，如下圖所示

布局 XML

<View
    android:layout_width="80dp"
    android:layout_height="30dp"
    android:background="@drawable/shape_flask"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

輸出

如您所見，即使在 drawable 和 view 形狀中定義大小也不會遵守大小縱橫比。 我敢肯定是我做錯了什么。

問題：如何制作適用於任何尺寸的視圖的可繪制形狀，保持縱橫比與圖形參考中的相同。 以及如何為其添加投影。

已編輯

我已經修復了一些尺寸問題，但形狀仍然有問題。 為了更好的可視化，我為兩種形狀設置了不同的顏色。

可繪制的 XML

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle">
            <size
                android:width="80dp"
                android:height="30dp" />
            <solid android:color="@android:color/transparent" />
        </shape>
    </item>

    <item android:right="60dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorPrimary" />
            <size
                android:width="30dp"
                android:height="30dp" />
        </shape>
    </item>

    <item android:left="15dp" android:top="5dp" android:bottom="5dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorAccent" />
            <size
                android:width="66dp"
                android:height="20dp" />
            <corners
                android:bottomRightRadius="20dp"
                android:topRightRadius="20dp" />
        </shape>
    </item>

</layer-list>

但是正如您在下面的視圖屏幕截圖中看到的那樣，它不會輸出相同的大小和位置。 但是， View代碼是相同的。

Answer 1

像這樣拆分drawable怎么樣？

布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <View
        android:id="@+id/oval"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_oval" />

    <TextView
        android:id="@+id/rec"
        android:layout_width="65dp"
        android:layout_height="20dp"
        android:layout_centerVertical="true"
        android:layout_toEndOf="@+id/oval"
        android:layout_toRightOf="@+id/oval"
        android:background="@drawable/shape_rec"
        android:layout_marginStart="-15dp"
        android:layout_marginLeft="-15dp" />
</RelativeLayout>

shape_oval

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="@color/colorPrimary" />
</shape>

shape_rec

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/colorAccent" />
    <size
        android:width="66dp"
        android:height="20dp" />
    <corners
        android:bottomRightRadius="20dp"
        android:topRightRadius="20dp" />
</shape>

預覽