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

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。

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

我将尝试为我使用的custom_ring.xml文件提供逐行说明。 尽管我对建议和更正持开放态度，但据我所知是正确的。

高度和宽度

据我所观察，矢量drawables 对缩放免疫 。 唯一的条件是需要保持纵横比（我可能在这里错了）。

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

视口高度和宽度

我不能比这个图像更好地解释

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

路径

笔划宽度：指定轮廓的宽度。

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

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

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

Q350,150,700,0创建了从当前光标位置（我们得到（M0,0））到（700,0）的二次曲线 ，这是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变化

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

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