2010年11月23日

ListViewを使う(1) 文字列のリストを表示する

C#プログラミングと比較して使い方が難しいと感じたのがListViewです。これから何回かに分けてListViewの使い方メモを書いていこうと思います。

今回は、以下の単純なシチュエーションを実装します。

・文字列のリストを表示する。
・リストの項目を選択した時のイベントハンドラを作る。

具体的には、本(独自のBookクラス)のタイトルを下記画面のように一覧表示するアプリを作ります。

main.png

手順は以下の4つです。

1.画面レイアウトにListViewを追加する
2.1行分のレイアウトを作成する
3.ListViewの表示対象となる独自クラスを作る
4.ListViewにイベントハンドラとAdapterを設定する

(1)画面レイアウトにListViewを追加する
レイアウトファイルmain.xmlを編集し、ListViewを追加します。

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

(2)1行分のレイアウトを作成する
ListViewの1行分に相当するレイアウトファイルを新規に作成します。ここではrow_book.xmlという名前にします。レイアウトファイル名、TextViewのIDは後で使うので覚えておきましょう。

<?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="wrap_content">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/txtBookName" />
</LinearLayout>

ここでのポイントは、文字列を表示するためのTextViewを入れておくことです。

(3)ListViewの表示対象となる独自クラスを作る
本を表すBookクラスを作ります。IDとName(タイトル)を持たせました。

package jp.sblo.androider.ListViewSample1;

public class Book {
private int mId;
private String mName;

public Book(int id, String name) {
mId = id;
mName = name;
}

public String toString() {
return mName;
}

public void setName(String name) {
mName = name;
}

public String getName() {
return mName;
}

public void setId(int id) {
mId = id;
}

public int getId() {
return mId;
}
}

ここではtoString()メソッドがポイントです。ListViewに表示する文字列を返す必要があります。

(4)ListViewにイベントハンドラとAdapterを設定する
ListViewとBookクラスは直接結びつけることができないので、Adapter系クラスで仲介します。文字列のリストを表示するにはArrayAdapterを使うのが一番簡単です。

少し長いですが、Activityの全ソースを掲載します。

package jp.sblo.androider.ListViewSample1;

import java.util.ArrayList;

import android.app.Activity;
import android.app.AlertDialog;
import android.os.Bundle;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.view.View;

public class MainActivity extends Activity {
// ListView
private ListView mLstBooks;

// ListViewに表示するデータ
private ArrayList<Book> mBooks = new ArrayList<Book>();

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

// Viewを取得
mLstBooks = (ListView)this.findViewById(R.id.lstBooks);

// イベントハンドラを設定
mLstBooks.setOnItemClickListener(
new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent,
View view, int position, long id) {
// 選択されたデータを取得
ListView listView = (ListView)parent;
Book book = (Book)listView.getItemAtPosition(position);

// 選択されたデータをダイアログで表示
AlertDialog.Builder dialog = new AlertDialog.Builder(
MainActivity.this);
dialog.setTitle("あなたの選んだ本");
dialog.setMessage("ID:" + book.getId()
+ "\nName:" + book.getName());
dialog.show();
}
});

// ListViewにアダプタを設定
ArrayAdapter<Book> adapter = new ArrayAdapter<Book>(
this,
R.layout.row_book, // 1行分のレイアウトファイル
R.id.txtBookName, // 上記レイアウト内のテキスト表示箇所のId
mBooks // 表示対象のデータ
);
mLstBooks.setAdapter(adapter);

// ListViewに表示するデータを作成
mBooks.add(new Book(1, "Androidプログラミング"));
mBooks.add(new Book(2, "札幌のおいしい店"));
mBooks.add(new Book(3, "子供とおでかけマップ"));
}
}

ArrayAdapterのインスタンス作成時のポイントは2つです。

・手順(2)で作ったレイアウトファイルとTextViewのIDを指定する。
・手順(3)で作ったオブジェクトのリストを指定する。

項目選択時のイベントハンドラはsetOnItemClickListener()で設定します。ここでは選んだ本のIDと名前をダイアログに出すようにしました。

dialog.png

これで今回の実装は完了です。

■ソース一式
ListViewSample1.tar.gz



posted by hige at 23:19 | Comment(0) | ListViewを使う
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: