首页 > 解决方案 > 为 android 绘制带有图层列表的图像

问题描述

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

! 我正在尝试将它创建为一个layer-list,这样我就可以有几个基元(一个圆和 4 个带圆角的矩形作为半圆)。

这是我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它等移动它们时,它会拖着其他人,所以我有点迷失了我应该如何创建我正在寻找的形状。

任何帮助表示赞赏。

标签: androidxmlvectorandroid-drawableandroid-vectordrawable

解决方案


我已经修改了你的样本,希望这对你有帮助

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

推荐阅读