通过layer-list多图层叠加效果实现圆角功能
在android的开发过程中,我们可能会做圆角的效果出来,如下图所示:
四个角都是圆角的效果。如果让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>
通过layer-list多图层叠加效果实现圆角功能的更多相关文章
- android圆角功能,非常好用,可以用在图片,视频,gif等上面
使用方式:直接在xml中使用即可. <com.base.baseview.RoundLayout android:id="@+id/example_view" android ...
- GlideDemo【Glide3.7.0版本的简单使用以及圆角功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本Demo主要记录Glide3.7.0版本的简单运用和实现圆角方案. 效果图 代码分析 Glide的centerCrop()和fit ...
- GlideNewDemo【Glide4.7.1版本的简单使用以及圆角功能】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单记录下Glide4.7.1版本的使用和实现圆角方案. 注意:关于详细使用请仔细阅读<官方指南>. 效果图 使用步骤 ...
- layer图层常见属性
把layer常见图层属性总结了一下^-^欢迎大家讨论~~~~来吧 ,代码属性 #import "CZViewController.h" @interface CZViewContr ...
- 设置UI控件的Layer属性(边框可见,边框颜色,边框宽度,边框圆角)
设置UI控件的Layer属性 #import "ViewController.h" @interface ViewController () @property (strong, ...
- ios开发图层layer与核心动画二:CATransform3D,CAlayear和UIView区别,layer的position和anchorpoint
一:CATransform3D #import "ViewController.h" @interface ViewController () @property (weak, n ...
- iOS开发——UI精选OC篇&UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍
UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍 一:UIApplication:单例(关于单例后面的文章中会详细介绍,你现在只要知道 ...
- UIApplication,UIWindow,UIViewController,UIView(layer)
转载自:http://www.cnblogs.com/iCocos/p/4684749.html UIApplication,UIWindow,UIViewController,UIView(laye ...
- 【iOS开发-图层】图层的获取与一些属性
图层 每个控件都有自己的一个图层,这个空间的全部东西就是显示在这个图层上面的,控件本身没有显示东西的功能,仅仅有拥有了图层才干显示东西 图层的获取 CALayer *layer = self.test ...
随机推荐
- linux 删除和安装java
一.jdk1.4卸载 由于redhat Enterprise 5 中自带安装了jdk1.4的,所以在安装jdk1.6前我把jdk1.4的卸了,步骤如下: 1.打开终端输入#rpm -qa | gr ...
- $.Event 你不知道的用法
最近在使用Bootstrap.js,一不小心趴开源码看了一下,尤其是看到tab.js var hideEvent = $.Event('hide.bs.tab', { relatedTarget: $ ...
- css动画,css过度,js动画
1jQuery动画 语法a$(selector).animate(styles,options) 语法b$(selector).animate(styles,speed,easing,callback ...
- Python下的机器学习工具sklearn--数据预处理
1.数据标准化(Standardization or Mean Removal and Variance Scaling) 进行标准化缩放的数据均值为0,具有单位方差. from sklearn im ...
- CSS自学笔记(12):CSS3文字特效
在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的 ...
- windows下使用mingw编译python扩展模块
环境: 1.python2.7.2 2.mingw20120426 说明: PYTHON_HOME:不做特殊说明的话,默认代表python的安装路径. MINGW_HOME:不做特殊说明的话,默认代表 ...
- jQuery学习-事件之绑定事件(二)
在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) { ...
- 可以使用QT给龙芯开发软件
直接apt-get install libqt5core5a就有了,也许是一个很好的小众市场机会呢 至于系统,可以使用debian mips https://www.debian.org/devel/ ...
- SEO高手在扯蛋?
真正的高手SEO你在扯蛋吗?当大家都很会扯的时候,高手扯得肯定比你疼,不是他们 蛋比较敏感,而是他们的确更用力. 当你说我是SEO时,高手肯定说现在我在做的是SEM. 当你说我是SEM时,高手肯定在说 ...
- CentOS Linux 中文输入法安装及设置
安装: 1.需要root权限,所以要用root登录 ,或su root 2.yum install "@Chinese Support" 3.exit 4.回到桌面,system- ...