如何创建半椭圆形（弯曲一条线）

Question

我正在尝试为我的 NavigationView 页脚创建自定义形状作为背景。但它不是那么干净。这就是我所做的：

这就是我需要的：

代码：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:gravity="bottom">
    <shape android:shape="rectangle">
        <solid android:color="@color/darkerGray" />
    </shape>
</item>
<item

    android:gravity="bottom|center_horizontal"
    android:top="50dp">
    <!--android:top="-40dp"-->

    <shape android:shape="oval">
        <solid android:color="#ffffffff" />
    </shape>
</item>
<item

    android:bottom="30dp"
    android:gravity="bottom">
    <shape android:shape="rectangle">
        <solid android:color="#ffffffff" />
    </shape>
</item>

你能帮帮我吗？

Answer 1

我会使用矢量绘图来实现这一点。

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="8dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">

    <path
        android:pathData="M0 -5.4a13 7 0 1 0 24 0V24H0z"
        android:fillColor="#FF000000"/>

</vector>

这里的pathData属性比较简单：

将光标移动到左上角
弧形到右上角
线到右下角
线到左下角
关闭路径

您可以通过调整 "a" 之后的前两个数字（即 a13 7）来调整曲线的外观（曲线的深度）；这些是 x 半径和 y 半径。较大的 x 半径会使曲线整体更平坦，较大的 y 半径会使曲线更向下进入正方形。

路径从负 y 轴值开始，因为我们（当前）使用的 x 半径大于我们形状的一半，因此需要向上调整弧线以使其达到 (0, 0) 首次出现时。因此，如果您修改 x 半径，您还必须修改路径的原点（初始 "M" 之后的数字，即 M0 -5.4）。

Answer 2

#。更新您的自定义 drawable XML 如下：

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

    <!-- Container GRAY rectangle -->
    <item>
        <shape android:shape="rectangle">

            <size
                android:width="250dp"
                android:height="100dp" />

            <solid
                android:color="@android:color/darker_gray" />
        </shape>
    </item>

    <!-- Top WHITE oval shape -->
    <item
        android:left="-25dp"
        android:right="-25dp"
        android:top="-50dp"
        android:bottom="50dp">

        <shape android:shape="oval">

            <solid
                android:color="@android:color/white" />
        </shape>
    </item>
</layer-list>

预览：

#。在您的布局中使用此自定义 drawable，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:background="@android:color/black"
    android:padding="16dp">

    <!-- Custom Footer -->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/custom_shape">

    </LinearLayout>
</LinearLayout>

输出：

希望对你有所帮助~

如何创建半椭圆形（弯曲一条线）

how to create a semi oval shape (bending a line)

android

xml

drawable

shape