<?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. js最佳继承范型

    先回想下怎么给一个类设置属性:1.构造函数 内  通过this2.prototype中的属性两者的区别就是构造函数中的属性是每个实例私有的,而prototype中的属性是所有实例共有的(一般方法和静态 ...

  2. 队列Queue

    java中,Queue是Collection接口的子接口,Queue的实现类很多,如LinkedList类. 实际使用可以用LinkedList写一个Queue类,实现入队.出队.求队长.判空.打印等 ...

  3. NYOJ-58 最小步数 AC 分类: NYOJ 2014-01-22 22:01 217人阅读 评论(0) 收藏

    #include<stdio.h> void dfs(int step,int x,int y); int d[4][2] = {{1,0},{-1,0},{0,1},{0,-1}}; i ...

  4. xcode 工具栏中放大镜的替换的说明

    1.如果是在打开的文档范围内:       查找: Command+ F       替换: Option+Command+F                   Replace All   是全部替 ...

  5. 如何设置多个同一页的tinymce编辑

    的页面设置多个tinymce编辑器 This example shows how to setup multiple editors on the same page and with differe ...

  6. 文件的默认权限UMASK

    当进入Linux系统后新创建的文件或者文件夹总是会有一个默认的权限,那么这个权限是如何设置的呢? umask就是设置文件与目录的默认权限 1. 查看umask 直接查看, [root@centos6 ...

  7. Infopath 2010 接收SQL Server数据

    Infopath2010为我们提供了多种接收数据的方式,今天我来讲讲里面其中的一种直接读取SQL Server数据库表数据方法(高阶者的下面可以略省,只针对入门者). 1.选择数据库(SQL) 2.选 ...

  8. linux下ssh远程登录/scp远程复制文件/rsync远程同步命令的自动登录

    最近需要写一个脚本备份各个服务器上的程序到一个指定服务器上,本来以为查查rsync命令的使用321就能搞定,结果rsync命令要支持自动登 录还是要配置服务和参数,又不确定网上说的配置的行不行,因为都 ...

  9. 实验三 Java猜数字游戏开发

    课程:Java实验   班级:201352     姓名:程涵  学号:20135210 成绩:             指导教师:娄佳鹏   实验日期:15.06.03 实验密级:         ...

  10. java实验1实验报告(20135232王玥)

    实验一 Java开发环境的熟悉 一.实验内容 1. 使用JDK编译.运行简单的Java程序 2.使用Eclipse 编辑.编译.运行.调试Java程序 二.实验要求 1.没有Linux基础的同学建议先 ...