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を追加してから、
![スクリーンショット 2016-01-18 2.33.42.png](https://qiita-image-store.s3.amazonaws.com/0/109743/70182666-c8d3-a700-3d39-978522a7accc.png)

**ArrayAdapterオブジェクトの生成**
ArrayAdapterのコンストラクタ
・ArrayAdapter(Context context, int textViewResourceId, List< T > objects)

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

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

表示することができました。
![スクリーンショット 2016-01-18 2.47.20.png](https://qiita-image-store.s3.amazonaws.com/0/109743/e1cc252f-2482-2f19-382e-10c02cc7e690.png)


#独自のAdapterを作ってみよう！
自作のAdapterを用意することで、複数の画像やテキストなどをViewに表示させる事ができます。
自由にList Viewをカスタマイズすることが出来ます。
例えば、下のように。
![スクリーンショット 2016-01-18 4.11.05.png](https://qiita-image-store.s3.amazonaws.com/0/109743/39f5d681-67b1-71e3-dbb1-bf37be8d2177.png)

##独自のAdapterを作る前に、Listに表示させるオブジェクトを作ろう！
例えば、以下のような形で作ってみよう。

```lang: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つ置いた。

```lang: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に名前や値段を格納します。

```lang: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を使ってみよう〜〜