ListView の簡単なカスタマイズ - アイコンの追加

情報をリスト表示するのに何かと便利な ListView ですが、元から用意されているレイアウトだけでは物足りない場合も少なくありません。

ここでは ListView の項目一つ一つに、アイコン（画像）を追加する簡単な方法を示します。

特にここでは、右向き矢印アイコンを表示していますが、このように配置することでそれをクリック（タップ）したときに、右側にある何かが見えることをユーザーに期待させる効果があります。

すると、ViewFlipper などによって右側にスライドする視覚効果がより活きてきます。

ListView にアイコンを追加

ここで作る ListView は次のようなものです。

項目のひとつひとつの右側に、右側向きの矢印アイコンが表示されています。

ではさっそく作り方をみてみましょう。

まずは矢印画像を用意し、これを res/drawable/green_arrow とします。

次に全体のレイアウト (res/layout/main.xml) ですが、これは単に ListView を配置しただけです。

<?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="@+id/listview1"
  android:layout_width="fill_parent" 
  android:layout_height="wrap_content" 
  android:layout_weight="1"
/>
</LinearLayout>

ポイントはここからです。

ListView の行毎の表示方法を変えるためには、行毎のレイアウトファイルを用意します。レイアウトファイル名は任意ですが、ここでは res/layout/row.xml という名前で作成します。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
>
<TextView 
  android:id="@+id/row_textview1"
  android:layout_width="wrap_content" 
  android:layout_height="wrap_content"
  android:layout_weight="1"
  android:textSize="20sp"
  android:padding="10dip"
/>
<ImageView
  android:src="@drawable/green_arrow"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_gravity="center_vertical"
/>
</LinearLayout>

ここでは行毎に文字と画像を配置するために、全体をリニアレイアウトのホリゾンタル (horizontal, 水平) 配置とし、 TextView と ImageView を並べています。

画像ファイルの指定は ImageView の src 属性で指定しています。

これを利用するプログラムのコードは次のようになります。

package com.keicode.android.test;

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

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class ListViewTest4 extends Activity {
  
  static List<String> items = new ArrayList<String>();
  static ArrayAdapter<String> adapter;
  
  ListView listView1;
  
  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    listView1 = (ListView)findViewById(R.id.listview1);
        
    items.add("Item 1");
    items.add("Item 2");
    items.add("Item 3");
    
    adapter = 
      new ArrayAdapter<String>(
        this,
        R.layout.row,
        R.id.row_textview1,
        items);
    
    listView1.setAdapter(adapter);
    }
}

全体は ListView に ArrayAdapter を用いて String のリストを接続している形になってます。これについては ListView の基本的な利用方法をみてください。

今回のポイントは、 Adapter の作り方です。ここです。

    adapter = 
      new ArrayAdapter<String>(
        this,
        R.layout.row,
        R.id.row_textview1,
        items);

ArrayAdapter のコンストラクタの第二引数に行毎のレイアウト (の ID) を渡しています。そして、第三引数には文字列をセットするための TextView ウィジェットの ID を渡しています。

これによって、このアダプターがどのレイアウトを使って、そしてそのレイアウトの中のどの TextView に文字をセットすれば良いか分かるのです。

【関連記事】 この記事を読んだ方は、こちらも気に入るはずです。