2013年5月4日土曜日

Android アプリ:イベントのバインドとキャッチ

Android でイベントを処理する方法です。

ADT で Blank Activity を選ぶと Hello world! と表示されるアプリが作られます。
Hello world! をタッチしたら Hello Android world! に変えましょう。

イベントについてはこちらに解説があります
Android Developer - Input Events
http://developer.android.com/guide/topics/ui/ui-events.html

手順
  1. 文字を大きくする
  2. TextView に id をつける
  3. id を使って TextView を取得する
  4. OnClickListener を実装する
  5. OnClickListener を View へセットする
  6. onClick() 内で文字列を切り替える
  7. 動作確認

文字を大きくする


デフォルトのレイアウトはこんな感じ
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</RelativeLayout>


このままではテキストが小さいので大きくします。
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       android:textSize="30pt"
        android:text="@string/hello_world" />

タップできるくらいの大きさにする

テキストの指定についてはこちら
Android Developers - R.attr : textSize http://developer.android.com/reference/android/R.attr.html#textSize

TextView に id をつける


Java から TextView を取得するために xml で id を設定します。
これで R.id.hello_world でこの TextView を参照できるようになります。
    <TextView
        android:id="@+id/helloworld"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30pt"
        android:text="@string/hello_world" />



Java のソースを開きます。
package com.example.eventlistener;

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

public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  // Inflate the menu; this adds items to the action bar if it is present.
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }

}

id を使って TextView を取得する


TextView を保存する変数を作るために android.widget.TextView をインポートします。
import android.widget.TextView;

Activity に onStart() メソッドを追加して TextView を取得します。
public class MainActivity extends Activity {
 ...
 protected void onStart() {
  super.onStart();
  TextView textView = (TextView)findViewById(R.id.helloworld);
 }
 ...
}

OnClickListener を実装する


Click イベントをキャプチャするために、android.view パッケージで提供されている OnClickListener インタフェースを使います。

Android Developers - View.OnClickListener
http://developer.android.com/reference/android/view/View.OnClickListener.html

OnClickListener インタフェースは onClick() メソッドを宣言していて、クリックされた時に呼び出されます。

まず、OnClickListener インタフェースをインポートします。
import android.view.View.OnClickListener;

OnClickListener インタフェースを MainActivity クラスへ実装します。
public class MainActivity extends Activity implements OnClickListener {
 ...
}

インタフェースのメソッドを実装します。
public class MainActivity extends Activity implements OnClickListener {
 ...
 public void onClick(View v) { 
 }
}

OnClickListener を View へセットする


次に、TextView がクリックされた時に、このメソッドが呼ばれるようにしましょう。
View の setOnClickListener() メソッドを使います。

Android Developers - setOnClickListener
http://developer.android.com/reference/android/view/View.html#setOnClickListener(android.view.View.OnClickListener)

先ほど取得した TextView にリスナを追加します。
 protected void onStart() {
  super.onStart();
  TextView textView = (TextView)findViewById(R.id.helloworld);
  textView.setOnClickListener(this);
 }

引数には OnClickListener インタフェースを実装した(onClick()メソッドを持っている)クラスを渡します。
今回は MainActivity 自身にもたせているので、 this で MainActivity 自身を渡しています。
これで TextView がタップされた時に MainActivity の onClick() メソッドが呼ばれることになりました。

onClick() 内で文字列を切り替える


最後に onClick() メソッド内で TextView のテキストを変えます。
まず、変更する文字列を定義しておきます。
/res/values/strings.xml へ文字列 hello_android_world を追加します。
ファイルを保存すると、自動的に R.java へ参照が追加されます。
<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">EventListener</string>
    <string name="action_settings">Settings</string>
    <string name="hello_world">Hello world!</string>
    <string name="hello_android_world">Hello Android world!</string>

</resources>

では、文字列を変えましょう。
onClick() メソッドの引数としてクリックされた View が渡されます。
これを TextView へキャストして、setText() メソッドで参照する文字列を変えます。
 public void onClick(View v) {
  ((TextView)v).setText(R.string.hello_android_world);
 }

動作確認


Android 端末で実行します。
テキストをタップすると文字列が変わることが確認できます。

タップしたら文字列が変わりました

0 件のコメント:

コメントを投稿