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