引言

  在开发某些有层叠效果App时,我们第一个想到的就是让UI进行切图。下面我们来这样的一个例子。如图所示:

  上图Tab的背景效果,和带阴影的圆角矩形,是怎么实现的呢?大部分的人会让美工切图,用点九图做背景。但是,如果只提供一张图,会怎么样呢?比如,中间的Tab背景红色底线的像素高度为4px,那么,在mdpi设备上显示会符合预期,在hdpi设备上显示时会细了一点点,在xhdpi设备上显示时会再细一点,在xxhdpi上显示时又细了,在xxxhdpi上显示时则更细了。因为在xxxhdpi上,1dp=4px,所以,4px的图,在xxxhdpi设备上显示时,就只剩下1dp了。所以,为了适配好各种分辨率,必须提供相应的多套图片。如果去查看android的res源码资源,也会发现,像这种Tab的背景点九图,也根据不同分辨率尺寸提供了不同尺寸的点九图片。

  但是,在这个demo里,都没有用到任何实际的图片资源,都是用shape、selector,以及本篇要讲解的layer-list完成的。

layer-list叠加效果

  使用layer-list可以将多个drawable按照顺序层叠在一起显示,像上图中的Tab,是由一个红色的层加一个白色的层叠在一起显示的结果,阴影的圆角矩形则是由一个灰色的圆角矩形叠加上一个白色的圆角矩形。

  下面我们先来看一下Tab背景的代码: 

 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 选中时候的样式 -->
<item android:state_checked="true">
<layer-list>
<!-- 红色背景 -->
<item>
<color android:color="#E4007F" />
</item>
<!-- 白色背景 -->
<item android:bottom="4dp" android:drawable="@android:color/white" />
</layer-list>
</item> <!--未选中时候的样式-->
<item>
<layer-list>
<!-- 红色背景 -->
<item>
<color android:color="#E4007F" />
</item>
<!-- 白色背景 -->
<item android:bottom="1dp" android:drawable="@android:color/white" />
</layer-list>
</item> </selector>

  我们看到我们在样式文件定义了两个item,第一个是选中时item就是bottom向上4dp。第二个item就是正常情况下的样式。

  下面我们再来看一下圆角带阴影的按钮样式

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!--绘制矩形的灰色阴影-->
<item
android:left="2dp"
android:top="4dp">
<shape>
<solid android:color="#929397"/>
<corners android:radius="10dp"/>
</shape>
</item> <!--绘制矩形的白色主体-->
<item
android:right="2dp"
android:bottom="4dp">
<shape>
<solid android:color="#ffffff"/>
<corners android:radius="10dp" />
</shape>
</item> </layer-list >

  从上面的示例代码可以看到,layer-list可以作为根节点,也可以作为selector中item的子节点。layer-list可以添加多个item子节点,每个item子节点对应一个drawable资源,按照item从上到下的顺序叠加在一起,再通过设置每个item的偏移量就可以看到阴影等效果了。layer-list的item可以通过下面四个属性设置偏移量:

  • android:top 顶部的偏移量
  • android:bottom 底部的偏移量
  • android:left 左边的偏移量
  • android:right 右边的偏移量

  这四个偏移量和控件的margin设置差不多,都是外间距的效果。如何不设置偏移量,前面的图层就完全挡住了后面的图层,从而也看不到后面的图层效果了。比如上面的例子,Tab背景中的白色背景设置了android:bottom之后才能看到一点红色背景。

总结 

  • 根节点不同时,可设置的属性是会不同的,比如selector下,可以设置一些状态属性,而在layer-list下,可以设置偏移量;
  • 就算父节点同样是selector,放在drawable目录和放在color目录下可用的属性也会不同,比如drawable目录下可用的属性为android:drawable,在color目录下可用的属性为android:color;
  • item的子节点可以为任何类型的drawable类标签,除了上面例子中的shape、color、layer-list,也可以是selector,还有其他没讲过的bitmap、clip、scale、inset、transition、rotate、animated-rotate、lever-list等等。

完整样例

  下面我给出以上效果完整的XML代码,Tab页使用的是RadioButton。完整布局如下:

 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#bababc"> <RadioGroup
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:id="@+id/line1"> <RadioButton
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:button="@null"
android:text="Tab1"
android:textColor="@drawable/text_style"
android:textSize="18dp"
android:gravity="center"
android:paddingTop="12dp"
android:paddingBottom="12dp"
android:background="@drawable/layer_list_sample_style"/> <RadioButton
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:button="@null"
android:text="Tab2"
android:textColor="@drawable/text_style"
android:textSize="18dp"
android:gravity="center"
android:paddingTop="12dp"
android:paddingBottom="12dp"
android:background="@drawable/layer_list_sample_style"/> <RadioButton
android:layout_width="0dp"
android:layout_height="60dp"
android:layout_weight="1"
android:button="@null"
android:text="Tab3"
android:textColor="@drawable/text_style"
android:textSize="18dp"
android:gravity="center"
android:paddingTop="12dp"
android:paddingBottom="12dp"
android:background="@drawable/layer_list_sample_style"/> </RadioGroup> <TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/line1"
android:text="带阴影的圆角矩形"
android:textColor="#333333"
android:textSize="18dp"
android:gravity="center"
android:paddingTop="18dp"
android:paddingBottom="18dp"
android:layout_margin="30dp"
android:background="@drawable/button_style"/> </RelativeLayout>

 参考文档

  http://keeganlee.me/post/android/20150909

浅谈Android样式开发之layer-list的更多相关文章

  1. 浅谈Android样式开发之View Animation (视图动画)

    引言 一个用户体验良好的App肯定少不了动画效果.Android为我们提供了2种动画框架,分别是视图动画(View Animation)和属性动画(Property Animation).视图动画比较 ...

  2. 浅谈Android样式开发之selector

    引言 上一篇Android UI中文章我们详细介绍了Android中shape标签的使用.通过shape标签我们可以定义矩形.椭圆.环形.直线等效果.不过shape只能定义单一的形状,在实际开发中,我 ...

  3. 浅谈Android样式开发之shape

    引言 在Android开发中我们很多情况都是使用图片来展示相关效果,今天我就来详细介绍下Android下使用Shape来进行简单UI的开发.一方面这些是Android开发的基础,另一方面这方面的知识可 ...

  4. 【sql注入】浅谈JSP安全开发之SQL注入

    [sql注入]浅谈JSP安全开发之SQL注入 本文转自:i春秋社区 前言不管是用什么语言编写WEB应用程序,他们都或多或少有一些地方存在漏洞.如果你想知道漏洞的运行原理,和防御方案,那么请看完本篇文章 ...

  5. 浅谈Android样式开发之布局优化

    引言 今天我们来谈一下Android中布局优化常用的一些手段.官方给出了3种优化方案,分别是</include>.</viewstub>.</merge>标签,下面 ...

  6. 浅谈android4.0开发之GridLayout布局

    作者:李响 本文重点讲述了自android4.0版本号后新增的GridLayout网格布局的一些基本内容,并在此基础上实现了一个简单的计算器布局框架.通过本文,您可以了解到一些android UI开发 ...

  7. 【安全开发】浅谈JSP安全开发之XSS

    前言     大家好,好男人就是我,我就是好男人,我就是-0nise.在各大漏洞举报平台,我们时常会看到XSS漏洞.那么问题来了,为何会出现这种漏洞?出现这种漏洞应该怎么修复?目录     1.XSS ...

  8. Android安全开发之ZIP文件目录遍历

    1.ZIP文件目录遍历简介 因为ZIP压缩包文件中允许存在“../”的字符串,攻击者可以利用多个“../”在解压时改变ZIP包中某个文件的存放位置,覆盖掉应用原有的文件.如果被覆盖掉的文件是动态链接s ...

  9. 浅谈Android Studio3.0更新之路(遇坑必入)

    >可以参考官网设置-> 1 2 >> Fantasy_Lin_网友评论原文地址是:简书24K纯帅豆写的我也更新一下出处[删除]Fa 转自脚本之家 浅谈Android Studi ...

随机推荐

  1. SQL删除语句同时向备份表插入数据

    从这里摘抄下来的,觉得很不错,http://www.cnblogs.com/ljhdo/p/5792886.html#3503524 ,以后就用这种方式删除,再也不用担心删除错数据啦!!!

  2. SQL Server 2014新特性:其他

    AlwaysOn 增强功能 SQL Server 2014 包含针对 AlwaysOn 故障转移群集实例和 AlwaysOn 可用性组的以下增强功能: “添加 Azure 副本向导”简化了用于 Alw ...

  3. Spring类型转换 ConversionSerivce Convertor

    以String转Date为例:   定义转换器:    import java.text.ParseException; import java.util.Date; import org.apach ...

  4. python列表模拟堆栈和队列

    对列特点:先进先出.后进后出 用列表insert.pop模拟进队出队: >>> l = [] >>> l.insert(0,'p1') >>> l ...

  5. mongodb基础篇

    一.  关于mongodb 两种非关系数据库 Redis:满足极高读写性能的Key-Value数据库 键值式储存,可以通过键快速查询到值. 内存数据库,类似于mencached.性能出色.容量低,不具 ...

  6. hbase 权威指南笔记(二)

    这次我们先来讨论hbase的重试机制,为什么呐,因为最近公司最近也在做这方面的优化,所以就今天研究的一些成功记录一下. configuration.setInt("hbase.client. ...

  7. struts2实现文件上传(多文件上传)及下载

    一.要实现文件上传,需在项目中添加两个jar文件 二.上传准备的页面 注:必须植入enctype="multipart/form-data"属性,以及提交方式要设置成post &l ...

  8. webgl画个点

    function main(){ var canvas = document.getElementById("webgl"); var gl = getWebGLContext(c ...

  9. [LeetCode] Repeated DNA Sequences 求重复的DNA序列

    All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...

  10. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...