通过layer-list多图层叠加效果实现圆角功能
2015-08-31 15:25
351 查看
在android的开发过程中,我们可能会做圆角的效果出来,如下图所示:
四个角都是圆角的效果。如果让UI设计人员直接出图,可能会更简单一些。但是我们使用android中layer-list多图层叠加效果同样可以实现。
我们把它拆分为三个部分,第一个部分是最顶端的那一行(我这里称为顶部),第二部分是中间部分(中间部分不需要圆角效果),第三部分是底部。
顶部的实现:
顶部是一个有灰色边框但无下边框,带圆角,白色背景的长方体。实现效果如下:
中间部分是一个不带圆角 白色背景 灰色边框 无下边框 长方体.实现效果如下:
底部是一个具有底部圆角,白色背景,灰色边框的长方体,实现效果如下:
四个角都是圆角的效果。如果让UI设计人员直接出图,可能会更简单一些。但是我们使用android中layer-list多图层叠加效果同样可以实现。
我们把它拆分为三个部分,第一个部分是最顶端的那一行(我这里称为顶部),第二部分是中间部分(中间部分不需要圆角效果),第三部分是底部。
顶部的实现:
顶部是一个有灰色边框但无下边框,带圆角,白色背景的长方体。实现效果如下:
<?xml version="1.0" encoding="UTF-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item > <shape> <solid android:color="#FFFFFF" /> <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" /> <stroke android:width="1dp" android:color="#ffa8abad" /> </shape> </item> <item android:top="1dp" android:left="1dp" android:right="1dp"> <shape> <solid android:color="#FFFFFF" /> <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" /> <stroke android:width="1dp" android:color="#ffffffff" /> </shape> </item> </layer-list>
中间部分是一个不带圆角 白色背景 灰色边框 无下边框 长方体.实现效果如下:
<?xml version="1.0" encoding="UTF-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape> <solid android:color="#FFFFFF" /> <stroke android:width="1dp" android:color="#ffa8abad" /> </shape> </item> <item android:left="1dp" android:right="1dp" android:top="1dp"> <shape> <solid android:color="#FFFFFF" /> <stroke android:width="1dp" android:color="#ffffffff" /> </shape> </item> </layer-list>
底部是一个具有底部圆角,白色背景,灰色边框的长方体,实现效果如下:
<?xml version="1.0" encoding="UTF-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape> <solid android:color="#FFFFFF" /> <corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp" android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" /> <stroke android:width="1dp" android:color="#ffa8abad" /> </shape> </item> <item android:top="1dp" android:bottom="1dp" android:left="1dp" android:right="1dp"> <shape> <solid android:color="#FFFFFF" /> <corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp" android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" /> <stroke android:width="1dp" android:color="#ffffffff" /> </shape> </item> </layer-list>
相关文章推荐
- 安装rpm包
- 一步步开发自己的博客 .NET版(3、注册登录功能)
- org.hibernate.hql.ast.QuerySyntaxException: is not mapped
- springmvc配置
- for循环 i 闭包
- Android Gson解析JSON数据
- 17. jQuery - css() 方法
- RabbitMQ Consumer获取消息的两种方式(poll,subscribe)解析
- 五种开源协议的比较(BSD,Apache,GPL,LGPL,MIT) – 整理
- Tomcat在Linux上的安装与配置
- 高可用性网络
- 开了一个新的C语言班级
- Knockout应用开发指南 第六章:加载或保存JSON数据
- CXF生成WebService调用方法
- jquery中prop&attr之disabled问题
- heat ResourceGroup资源使用介绍
- cocos2d-x 3.4版本游戏打包AKP (重点记录如何解决打包过程中遇到的各种问题)
- Linux编程基础——Socket编程
- 数据库查询显示问题
- Eclipse导出Android应用程序以及在真机和仿真机的安装