Mono Works

以前、ビューをページ内に配置する方法の例として、LinearLayout と RelativeLayoutについて書きました。これらのレイアウト方法は、ひとつの画面に決まったビューのみ表示する場合にシンプルで良い方法だと思います。

メモ：ビューの配置 - LinearLayout と RelativeLayout - Mono Works

今回は、複数のデータを並べて表示して、もしデータが多くて画面に収まらない場合はスクロールさせて表示するといったことが可能になるListViewについて調べてみました。

おさらい（TextViewをたくさん並べる方法）

まずは、以前紹介したLinearLayoutで縦一列にTextViewを配置する方法で、データを縦に並べてみます。

メモ：ビューの配置 - LinearLayout と RelativeLayout - Mono Works

この方法だと、レイアウト（xml）ファイルにずらずらとTextViewを並べて、それぞれにレイアウトの属性を記述する必要があり、しかもスクロールに対応していないので、画面からはみ出してしまった分は表示できません。

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

  <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="data01" />

  <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="data02" />
            ︙
          //　中略（実際には、data01から40まで記述）
            ︙
  <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="data39" />

  <TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="data40" />

</LinearLayout>

xmlファイルには、data01からdata40まで記述しましたが、実際の画面には、data27までしか表示されません。単にTextViewを並べているだけなので、スクロールもせず、この画面のまま固定です。

ListViewを使ってデータを表示する

ListViewは、ひとつのビューの中に複数のデータを縦一列に並べて表示することができます。調べてみると、いろいろな記述方法があるようですが、大まかな流れは以下のとおりです。

1. 一覧で表示させたい「データ」を用意する
2. xmlファイルに「レイアウト」を設定する
3. Adapterを作成して、「データ」と「レイアウト」を設定する
4. ListViewを作成する
5. 作成したListViewにAdapter（データとレイアウト）をセットして、リストを表示する

それでは、具体的に作業していきます。

1．一覧表示させたい「データ」の用意

先ほどの例で並べて表示しようとした文字列をデータ（moji0140）として用意します。

String[] moji0140 = {
    "data01", "data02", "data03", "data04", "data05", "data06",
    "data07", "data08", "data09", "data10", "data11", "data12",
    "data13", "data14", "data15", "data16", "data17", "data18",
    "data19", "data20", "data21", "data22", "data23", "data24",
    "data25", "data26", "data27", "data28", "data29", "data30",
    "data31", "data32", "data33", "data34", "data35", "data36",
    "data37", "data38", "data39", "data40" };

2．「レイアウト」の設定

レイアウト用のxmlファイルにビューの設定を記述。次で紹介する代表的なAdapterである「ArrayAdapter」は、提供されるリソースIDが単一のTextViewを参照することを標準としているので、この例でもTextViewをひとつだけ配置します。。

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" />

3．Adapterに「データ」と「レイアウト」を設定

Adapterのひとつである「ArrayAdapter」に対して、「String」型のデータ（moji0140）をレイアウト（R.layout.activity_main）に沿って設定する場合、下記のような形式で記述します。

ArrayAdapter<CharSequence> adapter =
    new ArrayAdapter<CharSequence>(this, R.layout.activity_main, moji0140);

※いちおう CharSequence の部分は、String と置き換えても実行できます。というか、最初は素直に String で記述していたのですが、Android Studioで警告が出ていたので、下記リファレンスを確認すると CharSequence が指定されていたので、上記の通りとしました。

ArrayAdapter | Android Developers

ArrayAdapter  |  Android Developers

ArrayAdapterのリファレンスには、クラス概要に「単一のTextView参照」の件や、6種類のコンストラクタについて記載されています。どのコンストラクタを選べば良いのかについては、勉強不足なので、また後日。

4と5．ListView作成から、Adapterセットとリストの表示まで

まずは、ListViewを作成して

ListView list = new ListView(this);

作成したListViewにAdapterをセットして

list.setAdapter(adapter);

Activity上にView（リスト）を表示するよう設定

setContentView(list);

記述のまとめ

レイアウトファイル：activity_main.xml

<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

実行ファイル：MainActivity.java

package jp.co.monoworks.listviewsample;

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);</br>  String[] moji0140 = {
                "data01", "data02", "data03", "data04", "data05", "data06",
                "data07", "data08", "data09", "data10", "data11", "data12",
                "data13", "data14", "data15", "data16", "data17", "data18",
                "data19", "data20", "data21", "data22", "data23", "data24",
                "data25", "data26", "data27", "data28", "data29", "data30",
                "data31", "data32", "data33", "data34", "data35", "data36",
                "data37", "data38", "data39", "data40" };</br>  ArrayAdapter<CharSequence> adapter =
                new ArrayAdapter<CharSequence>(this, R.layout.activity_main, moji0140);</br>  ListView list =  new ListView(this);
        list.setAdapter(adapter);
        setContentView(list);
    }
}

実際に表示される画面

こんな感じになります。

TextViewをたくさん並べただけの「おさらい」の画面との違いは、文字間のラインくらいに見えますが、こちらの画面は、リスト画面がスクロールして最後のdata40まできちんと表示されます。

【参考サイト】

・ListView | Android Developers

・ArrayAdapter | Android Developers

・メモ：ビューの配置 – LinearLayout と RelativeLayout（Android） | Mono Works