用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

posted @ 2017-04-08 15:51  linghu_java  阅读(303)  评论(0编辑  收藏  举报