【Android】リストビューのカスタマイズ

2011.04.26
Android Tipsプログラミング

リストビューのカスタマイズには、ArrayAdapterクラスを使用します。

まずはリスト要素のデータクラスを作成します。
下記の例では、アイコンとタイトルが表示されることを想定してます。

リスト要素のクラス

package org.mypkg;

public class MyListBean{
  private int iconId_;
  private String title_;

  public int getIcon(){
    return iconId_;
  }

  public void setIcon(int iconId){
    iconId_ = iconId;
  }

  public String getTitle(){
    return title_;
  }

  public void setTitle(String title){
    title_ = title;
  }
}

次にアダプタークラスを作成します。
コンストラクタでsuperを呼び、getViewメソッドをオーバーライドします。
下記の例では、リスト要素のレイアウトをxmlで定義し、inflaterで取得してます。

アダプタークラス

package org.mypkg;

import java.util.ArrayList;
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 MyAdapter extends ArrayAdapter{
  private LayoutInflter inflater_;
  private ArrayList items_;

  public MyAdapter(Context context,LayoutInflater inflater,int textViewResourceId,ArrayList items){
    super(context,textViewResourceId,items);
    inflater_ = inflater;
    items_ = items;
  }

  @Override
  public View getView(int position,View convertView,ViewGroup parent){
    if(onvertView == null){
      convertView = inflater_.inflate(org.mypkg.R.layout.myitem,null);
      // convertView.setBackgroundResource(org.mypkg.R.drawable.mydrawable);
    }

    MyListBean item = (MyListBean)items_.get(position);
    if(item != null){
      ImageView icon = (ImageView)convertView.findViewById(org.mypkg.R.id.myitem_icon);
      icon.setImageResource(item.getIcon());
      TextView title = (TextView)convertView.findViewById(org.mypkg.R.id.myitem_title);
      title.setTitle(item.getTitle());
    }
    return convertView;
  }
}

リスト要素のレイアウト
res/layout/myitem.xml

<?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="?android:attr/listPreferredItemHeight"
  android:padding="5dp"
>
<ImageView android:id="@+id/myitem_icon"
  android:layout_width="wrap_content"
  android:layout_height="fill_parent"
  android:scaleType="center"
/>
<TextView android:id="@+id/myitem_title"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:textSize="20sp"
  android:textColor="#00000000"
/>
</LinearLayout>

最後にリストの構築です。
要素を作成し、アダプタにセットし、リストビューにセットするという流れです。

package org.mypkg;

import java.util.ArrayList;
import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ListView;

public class MyClass extends Activity implements OnItemClickListener{

  public void myMethod(){
    // リストの要素を作成
    MyListBean item1 = new MyListBean();
    item1.setIcon(R.drawable.ic_myicon1);
    item1.setTitle("Title1");
    MyListBean item2 = new MyListBean();
    item2.setIcon(R.drawable.ic_myicon2);
    item2.setTitle("Title2");

    // 要素をArrayListにまとめる
    ArrayList list = new ArrayList();
    list.add(item1);
    list.add(item2);

    // アダプタにセットする
    LayoutInflater inflater = this.getLayoutInflater();
    MyAdapter adapter = new MyAdapter(this,inflater,android.R.layout.simple_list_item_1,list);

    // リストビューにアダプタをセットする
    ListView view = (ListView)this.findViewById(R.id.mylist);
    view.setAdapter(adapter);

    view.setOnItemClickListener(this);
  }

  // アイテムがクリックされた
  public void onItemClick(AdapterView parent,View view,int position,long id){
  }
}

注意点としては、ScrollViewでくくらないとリストが増えてもスクロールしてくれないところ。

res/layout/main.xml

<?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="vertical"
>
<ScrollView
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:fadingEdge="none"
  android:fillViewport="true"
  android:scrollbars="none"
>
<ListView android:id="@+id/mylist">
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
/>
</ScrollView>
</LinearLayout>

参考： リストビュー

コメント