android 图片叠加xml,Drawable子类之——LayerDrawable （图层叠加）

本文出自 “阿敏其人” 简书博客，转载或引用请注明出处。

LayerDrawable对应的XML的根元素是,，它使一种层次化显示的Drawable集合。也就说，可以通过显示由多个Drawable的叠加，旋转，位移等组合显示出与单一Drawable不同的效果。在本文中我们会附上相关的效果。

一、语法

根据官网显示它的语法如下：

xmlns:android="http://schemas.android.com/apk/res/android" >

android:drawable="@[package:]drawable/drawable_resource"

android:id="@[+][package:]id/resource_name"

android:top="dimension"

android:right="dimension"

android:bottom="dimension"

android:left="dimension" />

二、子节点

子节点有这么几个：drawable、id、(四个方向)top、right、buttom和left。

(关于这四个方向可以大概理解为padding，单位为px)

android:drawable

对应的图片资源

android:id

id资源名 (少用)

android:top 可以理解为padding top，单位是px

android:right 可以理解为padding right，单位是px

android:bottom 可以理解为padding buttom，单位是px

android:left 可以理解为padding left，单位是px

三、特点

对于LayerDrawable有这么几个特点

1、每一个item表示一个Drawable

2、下面的Drawale覆盖上面的Drawable

3、item里面常见放的是bitmap，当然也可以是shape，不管是什么肯定是Drawable。

四、Demo示例

简单的叠加

android:shape="rectangle"

android:dither="true">

android:width="2dp"

android:color="#ff0000" />

android:top="10dp"

android:bottom="12dp"

>

android:shape="rectangle"

android:dither="true">

简单的叠加.png

旋转

android:fromDegrees="-10" android:toDegrees="-10">

android:fromDegrees="15" android:toDegrees="15">

android:fromDegrees="35" android:toDegrees="55">

叠加旋转.png

阴影

android:left="6dp"

android:top="6dp">

android:angle="270"

android:endColor="#0F000000"

android:startColor="#0F000000" />

android:bottomLeftRadius="6dip"

android:bottomRightRadius="6dip"

android:topLeftRadius="6dip"

android:topRightRadius="6dip" />

android:bottom="10dp"

android:right="10dp">

android:angle="270"

android:endColor="#FFFFFF"

android:startColor="#FFFFFF" />

android:bottomLeftRadius="6dip"

android:bottomRightRadius="6dip"

android:topLeftRadius="6dip"

android:topRightRadius="6dip" />

阴影.png

至此效果展示完成。

在这里提一点，我们一般做评价的星星也需要利用LayerDrawable，这里就不附上源码了，这个网上游很多参考。

补充

补充1、画一个只有底边的矩形(其实说画不严格，应该是叠加组合)

只有底边

android:width="1dp"

android:color="#f00"/>

.

.

如果想要保留底边和右边，只需要多加一行代码

android:width="1dp"

android:color="#f00"/>

.

.

实践

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:orientation="vertical"

>

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="这个shape只有底边"

android:textSize="24sp"

android:background="@drawable/shape_rectangle_only_bottom_side"

/>

android:layout_width="wrap_content"

android:layout_height="70dp"

android:text="这个shape只有底边和右边"

android:textSize="24sp"

android:layout_marginTop="20dp"

android:background="@drawable/shape_rectangle_bottom_right"

/>

image.png

.

.

原理，以底边为例

image.png

了解更多的Drawable分类 Drawable图像资源抽象类

本篇完。

相关参考：