zoukankan      html  css  js  c++  java
  • 用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

  • 相关阅读:
    测试心得 --基于微信小图书销售小程序
    结对编程总结——by 汪庆祥&尹宗文
    结对编程_队友代码分析
    测试心得:微图书销售小程序
    数据库设计心得
    结对编程之代码互评
    商品销量预测与分析测试 心得
    第一次迭代总结
    结对编程之结对编程总结
    结对编程之队友代码分析
  • 原文地址:https://www.cnblogs.com/linghu-java/p/6682060.html
Copyright © 2011-2022 走看看