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

はじめに

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

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

ListViewとは

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

カスタマイズするにあっての手順

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

一つ目は1⾏分のレイアウトxmlファイル(row.xml)を⽤意する｡
レイアウトの書き方は以下のような感じで書く(ファイル名は何でも良い)

　<LinearLayout …>
　　<ImageView …/>
　　<TextView …/>
　　<TextView …/>
　　<TextView …/>
　</LinearLayout>

※レイアウトファイルを作成する際、ルートレイアウトタグの
　android:layout_heightはwrap_contentとしておく

２つ目はアダプタクラスをnewする時にレイアウトを指定する引数に
row.xmlのR値を指定する。

new SimpleAdapter(…, _list, R.layout.row, from, to);

３つ目はアダプタクラスをnewする時に引数toとして渡すint配列では、
row.xml中に記述したidのR値を指定する。

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の中の各項目用レイアウトは人によって変わりますので、ぜひ、自分だけのカスタマイズListViewを作成してみてください

参考にした資料
AndroidのListView内に複数項目を表示する方法