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

Question

如何实现这样的曲线:

Answer 1

最简单的解决方案是使用 VectorDrawable。创建一个新的可绘制对象

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>

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

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

VectorDrawable 的详细信息

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

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

我将尝试逐行解释我使用的 custom_ring.xml 文件。尽管我愿意接受建议和更正，但据我所知这是正确的。

高度和宽度

据我观察，矢量可绘制对象不受缩放影响。唯一的条件是需要保持纵横比(我在这里可能是错的)。

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

视口(viewport)高度和宽度

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

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

路径

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

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

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

M0,0(Moveto指令)移动光标到坐标0,0不画图。

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

将绘制下面的线

这就是您了解我如何为问题中的曲线编写路径数据所需的所有信息。