如何在 android 可绘制对象中设置具有动态大小和纵横比的联合形状

Question

我想制作如下图所示的形状。图中尺寸如下

circle/Oval尺寸为30px
圆角矩形高度为20px，宽度为65px
矩形起点设置为圆心，因此图形总大小为 80px。

However, for drawable I need responsive size so I can use it for any size of the view.

我能够通过重叠来创建一个形状，产生类似的错觉。我不确定 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" />

输出

如您所见，即使在可绘制对象和视图形状中定义大小也不遵循大小纵横比。肯定是我做错了

Question: How can I make the drawable shape that works on any size of view keeping aspect ration the same as it is in the Graphic reference. And how to add Drop Shadow to it.

已编辑

我已经解决了一些尺寸问题，但形状仍然有问题。为了更好的可视化，我为两种形状设置了不同的颜色。

可绘制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

像这样拆分可绘制对象怎么样？

布局

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

Preview

如何在 android 可绘制对象中设置具有动态大小和纵横比的联合形状

How to set union shape with dynamic size and spect ratio in android drawable

android

drawable

xml-drawable

android-drawable

可绘制XML

布局XML

输出

已编辑

可绘制XML