layer-list實作陰影效果

• 為控件實作陰影效果，可以有多種方式：
  • 多個drawable層疊在一起（不好的實作是多個View層疊達到多個drawable的層疊效果，相對好的實作是在同一個View鐘實作多個drawable的層疊）
  • 自定義view
  • Material Design中設定Z軸的方式
• 本文的思路是多個drawable疊在一起，但是不額外使用View，通過layer-list可以将多個item按照順序層疊在一起顯示。首先來看效果圖：

• 第一個和第二個控件是用來展示layer-list實作陰影效果的基本款，而第三個控件是綜合上述兩個控件效果，再集合selector實作的。
• 預設狀态：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 陰影：左偏移2dp，上偏移4dp -->
    <item
        android:left="2dp"
        android:top="4dp">
        <shape>
            <solid android:color="@android:color/holo_blue_dark" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <!-- 前景：：底偏移4dp，右偏移2dp -->
    <item
        android:bottom="4dp"
        android:right="2dp">
        <shape>
            <solid android:color="@android:color/holo_blue_bright" />
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>
           

• 點選狀态：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 為了達到點選的真實感，将原來預設狀态的前景色設定為陰影，并将前景設為無透明-->
    <item
        android:left="2dp"
        android:top="4dp">
        <shape>
            <solid android:color="@android:color/holo_blue_bright" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    <item
        android:bottom="4dp"
        android:right="2dp">
        <shape>
            <corners android:radius="10dp" />
        </shape>
    </item>
</layer-list>
           

layer-list的item可以通過以下屬性設定偏移量：

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

• selector，使用上述layer-list：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/layer_list_btn_pressed" android:state_pressed="true" />
    <item android:drawable="@drawable/layer_list_btn_pressed" android:state_selected="true" />
    <item android:drawable="@drawable/layer_list_btn" />

</selector>
           

• 最後再來看下，布局代碼：

<?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"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:background="@drawable/layer_list_btn"
        android:clickable="true"
        android:gravity="center"
        android:text="預設狀态" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:background="@drawable/layer_list_btn_pressed"
        android:clickable="true"
        android:gravity="center"
        android:text="點選狀态" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:background="@drawable/selector_btn"
        android:clickable="true"
        android:gravity="center"
        android:text="點我" />
</LinearLayout>
           

• 第一個和第二個TextView分别引用了對應的layer-list（預設和點選）作為背景，第三個引用了selector
• 源碼位址