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