首页 > 解决方案 > 如何从上到下创建 3 个形状图层列表

问题描述

大家好,所以我为 3 个形状创建了 2 个 xml。2 个形状是矩形 1 个是环形。

第一个 XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="@color/colorGrey"/>
<size android:height="40dp" android:width="10dp"/>
</shape>

第二个 XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval">
<solid android:color="@color/colorWhite"/>
<size android:height="40dp" android:width="40dp"/>
</shape>

然后我像这样创建了一个可绘制的图层列表

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <bitmap android:src="@drawable/rectangle"
            android:gravity="center" />
    </item>
    <item android:top="40dp">
        <bitmap android:src="@drawable/circle"
            android:gravity="center" />
    </item>
    <item android:top="40dp">
        <bitmap android:src="@drawable/rectangle"
            android:gravity="center" />
    </item>
    </layer-list>

我的主要目标是创建这个. 主要问题是它们彼此堆叠在一起。

标签: android

解决方案


试试这个(我根据您的代码假设图像大小为 40x40dp,并根据您的图像假设白色背景):

<?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item>
         <shape
             android:shape="rectangle">
             <solid android:color="@color/white"/>
             <size android:height="40dp" android:width="40dp"/>
         </shape>
     </item>
     <item
         android:right="18dp"
         android:left="18dp">
         <shape
             android:shape="rectangle">
             <solid android:color="@color/green"/>
             <size android:height="40dp" android:width="4dp"/>
         </shape>
     </item>
     <item android:gravity="center">
         <shape
             android:shape="oval">
            <solid android:color="@color/green"/>
            <size android:height="15dp" android:width="15dp"/>
            <stroke android:width="2dp" android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

预习


推荐阅读