FC2ブログ

ボタンを表示する

2010.03.18 13:15 Eclipse v3.5 Android v1.6 HelloButton プロパティ OnClickListener findViewById テーマ:Android Dev - ジャンル:コンピュータ
UI構築の第一歩!"ボタン"を表示します。
 
 


1. プロジェクトの作成

前回の"HelloWorld"で動作確認を行う"を基にプロジェクトを作成します。
今回の"新規 Android プロジェクト"設定は、以下の通りに行いました。

プロジェクト名 HelloButton
アプリケーション名 HelloButton
パッケージ名 androidapp.hellobutton
Create Activity HelloButton



2. ソースコードを開く

自動生成したソースコードを開きます。
"パッケージ・エクスプローラー""HelloButton"というプロジェクトが出来上がっています。
そのプロジェクトから、

"src -> androidapp.hellobutton -> HelloButton.java"

を開きます。

[HelloButton.java]
package androidapp.hellobutton;

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

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

これが自動生成されたソースコードになります。



3. リソースを開く

次にリソースを開きます。
"パッケージ・エクスプローラー"から、

"HelloButton -> res -> layout -> main.xml"

を開きます。
レイアウト
このような画面が表示されます。

このままでは横向きで編集になってしまうので、"構成"から"Portrait"を選択し、縦向きにします。



3. ボタンを設置する

次にボタンを設置します。

"main.xml"画面の左側の"ビュー"から"ボタン"をドラッグし、"main.xml"にドロップします。
ボタン設置
ボタンが設置できました。



3. ボタンのプロパティを変更する

ボタンのプロパティを変更します。
画面右側にある"アウトライン"に、先ほど追加したボタンが表示されています。
アウトライン
"Button1 (Button)"を右クリックして"プロパティ"を表示します。
プロパティ  
様々な項目があります。

各項目を以下のように変更します。

ID@+id/ButtonHello
TextHello

Helloボタン  
ボタンの表示が変更できました。



3. ボタンのクリックイベントを追加する

ボタンを押した時のイベントを作成します。
もう一つボタンを作成します。

ID@+id/ButtonWorld
TextWorld

Worldボタン
一番上にある"Hello World, HelloButton!"と表示されているテキストビューのIDも変更します。

ID @+id/TextViewHelloButton

ここで保存の意味も込めて、ビルドを行います

次に"HelloButton.java"を開き、以下のように修正をします。

[HelloButton.java]
package androidapp.hellobutton;

import android.app.Activity;
import android.os.Bundle;
import android.view.*;
import android.widget.Button;
import android.widget.TextView;

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

        Button button;

        // "ButtonHello"を取得
        button = (Button)findViewById(R.id.ButtonHello);
        // onClickリスナ登録
        button.setOnClickListener(this);
       
        // "ButtonWorld"を取得
        button = (Button)findViewById(R.id.ButtonWorld);
        // onClickリスナ登録
        button.setOnClickListener(this);
    }

    public void onClick(View arg0) {
        TextView textView;

        // "TextViewHelloButton"を取得
        textView = (TextView)findViewById(R.id.TextViewHelloButton);
        switch(arg0.getId())
        {
        case R.id.ButtonHello:
            //    文字列"Hello"を表示
            textView.setText("Hello");
            break;
        case R.id.ButtonWorld:
            //    文字列"World"を表示
            textView.setText("World");
            break;
        }
    }
}

今回は、"View.OnClickListener"インターフェースを実装してイベント処理を行います。
ボタンやテキストビューを操作したい場合、"findViewById"メソッドを使用して、各ビューを参照します。
引数には参照したいビューの"ID"を設定します。

ビルドを行い、エラーが出ないことを確認します。



3. 実行する

実行してボタンをクリックします。
"Hello"をクリックした時には"Hello"の文字が、"World"をクリックした時には"World"が表示されます。
HelloButton実行

"Hello""World"の文字が切り替われば成功です。

COMMENT


管理者にだけ表示を許可する

TRACKBACK