Android選擇器：美化你的應用UI界面

如果你是一位Android開發者，你肯定不希望你的應用UI界面看起來很素潔，毫無美感。因此，為了讓你的應用在設計上更加吸引人，在本文中，我們將介紹Android選擇器的使用，以在設計上添加顏色和樣式。

一、什麼是選擇器？

選擇器是一種Android資源類型，定義了一個可以根據當前應用狀態在多個Drawable資源之間切換的Drawable。在應用中，我們通常使用選擇器來定義視圖的狀態，例如：可以定義按鈕的顏色和樣式，可以根據點擊狀態的不同而改變外觀。

從字面意思上來看，選擇器就像一個開關，對於特定的動作或事件，通常會有不同的外觀與行為。Android選擇器的作用是為了實現這種開關的清晰切換。

二、選擇器的類型

Android中，有兩種類型的選擇器：State List 和 Layer List。

1. State List

State List是根據一個視圖的狀態變化而改變的。一個視圖狀態可以被定義成不同的drawable，並且可以在不同的狀態下進行切換，例如：按下或者聚焦時的狀態。

在xml文件中定義一個State List的示例如下：

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true"
            android:drawable="@drawable/button_selected" />
        <item android:state_focused="true"
            android:drawable="@drawable/button_focused" />
        <item android:drawable="@drawable/button_normal" />
    </selector>

在以上示例中，我們定義了三個狀態下的Drawable，當視圖被按下或者聚焦的時候，State List會根據對應的狀態改變視圖Drawable的顯示。

2. Layer List

Layer List是一種可以堆疊多個Drawable的選擇器。相較於State List，Layer List更加靈活，更適合於需要自定義的UI設計。

在xml文件中定義一個Layer List的示例如下：

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="rectangle">
                <corners android:radius="10dp" />
                <solid android:color="@color/orange" />
            </shape>
        </item>
        <item
            android:bottom="5dp"
            android:right="5dp">
            <shape android:shape="rectangle">
                <corners android:radius="10dp" />
                <solid android:color="@color/white" />
            </shape>
        </item>
    </layer-list>

在以上示例中，我們定義了一個Layer List堆疊兩個Drawable，第一個為圓角矩形，填充顏色為橙色，第二個為偏移圓角矩形，填充顏色為白色，並偏移了5dp。在實際使用中，這個效果可以用來作為按鈕、卡片等UI元素的背景。

三、如何使用選擇器

現在我們來看一下如何在Android應用中使用選擇器。

1. State List的使用

一般來說，我們使用State List定義一個視圖的狀態。例如：一個按鈕可以在一般狀態下是灰色的，當用戶按下按鈕時，會變成綠色。讓我們看一下下面的示例代碼：

    <Button
        android:id="@+id/select_button"
        android:text="@string/select"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:background="@drawable/button_selector"/>

在以上示例中，我們將選擇器設置為按鈕的背景。我們必須在drawable文件夾中添加一個名為button_selector.xml的文件，內容如下示例：

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true" android:drawable="@drawable/button_pressed" />
        <item android:state_focused="true" android:drawable="@drawable/button_focused" />
        <item android:drawable="@drawable/button_normal" />
    </selector>

在以上示例中，我們設置了三個狀態：按下、聚焦（即用戶用手指觸摸某個視圖時，該視圖的邊框會發出光圈反應）、正常。對於每個狀態，我們都定義了相應的Drawable（即視圖狀態的外觀）。

2. Layer List的使用

Layer List比State List更加靈活。相較於State List使用於單個視圖上的狀態改變，Layer List常用於應用複雜的背景，例如卡片、彈出框等等。

讓我們看一下下面的示例代碼：

    <LinearLayout
        android:id="@+id/card_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:background="@drawable/card_selector"
        android:orientation="vertical">
        <TextView
            android:id="@+id/card_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/card_title"
            android:textColor="@color/black"
            android:textSize="20sp" />
        <TextView
            android:id="@+id/card_description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/card_description"
            android:textColor="@color/black"
            android:textSize="16sp" />
    </LinearLayout>

在以上示例中，我們將選擇器設置為LinearLayout的背景。我們必須在drawable文件夾中添加一個名為card_selector.xml的文件，內容如下示例：

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape android:shape="rectangle">
                <corners android:radius="10dp" />
                <solid android:color="@color/orange" />
            </shape>
        </item>
        <item
            android:bottom="5dp"
            android:right="5dp">
            <shape android:shape="rectangle">
                <corners android:radius="10dp" />
                <solid android:color="@color/white" />
            </shape>
        </item>
    </layer-list>

在以上示例中，我們設置了一個背景層疊的效果，第一個為圓角矩形，填充顏色為橙色，第二個為偏移圓角矩形，填充顏色為白色，並偏移了5dp。LinearLayout中包括兩個TextView，其中一個是標題，一個是描述，這個布局可以用作卡片或類似UI元素的背景。

四、總結

本文我們介紹了Android選擇器的基本概念、類型以及如何使用它來添加顏色和樣式。State List為我們提供了單個視圖在切換狀態時的外觀改變。Layer List為我們提供了更大的靈活性，讓我們可以用一些更具創意的方式來美化我們的應用程序。

選擇器在Android開發中是不可或缺的資源類型，它可以讓我們在視覺上輕鬆控制按鍵、卡片、列表項等UI元素的狀態變化。希望本文能夠幫助你更好地理解和使用選擇器，增加你的UI設計技能!