如何创建自定义环形可绘制 android

Question

如何实现这样的曲线：

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 文件。尽管我愿意接受建议和更正，但据我所知，这是正确的。

高度和宽度

据我观察，矢量可绘制对象不会缩放。唯一的条件是需要保持纵横比（我这里可能是错的）。

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

视口高度和宽度

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

按照我在帖子中设置的视口，可以在 坐标平面 上实际绘制（几乎就像你对 Logo 所做的那样），其坐标范围为 (0,0 ) 从左上角到右下角 (700,700)。

路径

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

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

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

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

Q350,150,700,0 从当前光标位置（我们通过 (M0,0) 获得）到 (700,0) 创建一个 quadratic curve，这是 Q 指令的最后两个参数。 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"/>

会像这样渲染曲线。注意将 Q350,700,700,0 更改为 Q50,750,700,0

引起的变化

更改第二个参数将定义曲线的振幅。

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