アプリにボタンを追加する

Compose を試す
Jetpack Compose は Android で推奨される UI ツールキットです。Compose でコンポーネントを追加する方法を学習します。

ボタンは、ユーザーがボタンをタップしたときに発生するアクションを伝えるテキストまたはアイコン、またはその両方で構成されます。

レイアウトにボタンを作成するには、使用するボタンの用途(テキスト付き、アイコン、またはその両方)に応じて、次の 3 つの方法があります。

  
  <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>

上記のコードにより、次のようなコードが生成されます。

3 種類のボタンを示す画像
図 1. 3 スタイルのボタン。

クリック イベントへの応答

ユーザーがボタンをタップすると、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 スタイルと同様に機能し、背景、フォント、サイズなどの複数のスタイル プロパティを定義できます。スタイルの適用の詳細については、スタイルとテーマをご覧ください。

枠線なしボタン

便利なデザインの 1 つに「枠線なし」のボタンがあります。枠線なしボタンは、枠線や背景がない点を除いては基本的なボタンに似ていますが、タップ時など、さまざまな状態に応じて外観が変わります。

枠線なしボタンを作成するには、次の例のように 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 ファイルで定義できます。この XML ファイルでは、さまざまなボタン状態に使用する 3 つの画像または色を定義します。

ボタンの背景用の状態リスト ドローアブルを作成する手順は次のとおりです。

  1. デフォルト、タップ、フォーカスの各ボタンの状態を表す、ボタンの背景用に 3 つのビットマップを作成します。さまざまなサイズのボタンに画像を合わせるには、ビットマップを 9-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>
    

    ボタンの現在の状態に基づいて画像を変更するドローアブル リソースを 1 つ定義します。

    • 最初の <item> は、ボタンがタップされた(アクティブになった)ときに使用するビットマップを定義します。
    • 2 つ目の <item> は、ボタンがフォーカスされたとき(トラックボールまたは十字キーを使用してボタンをハイライト表示したときなど)に使用するビットマップを定義します。
    • 3 つ目の <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 をご覧ください。