如何创建自定义环形可绘制对象 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>

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

<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的时候，我曾经想过为什么height和width是必填字段。我曾经将值更改为不同的值，但从未观察到预览中有任何变化。我花了比真正必要的时间更长的时间才意识到需要此值才能为包含它的视图提供正确的尺寸。例如，如果您有一个 ImageView 并将其高度和宽度设置为 wrap_content，则 ImageView 将假定高度和宽度等于向量高度和宽度 [=127] 中设置的值=]分别。

视口高度和宽度

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

像我在 post 中那样设置视口可以在 坐标平面 [=112] 上实际绘制（几乎就像您使用 Logo 所做的那样） =] 其坐标范围从左上角的 (0,0) 到右下角的 (700,700)。

路径

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

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

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

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

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

将绘制下面的线

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

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>

将 Orange 形状放置在具有白色背景和一些负 MarginTop 的第一个布局下。

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

How To Create A Custom Ring shaped drawable android

android

android-layout

xml-drawable

有关 VectorDrawable 的详细信息