巧用用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>