Android青铜篇-layer-list

发表于 | 分类于 | | 热度 ℃

Android

layer-list可以将多个drawable按照顺序层叠在一起显示，默认情况下，所有的item中的drawable都会自动根据它附上view的大小而进行缩放，layer-list中的item是按照顺序从下往上叠加的，即先定义的item在下面，后面的依次往上面叠放。

简单示例

  • Drawable，layer-list结合shape

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <?xml version="1.0" encoding="utf-8"?>  
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
    	  
    	<item >  
    		<shape android:shape="rectangle" >  
    			<solid android:color="#0000ff"/>  
    		</shape>  
    	</item>  
      
    	<item android:bottom="25dp" android:top="25dp" android:left="25dp" android:right="25dp">  
    		<shape android:shape="rectangle" >  
    			<solid android:color="#00ff00" />  
    		</shape>  
    	</item>  
      
    	<item android:bottom="50dp" android:top="50dp" android:left="50dp" android:right="50dp">  
    		<shape android:shape="rectangle" >  
    			<solid android:color="#ff0000" />  
    		</shape>  
    	</item>  
    </layer-list>

  • 布局文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <?xml version="1.0" encoding="utf-8"?>  
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    	android:layout_width="match_parent"  
    	android:layout_height="match_parent">  
    	<ImageView  
    		android:layout_width="150dp"  
    		android:layout_height="150dp"   
    		android:background="@drawable/layer_list"/>  
    </LinearLayout>

  • 效果图
    shape-layer-list

红色item最后定义在最上方，绿色item中间，最先定义蓝色最下边，属性设置如：

1
2
3
4
android:bottom="50dp"  表示该item下边以ImageView下边界往里面缩了50dp
android:top="50dp"  表示该item上边以ImageView上边界往里面缩了50dp
android:left="50dp"  表示该item左边以ImageView左边界往里面缩了50dp
android:right="50dp" 表示该item右边以ImageView右边界往里面缩了50dp

其他item类似

layer-list实现三面边框

  • Drawable

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <?xml version="1.0" encoding="utf-8"?>  
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
    	<item >  
    		<shape android:shape="rectangle" >  
    			<solid android:color="#ff0000"/>  
    		</shape>  
    	</item>  
      
    	<item android:bottom="2dp" android:top="2dp"  android:right="2dp">  
    		<shape android:shape="rectangle" >  
    			<solid android:color="#ffffff" />  
    		</shape>  
    	</item>  
    </layer-list>

  • 效果图
    layer-list三面边框

阴影效果

layer-list阴影

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    <?xml version="1.0" encoding="utf-8"?>  
    <selector xmlns:android="http://schemas.android.com/apk/res/android">  
    	<!-- 第一种加载方式 -->  
    	<!--<item android:drawable="@drawable/bg_tab_selected" android:state_checked="true" />-->  
    	<!-- 第二种加载方式 -->  
    	<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>

  • 以下是带阴影的圆角矩形：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <?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="@android:color/darker_gray" />  
                <corners android:radius="10dp" />  
            </shape>  
        </item>  
        <!-- 白色前景 -->  
        <item  
            android:bottom="4dp"  
            android:right="2dp">  
            <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之后才能看到一点红色背景。那么如果偏移量设为负值会怎么样呢？经过验证，偏移超出的部分会被截掉而看不到，不信可以自己试一下。有时候这很有用，比如当我想显示一个半圆的时候。
另外，关于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等等。

谢谢老板，请尽情用红包来蹂躏我吧！！！
0%