カスタム ボタン

  • [アーティクル]

このセクションでは、Button ウィジェットと、異なるボタンの状態に対して使用する 3 つの異なる画像を定義する XML ファイルを使用して、テキストではなくカスタム画像を含むボタンを作成します。 ボタンを押すと、短いメッセージが表示されます。

下の 3 つの画像を右クリックしてダウンロードし、それからプロジェクトの Resources/drawable ディレクトリにコピーします。 これらは異なるボタンの状態に使用されます。

Green Android icon for normal stateOrange Android icon for focused stateYellow Android icon for pressed state

Resources/drawable ディレクトリ内に、android_button.xml という名前の新しいファイルを作成します。 次の XML を挿入します。

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

これにより、1 つのドローアブル リソースが定義され、ボタンの現在の状態に基づいてその画像が変わります。 1 つ目の <item> では、ボタンが押された場合 (アクティブ化されています) の画像として android_pressed.png を定義します。2 つ目の <item> では、ボタンにフォーカスを合わせた場合 (トラックボールまたは方向パッドを使用してボタンが強調表示された場合) の画像として android_focused.png を定義します、3 つ目の <item> では、標準の状態 (押されもフォーカスもされない場合) の画像として android_normal.png を定義します。 これで、この XML ファイルは 1 つのドローアブル リソースを表し、その背景用に Button によって参照されると、表示される画像はこれら 3 つの状態に基づいて変更されるようになりました。

Note

<item> 要素の順序は重要です。 このドローアブルが参照されると、現在のボタンの状態に適したものを決めるために <item> が走査されます。 "標準" の画像は最後にあるため、条件 android:state_pressed と android:state_focused が両方とも false と評価された場合にのみ適用されます。

Resources/layout/Main.axml ファイルを開き、Button 要素を追加します。

<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:background="@drawable/android_button" />

android:background 属性では、ボタンの背景に使用するドローアブル リソースを指定します (Resources/drawable/android.xml に保存されると @drawable/android として参照されます)。 これにより、システム全体のボタンに使用される標準の背景画像が置き換えられます。 このドローアブルがボタンの状態に基づいてその画像を変更するには、その画像を背景に適用する必要があります。

ボタンが押された際に何かを実行するには、次のコードを末尾に追加します。OnCreate() メソッド:

Button button = FindViewById<Button>(Resource.Id.button);

button.Click += (o, e) => {
    Toast.MakeText (this, "Beep Boop", ToastLength.Short).Show ();
};

これにより、レイアウトから Button がキャプチャされ、Button がクリックされた際に表示される Toast メッセージが追加されます。

ここでアプリケーションを実行します。

このページの一部は、Android オープンソース プロジェクトによって作成および共有された作業生産物に基づいて変更されており、Creative Commons 2.5 Attribution License に記載されている条件に従って使用されます。