<?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

用layer-list做一个卡片背景的更多相关文章

  1. 巧用用layer-list做一个卡片背景

    <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android=" ...

  2. 用bootstrap做一个背景可轮转的登录界面

    用bootstrap做一个背景可轮转的登录界面 一.总结 一句话总结:用css3的动画的 @keyframes 规则,制作轮转图. 1.用bootstrap做一个背景可轮转的登录界面? a.动画部分用 ...

  3. 做一个阅读管理APP

    背景 由于最近在看的书有点多,所以一直想找一个能够管理阅读进度的书(鄙人记性不是很好,两天不看就忘了)可惜Android平台上一直找不到合适的APP: 有没有读书进度管理的网站或软件啊? 有没有记录读 ...

  4. 【Bugly干货分享】一起用 HTML5 Canvas 做一个简单又骚气的粒子引擎

    Bugly 技术干货系列内容主要涉及移动开发方向,是由Bugly邀请腾讯内部各位技术大咖,通过日常工作经验的总结以及感悟撰写而成,内容均属原创,转载请标明出处. 前言 好吧,说是“粒子引擎”还是大言不 ...

  5. 做一个会PS切图的前端开发

    系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的 ...

  6. 领导让我重新做一个微信H5页面!

    leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第 ...

  7. 一起用HTML5 canvas做一个简单又骚气的粒子引擎

    前言 好吧,说是"粒子引擎"还是大言不惭而标题党了,离真正的粒子引擎还有点远.废话少说,先看demo 本文将教会你做一个简单的canvas粒子制造器(下称引擎). 世界观 这个简单 ...

  8. NetAnalyzer笔记 之 三. 用C++做一个抓包程序

    [创建时间:2015-08-27 22:15:17] NetAnalyzer下载地址 经过前两篇的瞎扯,你是不是已经厌倦了呢,那么这篇让我们来点有意思的吧,什么,用C#.不,这篇我们先来C++的 Wi ...

  9. - 通过 UIBezierPath 做一个中空的扫描器

    今天在公司的代码里看到通过 UIBezierPath 绘制 CALayer 然后实现中空的正方形,感觉还挺有意思的,简单记录一下 UIBezierPath 这个东西. 一条线 我们自定义一个 Bezi ...

随机推荐

  1. 【转】C#命名规范

    原文地址:http://www.jb51.net/article/57163.htm 本文详细汇总了C#常用的命名规则.分享给大家供大家参考.具体如下: Pascal 规则每个单词开头的字母大写(如 ...

  2. Win8电源选项中没有休眠这一项如何让Win8也能够休眠

    我们都知道,Win8默认的电源选项中是没有休眠这一选项的,即使用Alt+F4打开关闭Windows选项窗口也看不到”休眠“.难道Win8就不能够休眠了吗?答案当然不是,我们只要进行一些设置就能让Win ...

  3. Image与Bitmap的区别及相互转换

    1. Image.FromFile()返回的是某个继承自Image的具体类的对象,在这里,就是Bitmap或者Metafile其中之一.这应该算是factory pattern的一种形式.所以,Ima ...

  4. Delphi 画箭头

    procedure TForm1.Line(x, y, x2, y2: integer); begin canvas.MoveTo(x, y); canvas.LineTo(x2, y2); end; ...

  5. C# event 事件学习

    C# event 事件学习 运行环境:Window7 64bit,.NetFramework4.61,C# 6.0: 编者:乌龙哈里 2017-02-26 章节: 简单事件编写 模拟 WPF 控件传递 ...

  6. spring boot aop打印http请求回复日志包含请求体

    一.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  7. java核心知识点 --- 线程池ThreadPool

    线程池是多线程学习中需要重点掌握的. 系统启动一个新线程的成本是比较高的,因为它涉及与操作系统交互.在这种情形下,使用线程池可以很好的提高性能,尤其是当程序中需要创建大量生存期很短暂的线程时,更应该考 ...

  8. Android Studio 无法正确引入包内存在的类

    Android Studio 无法识别同一个 package 里的类,显示为红色,但是 compile 没有问题. 重启,rebuild,clean都没有用. 多半是因为 Android Studio ...

  9. EasyBuy项目总结_20180409

    一.项目技术点 1.熟练使用jsp及el和jstl表达式 el: $() jstl: 1.导包; 2.声明<%@ taglib uri=" " preffix="c ...

  10. 对称二叉树 · symmetric binary tree

    [抄题]: Given a binary tree, check whether it is a mirror of itself (ie, symmetric around its center). ...