TwoLineListItemの使い方

以下Androidにおいてリスト内のレイアウトを変えるためのメモ

画面をリスト形式で表示したいときはListViewとArrayAdapterを使えば出来るが、
このままだとリスト内の1つの要素に対して１つの文字列しか含めることが出来ない。

Androidのリファレンスを見るとTwoLineListItemというクラスがあるのでこれを使えば
1つの要素に2つの文字列を入れることが出来そう。

というわけで実際にやってみて以下はその手順のメモ。このやり方が正しいやり方かどうかは不明。

まず2つの文字列を格納するための簡単なクラスを定義する。
これはgetterを持つだけの簡単なクラス

/**
 * 2つのStringを持つだけのクラス
 */
public class TwoTextItem {
	private final String primaryText;
	private final String secondaryText;
	
	public TwoTextItem(String p, String s){
		this.primaryText = p;
		this.secondaryText = s;
	}
	public String getPrimaryText() {
		return primaryText;
	}
	public String getSecondaryText() {
		return secondaryText;
	}
}

次にアクティビティに表示するレイアウトを編集する。単純にListViewがひとつあれば良い。(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="@android:id/list" android:layout_width="wrap_content" android:layout_height="wrap_content"></ListView>
</LinearLayout>

次にリストの要素内のレイアウトを記述する。ここでTwoLineListItemを使う。(ファイル名はtwolist.xmlとする)
さらにTwoLineListItemの内にTextViewを２つ入れておく。これらのViewのIDは必ず@android:id/text1,@android:id/text2にしなければならない。
今回はメインの文字を大きく、もうひとつの文字を青色で小さくした。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
<TwoLineListItem android:id="@+id/TwoLineListItem01" android:layout_width="wrap_content" android:layout_height="wrap_content"
 android:tag="twolinelist">
<TextView android:text="" android:id="@android:id/text1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center"
	android:textSize="24sp"  android:layout_marginBottom="0sp"
></TextView>
<TextView android:text="" android:id="@android:id/text2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|center"
	android:textSize="14sp"  android:layout_marginBottom="0sp" android:layout_below="@android:id/text1" android:textColor="#00BFFF"
></TextView>
</TwoLineListItem>

</LinearLayout>

最後にArrayAdapterに要素が追加されたときにViewに値を受け渡しを行うために、
ArrayAdapterを継承したクラスを自分で定義する。

ここではコンストラクタとgetViewをオーバーライドすればよい。

public class TwoTextAdapter extends ArrayAdapter<TwoTextItem>{
	
	private LayoutInflater inflater;
	private final int textViewResource;
	private List<TwoTextItem> items;
	
	TwoTextAdapter(Context context, int textViewResourceId,
			List<TwoTextItem> objects) {
		super(context, textViewResourceId, objects);
		this.textViewResource = textViewResourceId;
		items = objects;
		
		inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
	}
	
	@Override
	public View getView(int pos, View convertView, ViewGroup parent){
		View view = null;
		if(convertView != null){
			view = convertView;
		}else{
			view = this.inflater.inflate(this.textViewResource, null);
		}
		TwoTextItem item = items.get(pos);
                //タグを元にxmlから取ってくる
		TwoLineListItem primaryText = (TwoLineListItem)view.findViewWithTag("twolinelist");
                //ビューに文字列をセット
		TextView primaryView = primaryText.getText1();
		primaryView.setText(item.getPrimaryText());
		 
		TwoLineListItem secondaryText = (TwoLineListItem)view.findViewWithTag("twolinelist");
		TextView secondaryView = secondaryText.getText2();
		secondaryView.setText(item.getSecondaryText());
		
		return view;
	}
}

あとはアクティビティからアダプタを通して値をいれてやる。

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        
        List<TwoTextItem> items = new ArrayList<TwoTextItem>();
        items.add(new TwoTextItem("メインテキスト", "ここにサブテキストが表示されます"));
        items.add(new TwoTextItem("項目名1", "解説1"));
        items.add(new TwoTextItem("項目名2", "解説2"));
        
        ListAdapter adapter = new TwoTextAdapter(this, R.layout.twolist, items); 
        this.setListAdapter(adapter);
        setContentView(R.layout.main);

こうやっておくと、以下の画面のように1つの要素内に2つの文字列が表示できた。

このような感じでgetViewを適当に変えてやればリスト内の要素は他にも変更できそう。