ListViewの使い方

画面に一覧を表示するために使用するListViewの使い方を書き留めておきます。
SDKは2.1版を使用。

今回は以下のような画面を作りました。

画像(今回は全て☆)と文字列を1要素としたmenu_item.xml
menu_item.xmlの要素をリストにしたListViewコンポーネントを定義したmenu_list.xmlを用います。

早速XMLから

menu_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
  <ImageView
  	android:id="@+id/menu_img_id"
  	android:paddingLeft="5px"
  	android:paddingTop="6px"
  	android:paddingBottom="6px"
  	android:layout_width="wrap_content"
  	android:layout_height="wrap_content"/>
  <TextView
  	android:id="@+id/menu_text_id"
  	android:textSize="28px"
  	android:paddingTop="6px"
  	android:paddingBottom="6px"
  	android:paddingLeft="10px"
  	android:layout_width="wrap_content"
  	android:layout_height="wrap_content"/>
</LinearLayout>

これが1要素を定義したXMLです。
LinearLayoutでorientation属性をhorizontalに設定しているので、
水平方向に続く要素定義ということになります。
その下に、ImageViewとTextViewを並列に配置します。
idはそれぞれmenu_img_id、menu_text_idと定義します。

menu_list.xml

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

次に要素を配置するListViewを定義したXMLです。
LinearLayoutの入れ子としてmenuListViewをidとして定義したListViewを定義しています。
ここでは特に何もしておらず、ListViewの中身の設定はJavaクラスで実装します。

ListViewActivity

package net.atlabo.android;

import java.util.Arrays;
import java.util.HashMap;
import java.util.List;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;

public class ListViewActivity extends Activity {
	// リスト表示項目
	private final static List MENU_LIST = Arrays.asList(
			new HashMap(){{
				put("menuImgId", android.R.drawable.btn_star);
				put("menuTextId", "年別ランキング");
			}},
			new HashMap(){{
				put("menuImgId", android.R.drawable.btn_star);
				put("menuTextId", "チーム別情報");
			}},
			new HashMap(){{
				put("menuImgId", android.R.drawable.btn_star);
				put("menuTextId", "次戦確認");
			}},
			new HashMap(){{
				put("menuImgId", android.R.drawable.btn_star);
				put("menuTextId", "購入");
			}},
			new HashMap(){{
				put("menuImgId", android.R.drawable.btn_star);
				put("menuTextId", "ポイント確認");
			}}
	);


    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.menu_list);

        ListView listView = (ListView) findViewById(R.id.menuListView);
        SimpleAdapter adapter = new SimpleAdapter(
        		this,
        		MENU_LIST,
        		R.layout.menu_item,
        		new String[]{"menuImgId", "menuTextId"},
        		new int[]{R.id.menu_img_id, R.id.menu_text_id});
        listView.setAdapter(adapter);
    }
}

こちらがJavaクラス。
menu_list.xmlで定義したListViewをfingViewByIdを用いて取得して、
そのインスタンスに対して中身を設定します。

今回は中身をListクラスの定数として定義しており、それをAdapterに設定することで値を設定しています。
Listクラスの定数はHashMap型のレコードを持ち、HashMapのオブジェクト1レコードにつき、1行を表現します。
HashMapはそれぞれmenuImgId、menuTextIdをキーとした画像、および文字列です。

ListViewの内容の設定はAdapterを介して行われます。
Adapterにはいくつか種類が用意されていますが、今回はSimpleAdapterを用います。

SimpleAdapterの第1引数はContextクラスのインスタンスです。
今回のクラスはActivityクラスを継承していますので、Contextの一種でもあります。
なので、thisを設定します。

第2引数にはListViewに設定するListを設定します。
第3引数には雛形となるXMLを設定します。
今回はmenu_item.xmlを雛形として使用します。

第4,5引数は、Listに格納されたHashMapの要素とmenu_item.xmlの値の対応をそれぞれ定義します。
今回の例だと以下のように対応付けられます。

HashMap menu_item.xml
menuImgId menu_img_id
menuTextId menu_text_id

以上でAdapterの設定は完了です。
ListViewクラスのsetAdapterメソッドを使用してAdapterの設定を行って処理終了です。

広告を非表示にする