Goodroid

GoodroidはAndroidアプリ開発のための情報をコラムやブログで紹介するサイトです。


ボタンのデザインを変更する
ここではボタンのデザインを変更する方法を確認していきます。

ボタンのデザインを変更するためには「 ImageButton 」クラス、「 selecter 」を用います。
main.xmlで「 selecter 」が記述してあるXMLファイルを読み込み、以下の表のように、selecter内の定義値が「true」のときのボタンの画像を設定します。
※定義なしの場合は通常時の画像

定義 状態
- 通常時の画像
state_focused フォーカス時の画像
state_pressed 押下時の画像

Button2Activity.java
package goodroid.sample.button2;

import android.app.Activity;
import android.os.Bundle;

public class Button2Activity extends Activity{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

main.xmlでres/layout/button.xmlを読み込みます。

main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@layout/button" />

</LinearLayout>

サンプルでは「通常時」「フォーカス時」「ボタン押下時」の3つの画像を作成し、「res/drawable」配下に配置しています。

配置例
res/drawble/btn1.png
res/drawble/btn2.png
res/drawble/btn3.png

btn1が通常時の画像、btn2がフォーカス時の画像、btn3がボタン押下時の画像です。

button.xml
<selector
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:state_pressed="true"
        android:drawable="@drawable/btn3" />

    <item
        android:state_focused="true"
        android:drawable="@drawable/btn2" />

    <item
        android:drawable="@drawable/btn1" />

</selector>

実行結果は通常時とボタン押下時の動作です。

実行結果


【関連記事】
ボタンを表示する

5442 views | コメント:0 | 2012-06-16
コメント
まだこの記事にコメントはありません
コメントの投稿
名前 (必須)

メールアドレス (非公開)

本文(必須)

パスワード (必須)
(半角数字4桁)