Question

如何实现这样的曲线：

curve background shape

Answer 1

最简单的解决方案是使用VectorDrawable。创建一个新的drawable

<强> custom_ring.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="100dp"
    android:height="100dp"
    android:viewportHeight="700"
    android:viewportWidth="700">
    <path
        android:pathData="M0,0Q350,150,700,0L700,200Q400,300,0,200"
        android:strokeColor="@color/colorPrimary"
        android:strokeWidth="1"
        android:fillColor="@color/colorYellow"/>    
</vector>

然后将其添加为所需视图的背景

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/custom_ring" />

有关VectorDrawables的详细信息

VectorDrawables很容易理解，并且可以在Android Studio中创建简单的形状。对于更复杂的形状，您必须使用其他工具生成SVG文件，以后可以将其转换为AS中的VectorDrawables。

有关详细信息，请参阅此post以了解如何使用VectorDrawables。

我会尝试逐行解释我使用过的custom_ring.xml文件。尽管我对建议和更正持开放态度，但据我所知是正确的。

高度和宽度

就我所观察到的而言，矢量绘图不受缩放的影响。唯一的条件是需要保持纵横比（这里我可能错了）。

当我第一次熟悉drawables时，我常常想知道为什么身高和宽度都是必需的字段。我曾经将值更改为不同的值，并且从未在预览中观察到任何变化。我花了比实际需要更长的时间才意识到需要这个值来为包含它的视图提供正确的尺寸。例如，如果您有ImageView并将其高度和宽度设置为wrap_content，则ImageView将假定高度和宽度分别等于Vector高度和宽度属性中设置的值。

视口高度和宽度

我无法解释比这张图片更好的

我在帖子中设置视口，可以在坐标平面上实际绘制（几乎就像你在Logo上做的那样）＆＃39;坐标范围从左上角的（0,0）到右下角的（700,700）。

路径

描边宽度：指定轮廓的宽度。

填充颜色：使用颜色填充路径数据中第一个和最后一个点之间的区域。

路径数据：可能是最重要的元素，也是最不了解的元素。请阅读我上面链接的帖子。它给出了很好的解释。

M0,0（Moveto指令）将光标移动到坐标0,0而不绘图。

Q350,150,700,0从当前光标位置（我们得到（M0,0））到（700,0）创建quadratic curve，这是Q指令的最后2个参数。 Q指令的前2个参数（350,150）决定了曲线的形状和大小。例如，

<path
    android:pathData="M0,0Q350,750,700,0"
    android:strokeColor="#FF0000"
    android:strokeWidth="10"/>

会生成此曲线

而

<path
    android:pathData="M0,0Q50,750,700,0"
    android:strokeColor="#FF0000"
    android:strokeWidth="10"/>

会像这样呈现曲线。请注意将Q 350 ，700,700,0更改为Q 50 ，750,700,0

所导致的更改

更改第2个参数将定义曲线的幅度。

<path
    android:pathData="M0,0Q350,350,700,0"
    android:strokeColor="#FF0000"
    android:strokeWidth="10"/>

将给出

L350,350（Lineto指令）会从当前光标位置到坐标（350,350）绘制一条线

<path
    android:pathData="M0,0L350,350"
    android:strokeColor="#FF0000"
    android:strokeWidth="10"/>

将绘制以下行

关于你如何弄清楚我是如何为问题中的曲线写出路径数据所需的所有信息。

Answer 2

首先在xml中设置一个像白色一样的形状

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="150dp"
        android:bottomRightRadius="150dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp" />
    <stroke
        android:width="0.6dp"
        android:color="@color/prefered_color" />
    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />

    <solid android:color="@color/white" />
</shape>

会产生这样的形状

再次制作橙色形状，将其置于白色形状下，如

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:bottomLeftRadius="150dp"
        android:bottomRightRadius="150dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="0dp" />
    <stroke
        android:width="0.6dp"
        android:color="@color/prefered_color" />
    <padding
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp" />

    <solid android:color="@color/orange" />
</shape>

在第一个布局下放置橙色形状，背景为白色，带有一些负MarginTop。

如何创建自定义环形可绘制机器人

2 个答案:

有关VectorDrawables的详细信息