好きなレイアウトをリストで表示したいときには
ArrayAdapterを継承したクラスを使うことで、簡単に実現することができます。
今回はListViewに画像とテキストを表示します。
まず、画像のリソースIDと文字を格納するクラスを作成します。
※リストの１行の情報を格納するためのクラスです。
package yocchin.adk.sample.vo.listview;
public class ListItem {
private int imageId;
private String text;
public int getImageId() {
return imageId;
}
public void setImageId(int imageId) {
this.imageId = imageId;
}
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
次に、ArrayAdapterを継承したクラスを作成します。
package yocchin.adk.sample.adapter.listview;
import java.util.List;
import yocchin.adk.sample.R;
import yocchin.adk.sample.vo.listview.ListItem;
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 ImageArrayAdapter extends ArrayAdapter<ListItem> {
private int resourceId;
private List<ListItem> items;
private LayoutInflater inflater;
public ImageArrayAdapter(Context context, int resourceId, List<ListItem> items) {
super(context, resourceId, items);
this.resourceId = resourceId;
this.items = items;
this.inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View view;
if (convertView != null) {
view = convertView;
} else {
view = this.inflater.inflate(this.resourceId, null);
}
ListItem item = this.items.get(position);
// テキストをセット
TextView appInfoText = (TextView)view.findViewById(R.id.item_text);
appInfoText.setText(item.getText());
// アイコンをセット
ImageView appInfoImage = (ImageView)view.findViewById(R.id.item_image);
appInfoImage.setImageResource(item.getImageId());
return view;
}
}
まず、継承するArrayAdapterのジェネリクスに、
先ほど作成したListItemクラスを定義します。
次に、ArrayAdapterクラスのgetViewメソッドをOverrideし、
ここに独自の処理を記述していきます。
getViewメソッドは、ListViewがスクロールされ、
新しい行が画面に表示されるタイミングで呼び出されるメソッドです。
画面に表示されるリストの情報を、都度、作成します。
第１引数のpositionに、表示対象のリスト番号が渡されてきます。
そのpositionを元に、
コンストラクタで元々受け取っていたitemsから表示対象のListItmeを取得し、
ListItmeに格納されている画像情報とテキストをViewに設定します。
getViewメソッドについての詳細な挙動については、
「AdapterクラスのgetViewメソッドの挙動について」を参考にしてください。（只今、作成中）
次に、Activityです。
package yocchin.adk.sample.activity;
import java.util.ArrayList;
import java.util.List;
import yocchin.adk.sample.R;
import yocchin.adk.sample.adapter.listview.ImageArrayAdapter;
import yocchin.adk.sample.vo.listview.ListItem;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
public class ImageListViewActivity extends Activity {
private ListView lv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_list_view);
List<ListItem> list = new ArrayList<ListItem>();
for (int i = 1; i < 6; i++) {
ListItem item = new ListItem();
item.setText("アイテム" + i);
item.setImageId(R.drawable.ic_launcher);
list.add(item);
}
// adapterのインスタンスを作成
ImageArrayAdapter adapter =
new ImageArrayAdapter(this, R.layout.list_view_image_item, list);
lv = (ListView) findViewById(R.id.listview);
lv.setAdapter(adapter);
}
}
ArrayAdapterではなく、先ほど作成したImageArrayAdapterのインスタンスを作成します。
サンプルでは、24～29行目で、表示するリストの一覧を作成し、
31～33行目で、ImageArrayAdapterのインスタンス生成時の引数に渡しています。
今回、使用したレイアウト定義です。
<?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/listview"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
こちらが、リストの１行に表示するレイアウトです。
<?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" >
<ImageView
android:id="@+id/item_image"
android:padding="3dp"
android:layout_width="70dp"
android:layout_height="70dp" />
<TextView
android:id="@+id/item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
今回は、画像とテキストを表示したかったので
ImageViewと、TextViewを定義しています。
このレイアウトを変更することで、簡単にオリジナルのリストを作成することができます。
今回のサンプルを実行してみると、以下のようになります。
コメント