Powered by Google

2011年9月19日月曜日

Android リストビュー使い方 ListView

Androidアプリ開発における続記事です。

Androidアプリ開発において比較的よく使うであろうリスト作成用の
ListViewですが、他の言語よりも少し使い方が難しいのでわ?と思います。
なので知っている範囲で簡単にまとめます。

ListViewの実装方法のサンプルはよくみかけるのですが、
複数の情報を1行にのせたい場合のリスト作成の例や情報をあまり
見かけません。

ということで。

手順としては

1.画面レイアウトにListViewを追加する

レイアウトファイル(xml)を編集し、ListViewを追加します。
ここでは例としてexlist.xmlとする


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





2.1行分のレイアウトを作成する
リストの1行部分のレイアウトファイルを別で作成します。
この例では通番と日付と画像ファイルを1行に表示するレイアウトです。


<?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/list_No"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/border"
>
</TextView>

<TextView android:id="@+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/border"
>
</TextView>

<ImageView
android:id="@+id/image_data"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:background="@drawable/border">
</ImageView>
</LinearLayout>




3.ListViewの表示対象となる独自クラスを作る
この例ではただ渡された値をセットするクラスですが、この中で
各値を加工する処理をいれこむこともできます。



package XXXXXXXX;

public class OriginalClassforListView
{
public String number = "";
public String date = "";
int image_num;

public RoundList( String num,
String date_str,
int image_number)
{
number = num;
date = date_str;
image_num = image_number;
}

}




4.独自クラス用のAdapterクラスを作る
ArrayAdapterクラスを継承した独自クラスを作り、ArrayAdapterクラスの
getView()メソッドをオーバーライドします。このgetViewメソッドが肝です。




public class ListAdapter extends ArrayAdapter
{
private LayoutInflater mInflater;
private int mResource;

public RoundListAdapter(Context context, int resource,
int textViewResourceId, ArrayList objects) {
super(context, resource, textViewResourceId, objects);

mResource = resource;
mInflater = (LayoutInflater)context.getSystemService(
Context.LAYOUT_INFLATER_SERVICE);
}

public View getView(int position, View convertView,ViewGroup parent)
{
View view;
TextView serial_data;
TextView date_data;
ImageView image_data;

if (convertView == null)
{
view = mInflater.inflate(mResource, parent, false);
}
else{
view = convertView;
}

serial_data = (TextView)view.findViewById(R.id.list_No);
date_data = (TextView)view.findViewById(R.id.date);
image_data = (ImageView)view.findViewById(R.id.image_data);


OriginalClassforListView ex_list = this.getItem(position);
serial_data.setText(ex_list.number);

//ここの例では日付情報の長さに応じてAdapterに設定する値を加工している。

if(ex_list.date.length() > 0 )
{
--省略--

}
else
{
--省略--
}

//設定されている値に応じて読み込む画像ファイル(リソース)を変更している。
if( ex_list.image_num == 1 )
{
image_data.setImageResource(R.drawable.XXXX);
}

if( round_list.weather_num == 2 )
{
image_data.setImageResource(R.drawable.XXXX);

}

if( round_list.weather_num == 3 )
{
image_data.setImageResource(R.drawable.XXXX);

}


return view;

}
}





5.ListViewにイベントハンドラとAdapterを設定する



list_ex = (ListView)findViewById(R.id.list_ex);

//独自クラスの配列を作成
ArrayList ListArray = new ArrayList();


ListAdapter adapter
= new ListAdapter(this, R.layout.exlist, 0, ListArray );

list_ex.setAdapter(adapter);
list_ex.setScrollingCacheEnabled(false);




といった流れで少し複雑なListViewを作れます。

この5つのポイントをおさえておけば多少複雑でも実装することができます。
とくに手順3以降をじっくり考えて実装すれば、より理解が深まるかと思います。

1.画面レイアウトにListViewを追加する
2.1行分のレイアウトを作成する
3.ListViewの表示対象となる独自クラスを作る
4.独自クラス用のAdapterクラスを作る
5.ListViewにイベントハンドラとAdapterを設定する

0 件のコメント:

コメントを投稿