List Viewの作り方とカスタマイズ

List Viewの作り方とカスタマイズ方法です。

List Viewはその名の通り、リスト表示を行う専用のViewです。標準はテキストのみのリスト表示ですが、カスタマイズすることで画像付きのテキストなど自由なレイアウトでリスト表示することができるようになります。

リスト表示するときは通常のActivityではなく、ListActivityというリスト表示専用のActivityを使います。このListActivityのデフォルトはsetContentViewでレイアウトを指定しなくても全画面がListViewになっていますが、あえて設定することで通常のActivityのように自由なレイアウトでListViewを配置することもできます。ただし配置できるListViewは１つだけで、そのid属性に"@android:id/list"とする必要があります。

例）中央にリスト表示、最上部にタイトルのテキスト、最下部にボタンの３段構成で表示する場合、レイアウトは下記のようにします。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <TextView
        android:id="@+id/text"
        android:background="#EE3333"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/myname" />
    <ListView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/launch" />
</LinearLayout>

リスト表示の１行ごとのレイアウトとそこで表示するデータを決めます。ここでは左端にアイコン画像、右側にテキストを表示するレイアウトにします。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" >
    <ImageView 
        android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/title"
        android:layout_width="0dip"
        android:layout_weight="1"
        android:layout_height="wrap_content" />    
</LinearLayout>

表示に必要なデータはクラスで定義します。コンストラクタで初期値を設定できるようにしておくと便利です。

public class MyItems {
    public int mIconId;
    public String mTitle;

    public MyItems(int iconId, String title) {
        mIconId = iconId;
        mTitle = title;
    }
}

このデータを使ってレイアウトに表示するクラスを作ります。ArrayAdapterを継承して独自のカスタマイズクラスを作ります。このクラスの役割はgetView()で上記で作ったレイアウトに指定された行のデータを設定したViewを生成することです。そのViewがリストの１行として表示されます。

public class MyListAdapter extends ArrayAdapter<MyItems> {
    private LayoutInflater mInflater;

    public MyListAdapter(Context context, int textViewResourceId, List<MyItems> objects) {
        super(context, textViewResourceId, objects);
        mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        MyItems items = getItem(position);
        if (convertView == null) {
            convertView = mInflater.inflate(R.layout.row, null);
        }
        // Icon
        ImageView imageView = (ImageView) convertView.findViewById(R.id.icon);
        imageView.setImageResource(items.mIconId);
        // Title
        TextView textView = (TextView) convertView.findViewById(R.id.title);
        textView.setText(items.mTitle);

        return convertView;
    }
}

ListActivityで実際に表示する具体的なデータのリストをArrayListで作成し、それを使って上記のMyListAdapterを作成します。それをListActivityに設定すればリスト表示の完成です。また、アイテムをクリックされた時の処理は、ListActivityが持っているListViewのOnItemClickListenerが呼ばれるので、ここではデータのリストからタイトルを取得して表示するようにしています。

public class SampleAppActivity extends ListActivity {
 private final static String TAB = "SampleAppActivity";
 private List<MyItems> mMylist;

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

        setContentView(R.layout.main);

        mMylist = new ArrayList<MyItems>();
        mMylist.add(new MyItems(android.R.drawable.ic_menu_today, "Today"));
        mMylist.add(new MyItems(android.R.drawable.ic_menu_agenda, "Agenda"));
        mMylist.add(new MyItems(android.R.drawable.ic_menu_gallery, "Gallery"));
        mMylist.add(new MyItems(android.R.drawable.ic_menu_month, "Month"));
        mMylist.add(new MyItems(android.R.drawable.ic_menu_mylocation, "My Location"));
        mMylist.add(new MyItems(android.R.drawable.ic_menu_rotate, "Rotate"));
        mMylist.add(new MyItems(android.R.drawable.ic_menu_more, "More..."));
        setListAdapter(new MyListAdapter(this, 0, mMylist));
        
        getListView().setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                MyItems items = mMylist.get(position);
                Log.i(TAB, "Clicked:" + items.mTitle);
            }
        });
 }
}

実行すると下記のような表示になります。

参考：Android Developers：ListActivity
参考：Android Developers：ListView
参考：Android Developers：ArrayAdapter
参考：Android Developers：Hello, Views - List View