Drawable子类之——LayerDrawable （图层叠加）

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

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

一、语法

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

<?xml version="1.0" encoding="utf-8"?>
<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</layer-list>

二、子节点

子节点有这么几个：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示例

简单的叠加


<?xml version="1.0" encoding="utf-8"?>
<!--叠加的效果  两个shape的叠加 -->

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:shape="rectangle"
            android:dither="true">
            <corners android:radius="2dp"/>
            <stroke
                android:width="2dp"
                android:color="#ff0000" />

        </shape>
    </item>

    <item
        android:top="10dp"
        android:bottom="12dp"
        >
        <shape
            android:shape="rectangle"
            android:dither="true">
            <corners android:radius="2dp"/>
            <solid android:color="#00ff00"/>
        </shape>
    </item>


</layer-list>

简单的叠加.png

旋转

<?xml version="1.0" encoding="utf-8"?>
<!--旋转的效果  这是简单的三个shape的叠加旋转 -->


<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <!-- 最底层的图片，以x，y轴坐标为中心进行旋转-->
        <rotate android:pivotX="0" android:pivotY="0"
            android:fromDegrees="-10" android:toDegrees="-10">
            <bitmap android:src="@mipmap/pic1"/>
        </rotate>
    </item>
    <!-- 第二层的图片，以x，y轴坐标为中心进行旋转-->
    <item>
        <rotate android:pivotX="0" android:pivotY="0"
            android:fromDegrees="15" android:toDegrees="15">
            <bitmap android:src="@mipmap/pic2"/>
        </rotate>
    </item>
    <!-- 最上层的图片，以x，y轴坐标为中心进行旋转-->
    <item>
        <rotate android:pivotX="0" android:pivotY="0"
            android:fromDegrees="35" android:toDegrees="55">
            <bitmap android:src="@mipmap/pic3"/>
        </rotate>
    </item>
</layer-list>

叠加旋转.png

阴影

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 阴影部分 -->
    <!-- 个人觉得更形象的表达：top代表下边的阴影高度，left代表右边的阴影宽度。其实也就是相对应的offset，solid中的颜色是阴影的颜色，也可以设置角度等等 -->
    <item
        android:left="6dp"
        android:top="6dp">
        <shape android:shape="rectangle" >

            <!--渐变-->
            <gradient
                android:angle="270"

                android:endColor="#0F000000"
                android:startColor="#0F000000" />
            <!--圆角-->
            <corners
                android:bottomLeftRadius="6dip"
                android:bottomRightRadius="6dip"
                android:topLeftRadius="6dip"
                android:topRightRadius="6dip" />
        </shape>
    </item>

    <!-- 背景部分 -->
    <!-- 形象的表达：bottom代表背景部分在上边缘超出阴影的高度，right代表背景部分在左边超出阴影的宽度（相对应的offset） -->
    <item
        android:bottom="10dp"
        android:right="10dp">
        <shape android:shape="rectangle" >

            <gradient
                android:angle="270"
                android:endColor="#FFFFFF"
                android:startColor="#FFFFFF" />

            <corners
                android:bottomLeftRadius="6dip"
                android:bottomRightRadius="6dip"
                android:topLeftRadius="6dip"
                android:topRightRadius="6dip" />
        </shape>
    </item>

</layer-list>

阴影.png

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

补充

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

只有底边

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="#f00"/>
            <padding android:bottom="1dp"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#EFEFEF"/>
        </shape>
    </item>
</layer-list>

.
.

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

<shape android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="#f00"/>
            <padding android:bottom="1dp"/>
            <padding android:right="1dp"/>
        </shape>

.
.
实践

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这个shape只有底边"
        android:textSize="24sp"
        android:background="@drawable/shape_rectangle_only_bottom_side"
      />


    <TextView
        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"
        />

</LinearLayout>

image.png

.
.
原理，以底边为例