在應用程式中新增按鈕

嘗試 Compose 方法
Jetpack Compose 是 Android 推薦的 UI 工具包。瞭解如何在 Compose 中新增元件。

按鈕是由文字或圖示組成,或同時包含兩者,用於傳達使用者輕觸動作時會發生什麼。

您可以根據需要包含文字、圖示或兩者的按鈕,透過下列其中一種方式在版面配置中建立按鈕:

  
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:paddingLeft="16dp"
      android:paddingRight="16dp"
      android:orientation="vertical" >
  
      <Button
          android:id="@+id/supabutton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="I'm a button" />
  
      <ImageButton
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:contentDescription="A tiny Android icon"
          android:src="@drawable/baseline_android_24"
          app:tint="#ff0000" />
  
      <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:drawableStart="@drawable/baseline_android_24"
          android:drawablePadding="4dp"
          android:drawableTint="#ff0000"
          android:text="I'm a button with an icon" />
  </LinearLayout>

先前的程式碼會產生類似下方的內容:

顯示三種按鈕的圖片
圖 1:三種樣式的按鈕。

回應點擊事件

使用者輕觸按鈕時,Button 物件會收到點擊事件。

如要透過程式輔助方式宣告事件處理常式,請建立 View.OnClickListener 物件,然後呼叫 setOnClickListener(View.OnClickListener) 將其指派給按鈕,如以下範例所示:

Kotlin

findViewById<Button>(R.id.supabutton)
  .setOnClickListener {
      Log.d("BUTTONS", "User tapped the Supabutton")
  }

Java

Button button = (Button) findViewById(R.id.supabutton);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
      Log.d("BUTTONS", "User tapped the Supabutton");
    }
});

設定按鈕樣式

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

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

無邊框按鈕

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

如要建立無邊框按鈕,請將 borderlessButtonStyle 樣式套用至按鈕,如以下範例所示:

<Button
  android:id="@+id/supabutton"
  style="?android:attr/borderlessButtonStyle"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="I'm a button" />

自訂背景

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

您可以在 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> 會定義按鈕處於預設狀態 (未輕觸或聚焦) 時要使用的點陣圖。

    這個 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 語法,包括如何定義已停用、懸停或其他狀態的按鈕,請參閱 StateListDrawable