layer-list shape 层叠背景

简介

参考

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

来自为知笔记(Wiz)

附件列表