Android layer-list 多层效果

在drawable文件夹下新建xml文件

<?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="5dp"
                android:color="@android:color/white"/>
            <solid
                android:color="#029ED9"/>
            <size
                android:width="100dp"
                android:height="100dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <stroke
                android:width="1dp"
                android:color="@android:color/black"/>
        </shape>
    </item>

</layer-list>
           

两个的顺序不能乱

再加几层

<?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="10dp"
                android:color="@android:color/white"/>
            <solid
                android:color="#029ED9"/>
            <size
                android:width="100dp"
                android:height="100dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="oval">
            <stroke
                android:width="8dp"
                android:color="@android:color/black"/>
        </shape>
    </item>
    <item>
    <shape android:shape="oval">
        <stroke
            android:width="4dp"
            android:color="#FFC107"/>
    </shape>
</item>
    <item>
        <shape android:shape="oval">
            <stroke
                android:width="3dp"
                android:color="#8BC34A"/>
        </shape>
    </item>
</layer-list>
           

在蓝色层外面的那4层width共为10dp,各层的宽度如下：

白色层：白色层的10dp - 黑色层的8dp = 2dp

黑色层：黑色层的8dp - 橙色层的4dp = 4dp

橙色层：橙色层的4dp - 绿色层的3dp = 1dp

绿色层：3dp

结论，外层的width不能超过内层的width

我们在来做个实验，把最外面绿色层的宽度设置为10dp,

....
 <item>
        <shape android:shape="oval">
            <stroke
                android:width="10dp"
                android:color="#8BC34A" />
        </shape>
    </item>
           

看图

结果如想象中的一样，绿色变成10dp 后，内圈中的白、黑、橙，全被绿色给遮住了。

相关文章

使用layer-list 自定义RatingBar