2012年7月16日月曜日

2 行のテキストを表示するリスト表示 (ListView)

Android アプリで、リスト表示をするには、ListView (リストビュー) クラスを使用します。
リストの項目に 2 行のテキストを表示する ListView (リストビュー) の使い方を紹介します。
(2 行のテキストを表示する ListView の作成と項目選択時の処理についてのサンプルです)


2 行のテキストを表示する ListView (リストビュー) を作成するには、
  1. リソースファイル (xml ファイル) に ListView (リストビュー) を定義する
  2. ソースファイルで、ListView (リストビュー) に表示するデータ (アダプタ) を生成する
    (レイアウトには android.R.layout.simple_list_item_2 を使用)
  3. ListView (リストビュー) に 2. で生成したデータ (アダプタ) を設定する
  4. ListView (リストビュー) に項目選択イベントを設定する
という手順になります。


1. リソースファイル (xml ファイル) に ListView (リストビュー) を定義する


リソースファイル (xml ファイル) に ListView を定義します。
ListView 特有の属性は特に設定する必要は無いので、、id と高さ、幅を設定します。

layout/main.xml
<listview
  xmlns:android="http://schemas.android.com/apk/res/android">
  android:id="@+id/listView1"
  android:layout_height="wrap_content"
  android:layout_width="match_parent"
</listview>


2. ソースファイルで、ListView (リストビュー) に表示するデータを生成する


ListView (リストビュー) に表示するデータを設定するには、Adapter (アダプタ) を使用する必要があります。
ここでは、2 行のテキスト表示リストビュー を作成するために、SimpleAdapter を使用します。
// ListView に設定するデータ (アダプタ) を生成する (テキスト 2 行表示リスト)
SimpleAdapter adapter = new SimpleAdapter(
        this,
        list,
        android.R.layout.simple_list_item_2,
        new String[] {"main", "sub"},
        new int[] {android.R.id.text1, android.R.id.text2}
        );
第一引数には、Content を設定するので、this を指定します。
第二引数には、表示するデータのリストを設定します。ここで設定した list については後述します。
第三引数には、ListView (リストビュー) の各項目のレイアウトを指定します。2 行のテキスト表示なので、アンドロイドで標準で用意されている android.R.layout.simple_list_item_2 が使用できます。
第四引数には、設定するデータリストの中のマップのキーを設定します。1 行目のテキストのキーは main、2 行目のテキストのキーは sub とします。(自由に設定してかまいません。)
第五引数には、各項目のレイアウトの id を設定します。レイアウトに android.R.layout.simple_list_item_2 を設定したので、この中で定義されている id の text1、text2 を設定します。

上記の第二引数に設定した list は、以下のようにして生成します。
まず、表示する文字列定数を定義します。
// リストに設定するメインテキスト
private final String[] mainText = new String [] {
        "メインテキスト 1", "メインテキスト 2", "メインテキスト 3"
};
// リストに設定するサブテキスト
private final String[] subText = new String[] {
        "サブテキスト 1", "サブテキスト 2", "サブテキスト 3"
};
次に、list を生成します。1 行目に表示するメインテキストと、2 行目に表示するサブテキストのマップをリスト追加していきます。
// ListView に表示する文字列を生成
final List<Map<String, String>> list = new ArrayList<Map<String, String>>();
for (int i=0; i<mainText.length; i++) {
    Map<String, String> map = new HashMap<String, String>();
    map.put("main", mainText[i]);
    map.put("sub", subText[i]);
    list.add(map);
}


3. ListView (リストビュー) に 2. で生成したアダプタを設定する


ListView (リストビュー) にアダプタを設定するには、setAdapter メソッドを使用します。
// リストビューにデータ (アダプタ) を追加
ListView listView1 = (ListView)findViewById(R.id.listView1);
listView1.setAdapter(adapter);


4. ListView (リストビュー) に項目選択イベントを設定する


ListView (リストビュー) の項目を選択したときの処理を追加するには、setOnItemClickListener メソッドを使用します。
// アイテムクリック時のイベントを設定 (テキスト 2 行表示)
listView1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    public void onItemClick(AdapterView<?> parent, View view, int pos, long id) {
        // ここに項目選択時の処理を追加
        // 引数 pos が選択した項目のインデックスになります (0 始まり)
    }
});



全体のソースコードは以下のようになります。

■ リソース (xml) ファイル


layout/main.xml
<ListView
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/listView1"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
/>


■ ソースコード


package jp.sample.listview;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.Toast;

public class ListViewSampleActivity extends Activity {

    // リストに設定するメインテキスト
    private final String[] mainText = new String [] {
            "メインテキスト 1",
            "メインテキスト 2",
            "メインテキスト 3"
    };
    // リストに設定するサブテキスト
    private final String[] subText = new String[] {
            "サブテキスト 1",
            "サブテキスト 2",
            "サブテキスト 3"
    };

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

        // ListView に表示する文字列を生成
        final List<Map<String, String>> list = new ArrayList<Map<String, String>>();
        for (int i=0; i<mainText.length; i++) {
            Map<String, String> map = new HashMap<String, String>();
            map.put("main", mainText[i]);
            map.put("sub", subText[i]);
            list.add(map);
        }

        // ListView に設定するデータ (アダプタ) を生成する (テキスト 2 行表示リスト)
        SimpleAdapter adapter = new SimpleAdapter(
                this,
                list,
                android.R.layout.simple_list_item_2,
                new String[] {"main", "sub"},
                new int[] {android.R.id.text1, android.R.id.text2}
                );

        // リストビューにデータ (アダプタ) を追加
        ListView listView1 = (ListView)findViewById(R.id.listView1);
        listView1.setAdapter(adapter);

        // アイテムクリック時のイベントを設定 (テキスト 2 行表示)
        listView1.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            public void onItemClick(AdapterView<?> parent, View view, int pos, long id) {
                // 項目選択時の処理を記述
                // 引数 pos が選択された項目のインデックス (0 始まり)
            }
        });
    }
}

0 件のコメント:

コメントを投稿