在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多图层叠加效果实现圆角功能的更多相关文章

  1. android圆角功能,非常好用,可以用在图片,视频,gif等上面

    使用方式:直接在xml中使用即可. <com.base.baseview.RoundLayout android:id="@+id/example_view" android ...

  2. GlideDemo【Glide3.7.0版本的简单使用以及圆角功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本Demo主要记录Glide3.7.0版本的简单运用和实现圆角方案. 效果图 代码分析 Glide的centerCrop()和fit ...

  3. GlideNewDemo【Glide4.7.1版本的简单使用以及圆角功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单记录下Glide4.7.1版本的使用和实现圆角方案. 注意:关于详细使用请仔细阅读<官方指南>. 效果图 使用步骤 ...

  4. layer图层常见属性

    把layer常见图层属性总结了一下^-^欢迎大家讨论~~~~来吧 ,代码属性 #import "CZViewController.h" @interface CZViewContr ...

  5. 设置UI控件的Layer属性(边框可见,边框颜色,边框宽度,边框圆角)

    设置UI控件的Layer属性 #import "ViewController.h" @interface ViewController () @property (strong, ...

  6. ios开发图层layer与核心动画二:CATransform3D,CAlayear和UIView区别,layer的position和anchorpoint

    一:CATransform3D #import "ViewController.h" @interface ViewController () @property (weak, n ...

  7. iOS开发——UI精选OC篇&UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍

    UIApplication,UIWindow,UIViewController,UIView(layer)简单介绍 一:UIApplication:单例(关于单例后面的文章中会详细介绍,你现在只要知道 ...

  8. UIApplication,UIWindow,UIViewController,UIView(layer)

    转载自:http://www.cnblogs.com/iCocos/p/4684749.html UIApplication,UIWindow,UIViewController,UIView(laye ...

  9. 【iOS开发-图层】图层的获取与一些属性

    图层 每个控件都有自己的一个图层,这个空间的全部东西就是显示在这个图层上面的,控件本身没有显示东西的功能,仅仅有拥有了图层才干显示东西 图层的获取 CALayer *layer = self.test ...

随机推荐

  1. linux 删除和安装java

    一.jdk1.4卸载 由于redhat Enterprise 5 中自带安装了jdk1.4的,所以在安装jdk1.6前我把jdk1.4的卸了,步骤如下:   1.打开终端输入#rpm -qa | gr ...

  2. $.Event 你不知道的用法

    最近在使用Bootstrap.js,一不小心趴开源码看了一下,尤其是看到tab.js var hideEvent = $.Event('hide.bs.tab', { relatedTarget: $ ...

  3. css动画,css过度,js动画

    1jQuery动画 语法a$(selector).animate(styles,options) 语法b$(selector).animate(styles,speed,easing,callback ...

  4. Python下的机器学习工具sklearn--数据预处理

    1.数据标准化(Standardization or Mean Removal and Variance Scaling) 进行标准化缩放的数据均值为0,具有单位方差. from sklearn im ...

  5. CSS自学笔记(12):CSS3文字特效

    在CSS3中新增了多个文本属性,同样有了这些属性我们在进行问题特效处理时,就尽可能少的用到其他软件去制作特效文字了. 在以前使用CSS进行web开发的时候,必须使用计算机上安装好的字体,如果有些用户的 ...

  6. windows下使用mingw编译python扩展模块

    环境: 1.python2.7.2 2.mingw20120426 说明: PYTHON_HOME:不做特殊说明的话,默认代表python的安装路径. MINGW_HOME:不做特殊说明的话,默认代表 ...

  7. jQuery学习-事件之绑定事件(二)

    在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) {   ...

  8. 可以使用QT给龙芯开发软件

    直接apt-get install libqt5core5a就有了,也许是一个很好的小众市场机会呢 至于系统,可以使用debian mips https://www.debian.org/devel/ ...

  9. SEO高手在扯蛋?

    真正的高手SEO你在扯蛋吗?当大家都很会扯的时候,高手扯得肯定比你疼,不是他们 蛋比较敏感,而是他们的确更用力. 当你说我是SEO时,高手肯定说现在我在做的是SEM. 当你说我是SEM时,高手肯定在说 ...

  10. CentOS Linux 中文输入法安装及设置

    安装: 1.需要root权限,所以要用root登录 ,或su root 2.yum install "@Chinese Support" 3.exit 4.回到桌面,system- ...