<Bus Stop プロジェクト用>AndroidでのListViewの使い方


ListViewについて

Androidアプリの開発でデータの一覧を表示したい場合がよくあります。そんな時によく使われるのがListViewです。Androidアプリ開発ではよく使われるViewです。アプリの設定画面やTwitterなどでよく見かけます。プロジェクトでも時刻表や市の広報情報の表示を行う際にはlistViewで情報を表示します。

配列やデータベースの情報を一覧で表示できるのでアプリの画面に項目を一覧表示する時に最適です。

ListViewはListViewクラスとListAdapterクラスから構成されています。

簡単なサンプル

まずlayoutのviewにlistViewを作ってあげます。

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

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/mylist"/>
</LinearLayout>

次にここで作ってあげたmylistを使ってコードでデータで表示します。

MainActivity.java
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    private String[] items = {"item1", "item2", "item3"};

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

        ListView mylist = (ListView) findViewById(R.id.mylist);
        mylist.setAdapter(new ArrayAdapter<String>(getApplicationContext(), android.R.layout.simple_list_item_1, items));

    }
}

これが最も簡単なサンプルです。
今回は配列に格納したデータを一覧表示します。
配列を用意して、listviewに対してsetAdapterメソッドを呼ぶだけでリスト表示ができます。もとからAndroidで用意されているandroid.R.layout.simple_list_item_1を使う感じですね。
ただ、これは文字が白色に表示されるので使いづらいかも...

ArrayListのデータをリスト表示

次はちょっと複雑なリストを表示します。
activity_mainはそのままでよくて、行に対してのlayoutを作成します。

item_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:padding="18dp"
          android:layout_width="match_parent"
          android:layout_height="wrap_content">
</TextView>

行のレイアウトはこんな感じ。

このTextViewが行のレイアウトになります。

最後にコードでデータの用意と表示を行います。

MainActivity.java
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {

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

        ListView mylist = (ListView) findViewById(R.id.mylist);

        // データの準備
        ArrayList<String> items = new ArrayList<>();
        for(int i = 0; i < 15; i++) {
            items.add("items" + i);
        }

        // Adapterの準備
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(
                this,
                R.layout.item_layout,
                items
        );

        // ListViewに表示
        mylist.setAdapter(adapter);
    }
}

まず、ArrayListにデータを用意します。
その後listViewにデータを渡すための橋渡しとしてAdapterに一度データをセットする必要があります。そのAdapterをlistviewのsetAdapterメソッドでセットすればArrayListのデータをリスト表示することができます。

アイテムの選択に対応する

リストの項目が選択された時に、その選択に応じて動作を行う必要があります。そんな時に使うのがListViewクラスのonItemClickメソッドです。

activity_main.xml
mylist.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                //ここに処理を書く
                Log.v("Log", String.valueOf(position));
            }
        });

引数のpositionを使って、どの行のリストが選択されたかがわかります!

全体を通してのプログラム

MainActivity.java
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

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

        ListView mylist = (ListView) findViewById(R.id.mylist);

        // データを準備
        ArrayList<String> items = new ArrayList<>();
        for(int i = 0; i < 30; i++) {
            items.add("items-" + i);
        }

        // Adapter - ArrayAdapter
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(
                this,
                R.layout.item_layout,
                items
        );

        // ListViewに表示
        mylist.setAdapter(adapter);
        mylist.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                //ここに処理を書く
                Log.v("Log", String.valueOf(position));
            }
        });
    }
}

以上です!!プロジェクトやアプリ開発で是非使ってみてください。