Android開発でList Viewを使おう！

はじめに

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/name"
            android:textSize="30dp"
            android:layout_weight="2" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/price"
            android:textSize="30dp"
            android:layout_weight="1" />
    </LinearLayout>

</LinearLayout>

独自の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を使ってみよう〜〜