Android中layer-list使用详解

使用layer-list可以将多个drawable按照顺序层叠在一起显示,默认情况下,所有的item中的drawable都会自动根据它附上view的大小而进行缩放,

layer-list中的item是按照顺序从下往上叠加的,即先定义的item在下面,后面的依次往上面叠放

例子

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.       
  4.     <item >  
  5.         <shape android:shape="rectangle" >  
  6.             <solid android:color="#0000ff"/>  
  7.         </shape>  
  8.     </item>  
  9.   
  10.     <item android:bottom="25dp" android:top="25dp" android:left="25dp" android:right="25dp">  
  11.         <shape android:shape="rectangle" >  
  12.             <solid android:color="#00ff00" />  
  13.         </shape>  
  14.     </item>  
  15.   
  16.     <item android:bottom="50dp" android:top="50dp" android:left="50dp" android:right="50dp">  
  17.         <shape android:shape="rectangle" >  
  18.             <solid android:color="#ff0000" />  
  19.         </shape>  
  20.     </item>  
  21. </layer-list  
布局

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent">  
  5.     <ImageView  
  6.         android:layout_width="150dp"  
  7.         android:layout_height="150dp"   
  8.         android:background="@drawable/layer_list"/>  
  9. </LinearLayout>  

效果图

红色item最后定义在最上方,绿色item中间,最先定义蓝色最下边

这里设置了Android:bottom="50dp" android:top="50dp" android:left="50dp" android:right="50dp"属性
android:top="50dp";表示该item上边以ImageView上边界往里面缩了50dp
android:bottom="50dp"表示该item下边以ImageView下边界往里面缩了50dp
android:left="50dp";表示该item左边以ImageView左边界往里面缩了50dp
android:right="50dp";表示该item右边以ImageView右边界往里面缩了50dp

android:bottom="25dp" android:top="25dp" android:left="25dp" android:right="25dp"类似



layer-list给指定view实现三面边框

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.   
  4.   
  5.     <item >  
  6.         <shape android:shape="rectangle" >  
  7.             <solid android:color="#ff0000"/>  
  8.         </shape>  
  9.     </item>  
  10.   
  11.     <item android:bottom="2dp" android:top="2dp"  android:right="2dp">  
  12.         <shape android:shape="rectangle" >  
  13.             <solid android:color="#ffffff" />  
  14.         </shape>  
  15.     </item>  
  16.   
  17.   
  18. </layer-list>   

布局

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.       
  8.     <LinearLayout  
  9.         android:layout_width="150dp"  
  10.         android:layout_height="50dp"  
  11.         android:background="@drawable/border"  
  12.         android:layout_gravity="center"  
  13.         android:orientation="vertical"  
  14.         >  
  15.     </LinearLayout>  
  16. </LinearLayout>  
效果图


------------------


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

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <!-- 第一种加载方式 -->  
  4.     <!--<item android:drawable="@drawable/bg_tab_selected" android:state_checked="true" />-->  
  5.     <!-- 第二种加载方式 -->  
  6.     <item android:state_checked="true">  
  7.         <layer-list>  
  8.             <!-- 红色背景 -->  
  9.             <item>  
  10.                 <color android:color="#E4007F" />  
  11.             </item>  
  12.             <!-- 白色背景 -->  
  13.             <item android:bottom="4dp" android:drawable="@android:color/white" />  
  14.         </layer-list>  
  15.     </item>  
  16.     <item>  
  17.         <layer-list>  
  18.             <!-- 红色背景 -->  
  19.             <item>  
  20.                 <color android:color="#E4007F" />  
  21.             </item>  
  22.             <!-- 白色背景 -->  
  23.             <item android:bottom="1dp" android:drawable="@android:color/white" />  
  24.         </layer-list>  
  25.     </item>  
  26. </selector>  

以下是带阴影的圆角矩形:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <!-- 灰色阴影 -->  
  4.     <item  
  5.         android:left="2dp"  
  6.         android:top="4dp">  
  7.         <shape>  
  8.             <solid android:color="@android:color/darker_gray" />  
  9.             <corners android:radius="10dp" />  
  10.         </shape>  
  11.     </item>  
  12.     <!-- 白色前景 -->  
  13.     <item  
  14.         android:bottom="4dp"  
  15.         android:right="2dp">  
  16.         <shape>  
  17.             <solid android:color="#FFFFFF" />  
  18.             <corners android:radius="10dp" />  
  19.         </shape>  
  20.     </item>  
  21. </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之后才能看到一点红色背景。那么如果偏移量设为负值会怎么样呢?经过验证,偏移超出的部分会被截掉而看不到,不信可以自己试一下。有时候这很有用,比如当我想显示一个半圆的时候。

另外,关于item的用法,也做下总结:

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

http://www.cnblogs.com/liuling/p/2015-9-23-1.html

http://www.cnblogs.com/tsoorr/p/3407935.html

https://my.oschina.NET/u/937713/blog/168673

http://blog.csdn.Net/a1031359915/article/details/41048231

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值