[Android]ボタンの背景を変える(設定する) | 妄想プログラマのらくがき帳

2015年5月20日水曜日

[Android]ボタンの背景を変える(設定する)

  • ボタンの背景を静的に設定する
ボタンの背景を静的に設定するには、xmlファイルのボタン要素にbackground属性を追加します。
以下がボタンに背景色を設定する場合のxmlファイル例です。
<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="64dp"
    android:text="Button" 
    android:background="#ff0000" /> <!-- 背景色をRGBで指定 -->
ボタンに背景画像を設定する場合は、[res]-[drawable]フォルダに画像を置き、
次のようにbackground属性を設定します(以下の例は、drawableフォルダにbutton_background.pngを置いた場合の例です)。
<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="64dp"
    android:text="Button" 
    android:background="@drawable/button_background" /> <!-- 背景画像を設定 -->

  • ボタンの背景を動的に設定する
ボタンの背景色を動的に設定するには、Button.setBackgroundColor()を使います。
Button button = (Button) findViewById(R.id.button1);
button.setBackgroundColor(Color.rgb(0, 100, 200));

背景画像を動的に設定するには、Button.setBackgroundResource()を使います。
Button button = (Button) findViewById(R.id.button1);
// drawableフォルダに置いたbutton_background.pngを背景に設定
button.setBackgroundResource(R.drawable.button_background);

  • ボタンの状態に応じて背景が変わるようにする
ボタンがフォーカスされたときや押されたときに背景が変化するようにするには、
State List Drawableを作成し、xmlでbackground属性に指定します。

1. State List Drawableを作成する。
まず、以下のようなxmlファイルを作成し、[res]-[drawable]フォルダに配置します。
xmlファイル名は何でも良いんですが、とりあえず"custom_button.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要素でボタンに設定する画像をリストアップします。
android:drawableに設定する値は、drawableフォルダ内の画像ファイル名です
(button_default.pngの場合、"@drawable/button_default"を設定します)。

android:state_pressed="true"の要素には、ボタンが押下されたときに設定する画像、
android:state_focused="true"の要素には、ボタンがフォーカスされたときに設定する画像を指定します。

2. ボタン要素のbackground属性に、作成したxmlファイルを設定する。
xmlファイルのボタン要素のbackground属性に、以下のように先ほど作成したxmlファイルの名前を指定します。
<Button
    android:id="@+id/btnCustom"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="172dp"
    android:background="@drawable/custom_button"
    android:text="Custom button" />
以上で、ボタンの状態に応じてボタン背景が設定した画像に変わるようになりました。

@通常時


@フォーカス時


@ボタン押下時



0 件のコメント:

コメントを投稿