[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
関連する投稿:
