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