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

  • 相关阅读:
    BZOJ 4260: Codechef REBXOR(01trie+思维)
    17个CSS知识点整理
    30个很棒的jQuery幻灯片放映插件
    gitHub客户端Desktop的安装使用总结 ---基础篇
    jQuery 瀑布流动态加载效果
    【转】自适应网页设计(Responsive Web Design)
    响应式布局这件小事
    查找指定节点之后的下一个元素节点getNextElement(node)
    转 JavaScript 运动框架 Step by step
    JS常用函数封装
  • 原文地址:https://www.cnblogs.com/tianzhijiexian/p/4505766.html
Copyright © 2011-2022 走看看