[android] アイコン付きのリストを作ってみる


Twitterクライアントとかで見かける、アイコン付きのリストを作ってみる。
こんな感じ。

アイコン付きリストのサンプル

アイコン付きリストのサンプル


アイコン付きのリストを作るには、ArrayAdapterを継承してオリジナルのアダプタを作ってあげればOK。
まずは、リストアイテムのレイアウトXML。
左にImageView、右にTextViewを配置してみる。それぞれTagに “icon” と “text” を設定。

<?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">

    <LinearLayout
        android:id="@+id/LinearLayout01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/ImageView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:tag="icon"
            android:minHeight="48dp"
            android:maxWidth="48dp"
            android:maxHeight="48dp"
            android:minWidth="48dp"></ImageView>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="24dp"
            android:textColor="#FFFFFF"
            android:id="@+id/TextView"
            android:text="TextView"
            android:tag="text"
            android:layout_gravity="center_vertical"></TextView>
    </LinearLayout>

</LinearLayout>

リストアイテム用のデータクラス。
アイコンのリソースIDとテキストを保持。

package jp.xfutures.android.sample;

/**
 * アイコンとテキストを表示するためのリストアイテム.
 */
public class IconTextArrayItem {

	/** 表示するアイコンのリソースID. */
	private int iconResource;

	/** 表示するテキスト. */
	private String text;

	public IconTextArrayItem(int iconResource, String text){
		this.iconResource = iconResource;
		this.text = text;
	}

	public int getIconResource() {
		return iconResource;
	}
	public void setIconResource(int iconResource) {
		this.iconResource = iconResource;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
}

今回のメインである、オリジナルアダプタ。
ArrayAdapterを継承して作る。
getView()をオーバーライドして、オリジナルのビューを返すようにするだけ。

package jp.xfutures.android.sample;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * アイコンとテキストを表示するためのアダプタ.
 */
public class IconTextArrayAdapter extends ArrayAdapter<IconTextArrayItem> {

	/** XMLからViewを生成するのに使うヤツ. */
	private LayoutInflater inflater;

	/** リストアイテムのレイアウト. */
	private int textViewResourceId;

	/** 表示するアイテム. */
	private List<IconTextArrayItem> items;

	/**
	 * コンストラクタ.
	 */
	public IconTextArrayAdapter(
			Context context,
			int textViewResourceId,
			List<IconTextArrayItem> items)
	{
		super(context, textViewResourceId, items);

		// リソースIDと表示アイテムを保持っておく
		this.textViewResourceId = textViewResourceId;
		this.items = items;

		// ContextからLayoutInflaterを取得
		inflater = (LayoutInflater)context.getSystemService(
				Context.LAYOUT_INFLATER_SERVICE
		);
	}

	/**
	 * 1アイテム分のビューを取得.
	 */
	@Override
	public View getView(int position, View convertView, ViewGroup parent){
		View view;

		// convertViewなんか入ってたら、それを使う
		if(convertView != null){
			view = convertView;
		}
		// convertViewがnullなら新規作成
		else{
			view = inflater.inflate(textViewResourceId, null);
		}

		// 対象のアイテムを取得
		IconTextArrayItem item = items.get(position);

		// アイコンにアレを設定
		ImageView imageView = (ImageView)view.findViewWithTag("icon");
		imageView.setImageResource(item.getIconResource());

		// テキストにソレを設定
		TextView textView = (TextView)view.findViewWithTag("text");
		textView.setText(item.getText());

		return view;
	}
}

最後にActivity。
オリジナルアダプタのインスタンスを生成して、setListAdapter()で設定するだけ。

package jp.xfutures.android.sample;

import java.util.ArrayList;
import java.util.List;

import android.app.ListActivity;
import android.os.Bundle;
import android.widget.ListAdapter;

public class SampleActivity extends ListActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // リストに表示するヤツらを作る
        List<IconTextArrayItem> items = new ArrayList<IconTextArrayItem>();
        items.add(new IconTextArrayItem(R.drawable.icon, "List Item 001"));
        items.add(new IconTextArrayItem(R.drawable.icon, "List Item 002"));
        items.add(new IconTextArrayItem(R.drawable.icon, "List Item 003"));
        items.add(new IconTextArrayItem(R.drawable.icon, "List Item 004"));
        items.add(new IconTextArrayItem(R.drawable.icon, "List Item 005"));

        // アダプタ生成
        ListAdapter adapter = new IconTextArrayAdapter(this, R.layout.listitem, items);

        // アダプタ設定
        setListAdapter(adapter);
    }
}

まとめ。
AndroidSample005.zip

コメントをする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>