参考:https://blog.csdn.net/north1989/article/details/53485729
layer-list简介:
简单理解,layer 是层,list 是列表,那么 layer-list 就是层列表的意思。但是,是什么层列表呢? 其实 layer-list 是用来创建 LayerDrawable 的,LayerDrawable 是 DrawableResource 的一种, 所以,layer-list 创建出来的是 图层列表,也就是一个drawable 图形。
layer-list的原理
layer-list 的大致原理类似 RelativeLayout(或者FrameLayout) ,也是一层层的叠加 ,后添加的会覆盖先添加的。在 layer-list 中可以通过 控制后添加图层距离最底部图层的 左上右下的四个边距等属性,得到不同的显示效果。
layer-list的使用:
1,单一边线
-
效果图
-
代码实现
在 res 目录中的 drawable 目录下,创建名称为 singleline.xml 的xml 文件,然后编辑 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="#02a0ef"/>
</shape>
</item>
<!--上面一层距离底层的顶部3dp,类似marginTop,填充色为红色,这样就形成了一个带有蓝色顶部边线的红色背景的图-->
<item android:top="3dp">
<shape>
<solid android:color="#9f00"/>
</shape>
</item>
</layer-list>
布局中引用:
<TextView
android:layout_marginTop="60dp"
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="@drawable/singleline"
android:gravity="center"
android:text="单一边线效果"/>
2,双边线
-
效果图
-
代码实现
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--底层使用蓝色填充色-->
<item>
<shape>
<solid android:color="#02a0ef"/>
</shape>
</item>
<!--上面一层距离底层的顶部1dp,距离底部1dp,类似marginTop,填充色为白色,这样就形成了一个带有蓝色顶部边线和底部边线的白色背景的图-->
<item android:bottom="1dp"
android:top="1dp">
<shape>
<solid android:color="#fff"/>
</shape>
</item>
</layer-list>
3,阴影效果
-
效果图:
-
代码实现
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!--底层的左边距离上层左边3dp, 底层的顶部,距离上层的顶部6dp,如果不做这个控制,底层和上层的左侧和上侧会重合在一起--> <item android:left="3dp" android:top="6dp"> <shape> <solid android:color="#b4b5b6"/> </shape> </item> <!--上层的右边距离底层的右边3dp, 上层的底部距离底层的底部6dp--> <item android:bottom="6dp" android:right="3dp"> <shape> <solid android:color="#fff"/> </shape> </item> </layer-list>
4,缩放效果
-
效果图
-
代码实现(对ImageView进行处理)
<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!--这种方式拿到的是带有缩放的效果,即便给item 设置了gravity 并且从模拟器上看到的效果是不缩放的,但是真机上依旧是缩放的效果--> <item android:drawable="@mipmap/ic_launcher"> </item> <item android:drawable="@mipmap/ic_launcher" android:left="45dp" android:top="45dp"> </item> <item android:drawable="@mipmap/ic_launcher" android:left="90dp" android:top="90dp"> </item>
main_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
tools:context=".MainActivity">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/singleline"
/>
</LinearLayout>
5,不带缩放效果
- 效果图:
- 代码实现
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--不缩放-->
<item>
<bitmap
android:gravity="center"
android:src="@drawable/aa"/>
</item>
<item android:left="35dp"
android:top="35dp">
<bitmap android:gravity="center"
android:src="@drawable/bb"/>
</item>
<item android:left="70dp"
android:top="70dp">
<bitmap android:gravity="center"
android:src="@drawable/cc"/>
</item>
</layer-list>
6,旋转效果:
- 效果图:
- 代码实现
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<rotate android:fromDegrees="-10" android:pivotX="0"
android:pivotY="0">
<bitmap android:src="@drawable/ccc"/>
</rotate>
</item>
<item>
<rotate android:fromDegrees="10" android:pivotX="0"
android:pivotY="0">
<bitmap android:src="@drawable/ddd"/>
</rotate>
</item>
<item>
<rotate android:fromDegrees="30" android:pivotX="0"
android:pivotY="0">
<bitmap android:src="@drawable/ccc"/>
</rotate>
</item>
</layer-list>