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

Posted 2023-04-19

【中文标题】如何创建一个半椭圆形（弯曲一条线）

【英文标题】：how to create a semi oval shape (bending a line)

【发布时间】：2017-12-18 09:21:16

【问题描述】：

我正在尝试为我的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>

你能帮帮我吗？

【参考方案1】：

#。更新您的自定义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:
                android: />

            <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_
    android:layout_
    android:orientation="vertical"
    android:gravity="center_horizontal"
    android:background="@android:color/black"
    android:padding="16dp">

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

    </LinearLayout>
</LinearLayout>

输出：

希望对你有帮助~

【讨论】：

不，不可能用 添加image。但是您可以通过不同的方式实现这一目标。 1. 使用android:color="@android:color/transparent" 而不是android:color="@android:color/darker_gray"，它将只显示顶部的椭圆曲线。 2. 使用RelativeLayout 和两个内部LinarLayout 设计您的布局。将图像设置为第一个LinearLayout，并将自定义形状设置为第二个LinearLayout。

现在椭圆形的White 部分阻止了我的NavigationView 项目从底部显示。我真希望我们可以像在Photoshop 中那样设计UI。感谢您的帮助。

我通过在dimen.xml 中覆盖design_navigation_padding_bottom 来修复它：<dimen name="design_navigation_padding_bottom" tools:override="true">48dp</dimen>

太棒了...快乐的编码:)

【参考方案2】：

我会使用可绘制的矢量来实现这一点。

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:
    android:
    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）。