快捷導(dǎo)航

Android LayerDrawable超詳細(xì)講解

更新時(shí)間：2022年11月03日 16:42:56 作者：broadview_java

一個(gè)LayerDrawable是一個(gè)可以管理一組drawable對(duì)象的drawable。在LayerDrawable的drawable資源按照列表的順序繪制，所以列表的最后一個(gè)drawable繪制在最上層

1. 前言

Android LayerDrawble 包含一個(gè)Drawable數(shù)組，系統(tǒng)將會(huì)按照這些Drawable對(duì)象的數(shù)組順序來繪制他們，索引最大的 Drawable 對(duì)象將會(huì)被繪制在最上面。

LayerDrawable對(duì)象的xml文件的根元素是<layer-list>，該元素內(nèi)部包含多個(gè)<item>。item標(biāo)簽內(nèi)部可以指定drawable、id和位置相關(guān)屬性。

layer-list可以進(jìn)一步擴(kuò)展對(duì)shape和selector的使用，對(duì)layer-list可以這樣簡(jiǎn)單的來理解，使用它可以將多個(gè)圖片疊加起來，可以將用shape和selector實(shí)現(xiàn)的效果疊加起來

2. 實(shí)例

該控件比較使用比較簡(jiǎn)單，我們直接通過例子來演示

activity_main.xml ,有三個(gè)ImageView 對(duì)象：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:orientation="vertical">
    <ImageView
        android:layout_marginTop="10dp"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:background="@drawable/layer_test"
        />
    <ImageView
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/layer_icon"
        />
    <ImageView
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/layer_icon2"
        />
</LinearLayout>

1. 第一個(gè) ImageView 我們定義好寬度和高度 150dp，看看里面的內(nèi)容：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#0000ff"/>
        </shape>
    </item>
    <item android:left="15dp" android:end="15dp" android:top="15dp" android:bottom="15dp">
        <shape android:shape="oval">
            <size android:height="10dp" android:width="10dp"/>
            <solid android:color="#00ff00"/>
        </shape>
    </item>
    <item android:left="45dp" android:end="45dp" android:top="45dp" android:bottom="45dp">
        <shape android:shape="rectangle">
            <solid android:color="#ff0000"/>
        </shape>
    </item>
</layer-list>

說說 item的4個(gè)屬性，作用同控件中的margin屬性

android:top 頂部的偏移量
android:bottom 底部的偏移量
android:left 左邊的偏移量
android:right 右邊的偏移量

我們定義的ImageView的寬高150dp ，

第一個(gè)item 矩形框在最底層，鋪滿整個(gè)寬高

第二個(gè)item為圓形，距離ImageView容器的top bottom left right 邊距離為 15dp

注意：圓形定義的<size android:height="10dp" android:width="10dp"/>這里是不生效的，是以容器寬高150dp為基準(zhǔn)，上下左右偏移15dp后繪制出來

第三個(gè)item為矩形，距離ImageView容器的top bottom left right 邊距離為 45dp

效果圖：

2. 第2個(gè)ImageView，不定義寬高，讓里面圖片去填充顯示:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <size android:width="50dp" android:height="50dp"/>
            <solid android:color="#0000ff"/>
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <size android:width="80dp" android:height="80dp"/>
            <solid android:color="#ff0000"/>
        </shape>
    </item>
    <item android:left="15dp" android:end="15dp" android:top="15dp" android:bottom="15dp">
        <shape android:shape="oval">
            <solid android:color="#00ff00"/>
        </shape>
    </item>
</layer-list>

第一個(gè)item為矩形，寬高為 50dp

第二個(gè)item也為矩形，寬高為80dp 那么根據(jù)顯示規(guī)則，后面的item顯示在上面，所以整個(gè)ImageView的寬高變?yōu)?80dp了

第三個(gè)item為圓形，通過第一和第二個(gè)顯示規(guī)則，此時(shí)的ImageView的寬高為80dp，然后距離ImageView容器的top bottom left right 邊距離15dp 繪制出來

效果圖：

3. 第三種，通過層視圖顯示陰影效果

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <size
                android:width="100dp"
                android:height="20dp"></size>
            <solid android:color="#000"></solid>
            <corners android:radius="10dp"></corners>
        </shape>
    </item>
    <item android:left="3dp" android:bottom="3dp">
        <shape android:shape="rectangle">
            <solid android:color="#f7f6f6"></solid>
            <corners android:radius="10dp"></corners>
        </shape>
    </item>
</layer-list>

效果圖：