Android開発でList Viewを使おう！

この記事は最終更新日から3年以上が経過しています。

はじめに

---

Androidでデータ一覧を表示する時は、List Viewを使うと便利です。

なので、今日の勉強会はList Viewを学んでいきます！

ListViewとAdapter

---

ListViewクラスは、データをリスト形式で表示するためのビュークラスです。

このListViewにデータを表示するには、Adapterを使用します。

Adapterとは…

"データをViewの橋渡しをするもの"です。

つまり、開発者はAdapterを使ってデータにアクセスしているということです。

Adapterにはいくつか種類があるので少し紹介します。

・ ArrayAdapter

　　配列やListを1行に1つ表示する時に使う

・ SimpleAdapter

　　XMLファイルで定義されたビューを表示する時に使う

・ BaseAdapter

　　ArrayAdapter・CursorAdapter・SimpleAdapterのスーパークラス。

　　独自のAdapterクラスを定義して、レイアウトを自由にカスタマイズする時に使う

作ってみよう！

---

ということで、実際にListViewを使ってListを表示してみよう〜！

レイアウトでListViewを追加してから、

ArrayAdapterオブジェクトの生成

ArrayAdapterのコンストラクタ

・ArrayAdapter(Context context, int textViewResourceId, List< T > objects)

引数	説明
context	Contextオブジェクト
textViewResourceId	レイアウトファイルのID
objects	表示するデータを示す配列　or Listクラス

「android.R.layout.simple_list_item_1」は、アンドロイドにあらかじめ用意されているレイアウトファイルで、自分でカスタマイズすることも可能です。

表示することができました。

独自のAdapterを作ってみよう！

---

自作のAdapterを用意することで、複数の画像やテキストなどをViewに表示させる事ができます。

自由にList Viewをカスタマイズすることが出来ます。

例えば、下のように。

独自のAdapterを作る前に、Listに表示させるオブジェクトを作ろう！

---

例えば、以下のような形で作ってみよう。

Food.java

public class Food { long id; private String name; private int price; public long getId() { return id; } public void setId(long id) { this.id = id; } public String getName(){ return name; } public void setName(String name){ this.name=name; } public int getPrice(){ return price; } public void setPrice(int price){ this.price=price; } }

List Viewの行に使うレイアウトファイルを作成しよう！

---

自分の好きなようにレイアウトしてみよう。

上の例では、食べ物の名前と値段を表示するために、TextViewを2つ置いた。

foodrow.xml

独自のAdapterを作成しよう！

---

先ほど出てきた、BaseAdapterを継承した独自のAdapterを作成します。

getView()内で先ほど作成したListViewの行のレイアウトファイルを指定しTextViewに名前や値段を格納します。

MyAdapter.java

import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.TextView; import java.util.ArrayList; public class MyAdapter extends BaseAdapter { Context context; LayoutInflater layoutInflater = null; ArrayList<Food> foodList; public MyAdapter(Context context) { this.context = context; this.layoutInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE); } public void setFoodList(ArrayList<Food> foodList) { this.foodList = foodList; } @Override public int getCount() { return foodList.size(); } @Override public Object getItem(int position) { return foodList.get(position); } @Override public long getItemId(int position) { return foodList.get(position).getId(); } @Override public View getView(int position, View convertView, ViewGroup parent) { convertView = layoutInflater.inflate(R.layout.foodrow,parent,false); ((TextView)convertView.findViewById(R.id.name)).setText(foodList.get(position).getName()); ((TextView)convertView.findViewById(R.id.price)).setText(String.valueOf(foodList.get(position).getPrice())); return convertView; } }

AdapterにListViewをセットしよう！

---

最後に、AdapterにListViewをセットすれば完成！

　　@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); listView = (ListView) findViewById(R.id.listView); ArrayList<Food> list = new ArrayList<>(); MyAdapter myAdapter = new MyAdapter(MainActivity.this); myAdapter.setFoodList(list); listView.setAdapter(myAdapter); }

ListViewに新しくアイテムを追加するのは、以下のようにすればできます。

Food food = new Food(); food.setName("りんご"); food.setPrice(100); list.add(food); myAdapter.notifyDataSetChanged();

いろいろカスタマイズしてみよう！

---

アイテムを増やしたり、画像を入れてみたり、List Viewの行のレイアウトを変えたりして、ListViewを使ってみよう〜〜