ListView のセルにアイコン(画像)とテキストを表示してみる

前回は「自分で作ったクラスのListをListViewで使いたい 」ということで、自分の作ったクラスのオブジェクトを List に入れて、それを ListView に文字列で表示した。
今回は自分の作ったクラスの持っている画像と文字列を ListView のセルに表示してみる。

参考にしたのはこの辺り。

やり方としては、ArrayAdapter を継承して自分の作ったクラスを扱えるようすれば良いみたい。


肝は TextView を返す getText をオーバーライドする部分で、そこで ListView のセル用に作った layout(listviewcell.xml )に画像と文字列をセットしてあげる。

こんな感じ。

public class AppInfoArrayAdapter extends ArrayAdapter<AppInfo> {
	private List<AppInfo> items;
	private LayoutInflater inflater;
		
	public AppInfoArrayAdapter(Context context, int resID, List<AppInfo> items) {
		super(context, resID, items);
		this.items = items;
		this.inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
	}

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
	    View v = convertView;
	    if (v == null) {
		    v = inflater.inflate(R.layout.listviewcell, null);
	    }

	    // 文字列をセット
	    AppInfo appInfo = (AppInfo)items.get(position);
	    TextView appInfoText = (TextView)v.findViewById(R.id.cell_text);
	    appInfoText.setText(appInfo.toString());

	    // アイコンをセット
	    ImageView appInfoImage = (ImageView)v.findViewById(R.id.cell_image);
	    appInfoImage.setImageDrawable(appInfo.IconImage);
	
	    return v;
    }
}

自分の作ったクラスが AppInfo で、AppInfoArrayAdapter が ArrayAdapter を継承して AppInfo を扱えるようにしたもの。


後はセルのレイアウト listviewcell.xml がこんな感じ。

<?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="fill_parent"
    android:orientation="horizontal" >

	<ImageView
	    android:id="@+id/cell_image"
	    android:padding="3dp"
	    android:layout_width="40dp"
	    android:layout_height="40dp" />
	<TextView 
	    android:id="@+id/cell_text"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content" />

</LinearLayout>

これでアプリを起動すると、ちゃんと画像とテキストが表示された!


次回は eclipsemercurialプラグインを使って bitbucket とやり取りする設定。