ListViewを2行表示してカスタマイズするには

# はじめに
こんにちは、Hideです。
javaに関する記事を投稿しています。

今回は、ListViewをカスタマイズする方法を投稿します。

# ListViewとは
ListViewはスクロール可能なアイテムのリストを表示するViewグループです。
Adapterは配列またはデータベースなどからそれぞれの要素をリストに入れられるように変換し自動的に挿入してくれます。

# カスタマイズするにあっての手順
ListViewの各行をカスタマイズするには以下の手順でする

一つ目は1⾏分のレイアウトxmlファイル(row.xml)を⽤意する｡
レイアウトの書き方は以下のような感じで書く(ファイル名は何でも良い)
```text
　<LinearLayout …>
　　<ImageView …/>
　　<TextView …/>
　　<TextView …/>
　　<TextView …/>
　</LinearLayout>
```
※レイアウトファイルを作成する際、ルートレイアウトタグの
　<span style="color: red;">android:layout_height</span>は<span style="color: red;">wrap_content</span>としておく

<br>

<br>

２つ目はアダプタクラスをnewする時にレイアウトを指定する引数に
row.xmlのR値を指定する。
```text
new SimpleAdapter(…, _list, R.layout.row, from, to);
```
<br>

<br>

３つ目はアダプタクラスをnewする時に引数toとして渡すint配列では、
row.xml中に記述したidのR値を指定する。
```text
int[] to = {R.id.tvMenuName, R.id.tvMenuPrice};
```

# カスタマイズしたListViewの例
### ListViewをレイアウトの中で作成
activity_main.xmlの内容
```res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:drawSelectorOnTop="false"
        android:layout_weight="1" />

    <TextView
        android:id="@id/test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world" />

</LinearLayout>
```

### ListViewの中の各項目用レイアウトの作成
item.xmlの内容
```res/layout/item.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/vw1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <TextView
           android:id="@+id/comment"
             android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>
```

### プログラムでSimpleAdapterを作成し表示
MainActivity.javaの内容
```java/MainActivity.java
public class MainActivity extends AppCompatActivity {

    ArrayList<Map<String,Object>> list = new ArrayList<Map<String, Object>>();
    SimpleAdapter adapter;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // ListView を取得
        ListView listView = (ListView) findViewById(R.id.listView);

        // SimpleAdapterに渡すArrayList作成
        createData();

        // リストビューに渡すアダプタを生成
        adapter = new SimpleAdapter(
                this,
                list,                         //ArrayList
                R.layout.item,                //ListView内の1項目を定義したxml
        new String[] { "title", "comment","img" },       //mapのキー
        new int[] {R.id.title, R.id.comment, R.id.img });//item.xml内のid

        // アダプタをセット
        listView.setAdapter(adapter);
    }

    private void createData() {
        for (int n = 0; n < 15; n++) {
            Map data = new HashMap();
            data.put("title", "title" + n);
            data.put("comment", "comment" + n);
            data.put("img", R.drawable.ic_launcher);
            list.add(data);
        }
    }
}
```

# 実装結果
![ListViewを使う例.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2652946/1c512d27-aa98-a2aa-5f81-2451cd9c21ad.png)

# 最後に
私が書いたListViewの中の各項目用レイアウトは人によって変わりますので、ぜひ、自分だけのカスタマイズListViewを作成してみてください

参考にした資料
[AndroidのListView内に複数項目を表示する方法](http://puyooboe.blogspot.com/2015/05/androidlistviewsimpleadapter.html)