如何創建自定義環形可繪制機器人

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。