ListViewにImageを表示

前回はListViewで各行にテキストを表示させましたが、
今回は複数のテキストやイメージ画像を表示させてみます。

複数の要素をListViewの各エントリに設定する必要がある為、
アダプタにはSimpleAdapterを使用します。
（実際のコードでは SimpleAdapterを拡張したクラスを使用しています。）

Javaコードは以下の通り

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

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;

public class ListView02 extends Activity{

 // リストビューに表示する文字列1
 String[] mCode = {
   "001", "002", "003", "004", "005"};

 // リストビューに表示する文字列2
 String[] mName = {
   "Itiro", "Jiro", "Saburo", "Siro", "Goro"};

 // リストビューに表示するImage用配列のインスタンス生成
 int[] mIcon = new int[5];


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

  // Image用配列にリソースIDを設定
  for (int i = 0; i < 5; i++) {
   mIcon[i] = R.drawable.icon;
  }

  // データを格納するためのArrayListを宣言
  List<HashMap<String, Object>> data =
   new ArrayList<HashMap<String, Object>>();

  for (int i = 0; i < 5; i++) {
   HashMap<String, Object> map = new HashMap<String, Object>();

   map.put("code", mCode[i]);
   map.put("name", mName[i]);
   map.put("icon", mIcon[i]);

   // 作成したmapをリストに追加
   data.add(map);
  }

  // 作成したdataとカスタマイズしたレイアウト「row.xml」を
  // 紐付けたCustomAdapterを作成する
  CustomAdapter customAdapter = new CustomAdapter(
    this,
    data,
    R.layout.row,
    new String[]{"code", "name"},
    new int[]{R.id.code, R.id.name}
  );

  // 「main.xml」のListViewにSimpleAdapterをセットする
  ListView listView = (ListView) findViewById(R.id.listview);
  listView.setAdapter(customAdapter);
 }


 // SimpleAdapterを継承したCustomAdapterを作成
 public class CustomAdapter extends SimpleAdapter {
  LayoutInflater mLayoutInflater;

  // コンストラクタ
  public CustomAdapter(
    Context context,
    List<? extends Map> data,
    int resource,
    String[] from,
    int[] to) {
   super(context, data, resource, from, to);
  }

  @SuppressWarnings("unchecked") // ジェネリクスを使用したキャストの為
  @Override
  public View getView(
　　　　int position, 
　　　　View convertView, 
　　　　ViewGroup parent) {
   mLayoutInflater = LayoutInflater.from(getBaseContext());

   // レイアウトにrow.xmlを紐付ける
   convertView = mLayoutInflater.inflate(R.layout.row, parent, false);
   ListView listView = (ListView) parent;

   // 該当する位置のデータを取得する
   Map<String, Object> data = (Map<String, Object>) listView.
    getItemAtPosition(position) ;

   // 文字入れつ1をTextViewにセットする
   TextView code = (TextView) convertView.
    findViewById(R.id.code);
   code.setText((String) data.get("code"));

   // 文字列2をTextViewにセットする
   TextView name = (TextView) convertView.
    findViewById(R.id.name);
   name.setText((String) data.get("name"));

   // アイコンをImageViewにセットする
   ImageView icon = (ImageView) convertView.
    findViewById(R.id.icon);
   icon.setImageResource((Integer) data.get("icon"));

   return convertView;
  }
 }
}

CustomAdapterクラスではListViewの要素として
row.xmlファイルの定義されたビュー情報を設定しています。

ListViewクラスでは、
表示画面の各行に表示されるテキスト&イメージをHashMapでマッピングし、
ArrayListに格納しています。
更に、HashMapを要素に持つArrayListを引数に、CustomAdapterインスタンスを生成し、
表示画面であるListViewにセットしています。


"res/layout/main.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/listview"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
/>
</LinearLayout>

"res/layout/row.xml"のコードは以下の通り

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="60dip"
>
<ImageView
    android:id="@+id/icon"
    android:layout_width="60dip"
    android:layout_height="70dip"
    android:src="@drawable/icon"
/>
<TextView
    android:id="@+id/code"
    android:layout_width="100dip"
    android:layout_height="wrap_content"
/>
<TextView
    android:id="@+id/name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
/>
</LinearLayout>

Listの各エントリ（ビューの1行）に設定する内容を示しています。
1行目・・・ImageView　id:icon
2行目・・・TextView id:code
3行目・・・TextView id:name

上記コードで実行すると、以下の様にリスト画面にイメージが表示されます。

ListViewにイメージが表示されました。