简介
layer-list 是啥
简单理解,layer 是层,list 是列表,那么 layer-list 就是层列表的意思。但是,是什么层列表呢? 其实 layer-list 是用来创建 LayerDrawable 的,LayerDrawable 是 DrawableResource 的一种, 所以,layer-list 创建出来的图层列表,也就是一个 drawable 图形。
因 layer-list 创建出来的也是 drawable 资源,所以,同 shape selector 一样,都是定义在 res 中的 drawable 文件夹中,也是一个 xml 文件。使用的时候,同shape selector , 布局文件中使用 @drawable/ xxx 引用, 代码中使用 R.drawable.xxx 引用。
layer-list 的大致原理
layer-list 的大致原理类似 RelativeLayout(或者FrameLayout) ,也是一层层的叠加 ,后添加的会覆盖先添加的。在 layer-list 中可以通过
控制后添加图层距离最底部图层的上下左右的四个边距、旋转等属性,得到不同的显示效果。
案例1
单一边线效果
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape>
<solid android:color="#f00"/>
</shape>
</item>
<item android:top="1dp">
<shape>
<solid android:color="#fff"/>
</shape>
</item>
</layer-list>
15
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>
6
<solid android:color="#f00"/>
7
</shape>
8
</item>
9
10
<item android:top="1dp">
11
<shape>
12
<solid android:color="#fff"/>
13
</shape>
14
</item>
15
</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="#f00"/>
</shape>
</item>
<item
android:bottom="1dp"
android:top="1dp">
<shape>
<solid android:color="#fff"/>
</shape>
</item>
</layer-list>
17
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>
6
<solid android:color="#f00"/>
7
</shape>
8
</item>
9
10
<item
11
android:bottom="1dp"
12
android:top="1dp">
13
<shape>
14
<solid android:color="#fff"/>
15
</shape>
16
</item>
17
</layer-list>
阴影效果
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="3dp"
android:top="6dp">
<shape>
<solid android:color="#b4b5b6"/>
</shape>
</item>
<item
android:bottom="6dp"
android:right="3dp">
<shape>
<solid android:color="#fff"/>
</shape>
</item>
</layer-list>
19
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="3dp"
6
android:top="6dp">
7
<shape>
8
<solid android:color="#b4b5b6"/>
9
</shape>
10
</item>
11
12
<item
13
android:bottom="6dp"
14
android:right="3dp">
15
<shape>
16
<solid android:color="#fff"/>
17
</shape>
18
</item>
19
</layer-list>
选择器效果
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true">
<layer-list>
<item>
<color android:color="#f00"/>
</item>
<item android:bottom="2dp">
<color android:color="#fff"/>
</item>
</layer-list>
</item>
<item>
<layer-list>
<item>
<color android:color="#f00"/>
</item>
<item android:bottom="1dp">
<color android:color="#fff"/>
</item>
</layer-list>
</item>
</selector>
25
1
<?xml version="1.0" encoding="utf-8"?>
2
<selector xmlns:android="http://schemas.android.com/apk/res/android">
3
4
<item android:state_pressed="true">
5
<layer-list>
6
<item>
7
<color android:color="#f00"/>
8
</item>
9
<item android:bottom="2dp">
10
<color android:color="#fff"/>
11
</item>
12
</layer-list>
13
</item>
14
15
<item>
16
<layer-list>
17
<item>
18
<color android:color="#f00"/>
19
</item>
20
<item android:bottom="1dp">
21
<color android:color="#fff"/>
22
</item>
23
</layer-list>
24
</item>
25
</selector>
案例2
圆环效果
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:dither="true"
android:shape="oval">
<solid android:color="#00f"/>
<stroke
android:width="1dp"
android:color="#fff"/>
</shape>
</item>
<item
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape
android:shape="oval">
<solid android:color="#0f0"/>
<size
android:width="30dp"
android:height="30dp"/>
<stroke
android:width="1dp"
android:color="#fff"/>
</shape>
</item>
<item
android:bottom="20dp"
android:left="20dp"
android:right="20dp"
android:top="20dp">
<shape
android:shape="oval">
<solid android:color="#f00"/>
<size
android:width="30dp"
android:height="30dp"/>
<stroke
android:width="1dp"
android:color="#fff"/>
</shape>
</item>
</layer-list>
48
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
6
android:dither="true"
7
android:shape="oval">
8
<solid android:color="#00f"/>
9
<stroke
10
android:width="1dp"
11
android:color="#fff"/>
12
</shape>
13
</item>
14
15
<item
16
android:bottom="10dp"
17
android:left="10dp"
18
android:right="10dp"
19
android:top="10dp">
20
<shape
21
android:shape="oval">
22
<solid android:color="#0f0"/>
23
<size
24
android:width="30dp"
25
android:height="30dp"/>
26
<stroke
27
android:width="1dp"
28
android:color="#fff"/>
29
</shape>
30
</item>
31
32
<item
33
android:bottom="20dp"
34
android:left="20dp"
35
android:right="20dp"
36
android:top="20dp">
37
<shape
38
android:shape="oval">
39
<solid android:color="#f00"/>
40
<size
41
android:width="30dp"
42
android:height="30dp"/>
43
<stroke
44
android:width="1dp"
45
android:color="#fff"/>
46
</shape>
47
</item>
48
</layer-list>
层叠效果
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="20dp"
android:right="20dp">
<shape android:shape="rectangle">
<solid android:color="#ff0"/>
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
</item>
<item
android:left="10dp"
android:right="10dp"
android:top="10dp">
<shape android:shape="rectangle">
<solid android:color="#0ff"/>
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
</item>
<item android:top="20dp">
<shape android:shape="rectangle">
<solid android:color="#f00"/>
<corners
android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>
</item>
</layer-list>
40
1
<?xml version="1.0" encoding="utf-8"?>
2
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
3
<item
4
android:left="20dp"
5
android:right="20dp">
6
<shape android:shape="rectangle">
7
<solid android:color="#ff0"/>
8
<corners
9
android:bottomLeftRadius="5dp"
10
android:bottomRightRadius="5dp"
11
android:topLeftRadius="5dp"
12
android:topRightRadius="5dp"/>
13
</shape>
14
</item>
15
16
<item
17
android:left="10dp"
18
android:right="10dp"
19
android:top="10dp">
20
<shape android:shape="rectangle">
21
<solid android:color="#0ff"/>
22
<corners
23
android:bottomLeftRadius="5dp"
24
android:bottomRightRadius="5dp"
25
android:topLeftRadius="5dp"
26
android:topRightRadius="5dp"/>
27
</shape>
28
</item>
29
30
<item android:top="20dp">
31
<shape android:shape="rectangle">
32
<solid android:color="#f00"/>
33
<corners
34
android:bottomLeftRadius="5dp"
35
android:bottomRightRadius="5dp"
36
android:topLeftRadius="5dp"
37
android:topRightRadius="5dp"/>
38
</shape>
39
</item>
40
</layer-list>
案例3
最后一个bitmap
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--不设置 gravity=center 时会自动缩放-->
<item>
<shape>
<solid android:color="#1000"/>
</shape>
</item>
<item android:gravity="center">
<bitmap android:src="@drawable/icon5"/>
</item>
<item android:gravity="left|top">
<bitmap android:src="@drawable/icon1"/>
</item>
<item android:gravity="right|top">
<bitmap android:src="@drawable/icon2"/>
</item>
<item android:gravity="right|bottom">
<bitmap android:src="@drawable/icon3"/>
</item>
<item android:gravity="left|bottom">
<bitmap android:src="@drawable/icon4"/>
</item>
</layer-list>
bitmap
x
1
<?xml version="1.0" encoding="utf-8"?>
2
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
3
<!--不设置 gravity=center 时会自动缩放-->
4
<item>
5
<shape>
6
<solid android:color="#1000"/>
7
</shape>
8
</item>
9
10
<item android:gravity="center">
11
<bitmap android:src="@drawable/icon5"/>
12
</item>
13
14
<item android:gravity="left|top">
15
<bitmap android:src="@drawable/icon1"/>
16
</item>
17
18
<item android:gravity="right|top">
19
<bitmap android:src="@drawable/icon2"/>
20
</item>
21
22
<item android:gravity="right|bottom">
23
<bitmap android:src="@drawable/icon3"/>
24
</item>
25
26
<item android:gravity="left|bottom">
27
<bitmap android:src="@drawable/icon4"/>
28
</item>
29
</layer-list>
最后一个 drawable
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--不设置 gravity=center 时会自动缩放-->
<item>
<shape>
<solid android:color="#1000"/>
</shape>
</item>
<item
android:bottom="15sp"
android:drawable="@drawable/icon5"
android:gravity="center"
android:left="15sp"
android:right="15sp"
android:top="15sp"/>
<item
android:bottom="30dp"
android:drawable="@drawable/icon1"
android:gravity="center"
android:right="30dp"/>
<item
android:bottom="30dp"
android:drawable="@drawable/icon2"
android:gravity="center"
android:left="30dp"/>
<item
android:drawable="@drawable/icon3"
android:gravity="center"
android:left="30dp"
android:top="30dp"/>
<item
android:drawable="@drawable/icon4"
android:gravity="center"
android:right="30dp"
android:top="30dp"/>
</layer-list>
x
1
<?xml version="1.0" encoding="utf-8"?>
2
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
3
<!--不设置 gravity=center 时会自动缩放-->
4
<item>
5
<shape>
6
<solid android:color="#1000"/>
7
</shape>
8
</item>
9
10
<item
11
android:bottom="15sp"
12
android:drawable="@drawable/icon5"
13
android:gravity="center"
14
android:left="15sp"
15
android:right="15sp"
16
android:top="15sp"/>
17
18
<item
19
android:bottom="30dp"
20
android:drawable="@drawable/icon1"
21
android:gravity="center"
22
android:right="30dp"/>
23
24
<item
25
android:bottom="30dp"
26
android:drawable="@drawable/icon2"
27
android:gravity="center"
28
android:left="30dp"/>
29
30
<item
31
android:drawable="@drawable/icon3"
32
android:gravity="center"
33
android:left="30dp"
34
android:top="30dp"/>
35
36
<item
37
android:drawable="@drawable/icon4"
38
android:gravity="center"
39
android:right="30dp"
40
android:top="30dp"/>
41
</layer-list>
2018-8-8
附件列表