巧用用layer-list做一個卡片背景

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

            <corners android:radius="2dp"/>
            <stroke
                android:width="2dp"
                android:color="#ccc" />

        </shape>
    </item>

    <item
        android:top="0dp"
        android:bottom="2dp"
        >   
        <shape
            android:shape="rectangle"
            android:dither="true">
            <corners android:radius="2dp"/>
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
    
    
</layer-list>

我們注意到上面的文件中有item和shape，shape就不多說了就是一個規則的圖像。其中item用了bottom、top來指定上下的內邊距，最終帶來了如下的效果：

我們來一步一步的理解這是怎么做出來的：

1.首先畫一個只有描邊的shape：

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

            <corners android:radius="2dp"/>
            <stroke
                android:width="2dp"
                android:color="#ccc" />

        </shape>
    </item>

</layer-list>

2.接下來我們需要讓底部顯示出灰色的描邊，其余的地方都應該是白色的，所以寫一個白色的shape，並且底部內邊界是2dp。這里的bottom就是底部的內邊距。

　　<item
        android:bottom="2dp"
        >   
        <shape
            android:shape="rectangle"
            android:dither="true">
            <corners android:radius="2dp"/>
            <solid android:color="@android:color/white"/>
        </shape>
    </item>

3.最終組合起來，產生最終的效果：

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

            <corners android:radius="2dp"/>
            <stroke
                android:width="2dp"
                android:color="#ccc" />
        </shape>
    </item>

    <item
        android:bottom="2dp"
        >   
        <shape
            android:shape="rectangle"
            android:dither="true">
            <corners android:radius="2dp"/>
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
    
</layer-list>

 

參考自：

http://my.oschina.net/u/937713/blog/168673