Android layer-list 使用

最新推荐文章于 2025-05-19 21:04:02 发布

原创最新推荐文章于 2025-05-19 21:04:02 发布 · 830 阅读

0 ·

CC 4.0 BY-SA版权

岁月推动着年华,伴随着流水的脚步走过春夏秋冬.本文重在共享,欢迎大家转载,评论,指教,谢谢！！！！！！

文章标签：

#Android layer-list 使用

Android 知识点记录专栏收录该内容

399 篇文章

订阅专栏

本文详细介绍如何利用Android的Layer-list资源文件绘制复杂的图形组合，包括多圆环、阴影效果及同心圆等，通过调整各层的位置实现视觉上的错位与叠加效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在了解layer-list 之前需要知道shape 如果不清楚可以看shape 介绍

shape 画的背景图都是单一的一个，有时候遇到二个的，这个时候就需要使用layer-list

layer-list 里面的各个item 都是重叠的，我们可以使用left ，right ，top，bottom 使得重叠错开，

下面呢先画一个多圆环重叠的图像

代码如下

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

    <item>
        <shape android:shape="oval">
            <stroke
                android:width="1dp"
                android:color="@color/colorAccent"/>
            <size
                android:width="200dp"
                android:height="200dp" />
        </shape>
    </item>

    <item android:bottom="5dp" android:right="5dp">
        <shape android:shape="oval">
            <stroke
                android:width="1dp"
                android:color="@color/colorAccent"/>
            <size
                android:width="200dp"
                android:height="200dp" />
        </shape>
    </item>

    <item android:top="10dp" android:bottom="10dp">
        <shape android:shape="oval">
            <stroke
                android:width="1dp"
                android:color="@color/colorAccent"/>
            <size
                android:width="200dp"
                android:height="200dp" />
        </shape>
    </item>

    <item android:left="10dp" android:right="10dp">
        <shape android:shape="oval">
            <stroke
                android:width="1dp"
                android:color="@color/colorAccent"/>
            <size
                android:width="200dp"
                android:height="200dp" />
        </shape>
    </item>


</layer-list>

可以使用重叠的效果错位来实现阴影效果

效果图

代码

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:left="5dp"
        android:top="5dp">
        <shape>
            <solid android:color="#b4b5b6" />
            <size
                android:width="200dp"
                android:height="40dp" />
        </shape>

    </item>

    <item
        android:bottom="5dp"
        android:right="5dp">
        <shape>
            <solid android:color="#fff" />
            <size
                android:width="200dp"
                android:height="40dp" />
        </shape>
    </item>


</layer-list>

画同心圆这个也是2个item 重叠在一起的效果

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="oval">
            <solid android:color="#ffffff" />
            <stroke
                android:width="10dp"
                android:color="@color/colorAccent" />

            <size
                android:width="200dp"
                android:height="200dp" />
        </shape>
    </item>

    <item
        android:bottom="50dp"
        android:left="50dp"
        android:right="50dp"
        android:top="50dp">
        <shape android:shape="oval">
            <solid android:color="@color/colorAccent" />
            <size
                android:width="50dp"
                android:height="50dp" />
        </shape>
    </item>
</layer-list>