绘制带有Android图层列表的图像

问题描述 投票:0回答:1

我一直在尝试创建类似于此图像的矢量作为android drawable XML,但是我遇到了一些问题。

“!”我正在尝试将其创建为layer-list,以便可以具有多个图元(一个圆和四个带有圆角的矩形作为半圆)。

这是我的可绘制对象的XML代码

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:right="0dp" android:left="0dp">
        <shape
            android:shape="rectangle">

            <solid android:color="#FFFFFF"/>

            <corners
                android:bottomRightRadius="20dp"
                android:bottomLeftRadius="20dp"/>
        </shape>
    </item>
    <item android:right="-80dp" android:left="0dp" android:height="20dp" android:width="20dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <corners
                android:bottomRightRadius="20dp"
                android:bottomLeftRadius="20dp"/>
        </shape>
    </item>
    <item android:right="-80dp" android:left="0dp" android:height="20dp" android:width="20dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <corners
                android:bottomRightRadius="20dp"
                android:bottomLeftRadius="20dp"/>
        </shape>
    </item>
    <item android:right="-80dp" android:left="0dp" android:height="20dp" android:width="20dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <corners
                android:bottomRightRadius="20dp"
                android:bottomLeftRadius="20dp"/>
        </shape>
    </item>
    <item android:right="-80dp" android:left="0dp" android:height="20dp" android:width="20dp">
        <shape
            android:shape="rectangle">
            <solid android:color="#FFFFFF"/>
            <corners
                android:bottomRightRadius="20dp"
                android:bottomLeftRadius="20dp"/>
        </shape>
    </item>
    <item android:right="00dp" android:left="00dp" android:height="40dp" android:width="40dp">
        <shape android:shape="oval">
            <solid android:color="#000000"/>
        </shape>
    </item>
</layer-list>

所以问题是我无法让它们像我所希望的那样散布。此刻,他们都在彼此之上。当我尝试调整其中一个的大小时,由于某种原因,它们都采用相同的大小,因此无法创建半圆形。同样,当我尝试使用android:top等移动它们时,它也会拖拽其他对象,因此我对应该如何创建所需形状的想法感到迷茫。

感谢您的任何帮助。

android xml vector android-drawable android-vectordrawable
1个回答
1
投票

我修改了您的示例,希望对您有所帮助

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item android:gravity="left|center_vertical" android:right="35dp">
    <shape
        android:shape="rectangle">
        <size android:height="10dp"
            android:width="10dp"/>
        <solid android:color="#2962FF"/>
        <corners
            android:topLeftRadius="10dp"
            android:bottomLeftRadius="10dp"/>
    </shape>
</item>
<item android:gravity="right|center_vertical"  android:left="35dp">
    <shape
        android:shape="rectangle">
        <size android:width="10dp"
            android:height="10dp"/>
        <solid android:color="#2962FF"/>
        <corners
            android:bottomRightRadius="10dp"
            android:topRightRadius="10dp"/>
    </shape>
</item>

<item android:gravity="top|center_horizontal"  android:bottom="35dp">
    <shape
        android:shape="rectangle">
        <size android:width="10dp" android:height="10dp"/>
        <solid android:color="#2962FF"/>
        <corners
            android:topRightRadius="10dp"
            android:topLeftRadius="10dp"/>
    </shape>
</item>

<item android:gravity="bottom|center_horizontal" android:top="35dp">
    <shape android:shape="rectangle">
    <size android:height="10dp"
        android:width="10dp"/>
        <solid android:color="#2962FF"/>
        <corners
            android:bottomRightRadius="20dp"
            android:bottomLeftRadius="20dp"/>
    </shape>
</item>

<item android:gravity="center_horizontal|center_vertical">
    <shape android:shape="oval">
        <size android:height="20dp"
            android:width="20dp"/>
        <solid android:color="#000000"/>
    </shape>
</item>


</layer-list>
© www.soinside.com 2019 - 2024. All rights reserved.