按鈕

Stay organized with collections Save and categorize content based on your preferences.

按鈕由文字或圖示 (或文字與圖示) 組成,用途是傳達使用者輕觸按鈕時會執行的動作。

根據您要在按鈕中包含文字、圖示或兩者,您可以用三種方式在版面配置中建立按鈕:

  • 如果是包含文字的按鈕,請使用 Button 類別:
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_text"
        ... />
    
  • 如果是包含圖示的按鈕,請使用 ImageButton 類別:
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/button_icon"
        android:contentDescription="@string/button_icon_desc"
        ... />
    
  • 如果是包含文字與圖示的按鈕,請使用 Button 類別與 android:drawableLeft 屬性:
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_text"
        android:drawableLeft="@drawable/button_icon"
        ... />
    

主要類別如下:

回應點擊事件

使用者只要按一下按鈕,Button 物件就會收到點擊事件。

如要定義按鈕的點擊事件處理常式,請將 android:onClick 屬性新增至 XML 版面配置的 <Button> 元素中。此屬性的值必須是回應點擊事件時要呼叫的方法名稱。接著,代管版面配置的 Activity 必須實作相應的方法。

例如,以下版面配置包含使用 android:onClick 的按鈕:

<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage" />

在代管這個版面配置的 Activity 中,下列方法會處理點擊事件:

Kotlin

/** Called when the user touches the button */
fun sendMessage(view: View) {
    // Do something in response to button click
}

Java

/** Called when the user touches the button */
public void sendMessage(View view) {
    // Do something in response to button click
}

android:onClick 屬性中宣告的方法必須具有與上述完全一致的簽章。具體來說,方法必須:

  • 公開
  • 傳回無效值
  • View 定義為其唯一的參數 (這會是使用者點選的 View)

使用 OnClickListener

您也可以用程式來宣告點擊事件處理常式,而不是在 XML 版面配置中加以宣告。如果您在執行階段將 Button 執行個體化,或需要宣告 Fragment 子類別中的點擊行為,就可能需要進行這項操作。

如要透過程式宣告事件處理常式,請建立 View.OnClickListener 物件,並呼叫 setOnClickListener(View.OnClickListener) 將其指派給按鈕。例如:

Kotlin

val button: Button = findViewById(R.id.button_send)
button.setOnClickListener {
    // Do something in response to button click
}

Java

Button button = (Button) findViewById(R.id.button_send);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        // Do something in response to button click
    }
});

為按鈕設定樣式

按鈕 (背景圖片和字型) 的外觀可能因裝置而異,這是因為不同製造商的裝置通常對輸入控制項會採用不同的預設樣式。

您可以根據自己對整個應用程式套用的主題,精確控管控制項的樣式。舉例來說,如要確保所有搭載 Android 4.0 以上版本的裝置都使用應用程式中的 Holo 主題,請在資訊清單的 <application> 元素中宣告 android:theme="@android:style/Theme.Holo"。另請參閱 Holo Everywhere 這篇網誌文章,瞭解如何在舊版裝置上使用 Holo 主題。

如果要自訂具備不同背景的個別按鈕,請指定包含可繪項目或顏色資源的 android:background 屬性。 或者,您也可以為按鈕套用 style,其運作方式與 HTML 樣式類似,藉此定義背景、字型、大小等不同樣式的屬性。如要進一步瞭解如何套用樣式,請參閱「樣式與主題」。

無邊框按鈕

「無邊框」按鈕是一項實用的設計。無邊框按鈕與基本按鈕相似,差別在於前者沒有邊框或背景,但按鈕處於不同狀態 (例如在點擊時) 時仍能改變外觀。

如果要建立無邊框按鈕,請將 borderlessButtonStyle 樣式套用至按鈕。例如:

<Button
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage"
    style="?android:attr/borderlessButtonStyle" />

自訂背景

如果要重新定義按鈕的外觀,您可以指定自訂背景。然而,您提供的背景應為狀態清單資源,會根據按鈕目前的狀態而改變外觀,而非提供簡單的點陣圖或顏色。

您可以在 XML 檔案中定義狀態清單,以定義要用於不同按鈕狀態的三種不同圖片或顏色。

如何為按鈕背景建立可繪製的狀態清單:

  1. 為按鈕背景建立三個點陣圖,代表預設、按下和聚焦的按鈕狀態。

    如果要確保您的圖片適用於不同大小的按鈕,請建立點陣圖並設為 Nine-patch 點陣圖。

  2. 將點陣圖放入專案的 res/drawable/ 目錄。請確認每個點陣圖的名稱均正確無誤,以反映每個按鈕代表的狀態,例如 button_default.9.pngbutton_pressed.9.pngbutton_focused.9.png
  3. res/drawable/ 目錄中建立新的 XML 檔案 (將其命名為 button_custom.xml 或類似名稱)。插入下列 XML:
    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/button_pressed"
              android:state_pressed="true" />
        <item android:drawable="@drawable/button_focused"
              android:state_focused="true" />
        <item android:drawable="@drawable/button_default" />
    </selector>
    

    這會定義一個能根據按鈕目前的狀態來變更圖片的單一可繪製資源。

    • 第一個 <item> 定義在按下按鈕 (啟用) 時要使用的點陣圖。
    • 第二個 <item> 定義按鈕聚焦 (用於使用軌跡球或方向鍵醒目顯示按鈕) 時要使用的點陣圖。
    • 第三個 <item> 定義在預設狀態 (未按下或聚焦) 時要使用的點陣圖。

    注意事項:<item> 元素的順序相當重要。在參照此可繪項目時,就可以按照順序掃遍 <item> 元素,判斷哪個元素適合目前按鈕的狀態。由於預設的點陣圖的順序為最後一個,因此只有條件 android:state_pressedandroid:state_focused 都評估為 False 時,系統才會加以套用。

    這個 XML 檔案現在代表單一可繪製資源,且當 Button 參照其背景時,顯示的圖片會根據這三個狀態變化。

  4. 接著,直接套用可繪製的 XML 檔案做為按鈕背景:
    <Button
        android:id="@+id/button_send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send"
        android:onClick="sendMessage"
        android:background="@drawable/button_custom"  />
    

如果要進一步瞭解這個 XML 語法,包括如何定義已停用、懸停或其他按鈕狀態,請參閱狀態清單可繪項目