Androidアプリ入門 No.21 ListViewの基本

ListView

ListViewの基本

まず、基本的なListViewを作成する。最初にmain.xmlを以下のように記述する。ListViewは別段特別な属性なくidのみ指定しておく。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <ListView
        android:id="@+id/listView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

次に、strings.xmlを以下のように定義する。新しく定義したtest_arrayがListViewに表示する内容になる。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, MainActivity!</string>
    <string name="app_name">ActivityTest</string>

    <string-array name="test_array">
        <item>あいうえお</item>
        <item>かきくけこ</item>
        <item>さしすせそ</item>
        <item>たちつてと</item>
        <item>なにぬねの</item>
        <item>はひふへほ</item>
        <item>まみむめも</item>
        <item>や　ゆ　よ</item>
        <item>らりるれろ</item>
        <item>わをん　　</item>
    </string-array>
</resources>

最後にMainActivity.javaは以下のようにする。getResourcesでstrings.xmlで指定した文字列の配列を取得しそれをListViewで表示している。この例のようにListViewに表示する値はAdapterを介してセットするようになっている。ここで、ArrayAdapterコンストラクタの2番目の引数の「list」はlist.xmlの拡張子を除いた部分である。

package sample.at;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ListView listView = (ListView) findViewById(R.id.listView);

        String[] aiueo = getResources().getStringArray(R.array.test_array);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, R.layout.list, aiueo);
        listView.setAdapter(adapter);
    }
}

実行結果は以下。

また、組込のレイアウトを使うことで標準的な見栄えにすることもできる。ここで、MainActivity.javaを以下のように変更する。ArrayAdapterの2番目の引数をAndroid組み込みのandroid.R.layout.simple_list_item_1にしている。

package sample.at;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ListView listView = (ListView) findViewById(R.id.listView);

        String[] aiueo = getResources().getStringArray(R.array.test_array);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, aiueo);
        listView.setAdapter(adapter);
    }
}

実行結果は以下になる。標準的にpaddingがとられ文字サイズも大きくなり罫線が引かれたものになる。

この例で、基本的な属性値を説明する。

属性	説明
divider	区切り線の色
dividerHeight	区切り線の高さ。
choiceMode	リストの項目が選択できるか、また複数選択できるかを設定する。

deviderとdeviderHeightの例を示す。main.xmlを以下のようにする。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <ListView
        android:id="@+id/listView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="#00f"
        android:dividerHeight="5px"
        />
</LinearLayout>

実行例は以下。dividerで線を青にし、dividerHeightで線の高さを指定している。

次に、choiceMode属性の説明をする。choiceModeは以下の値を選択できる。

属性	説明
none	選択できない。
singleChoice	リスト中1つだけ選択できる。RadioButonのようになる。
multipleChoice	複数の項目を選択できる。CheckBoxのようになる。

まず、singleChoiceの例を挙げる。main.xmlにchoiceMode属性を追加する。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <ListView
        android:id="@+id/listView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="#00f"
        android:dividerHeight="5px"
        android:choiceMode="singleChoice"
        />
</LinearLayout>

次に、MainActivity.javaを以下のように変更する。ここで、先ほどまでlistと指定していたArrayAdapterの2番目の引数に注目する。ここでは、android.R.layout.simple_list_item_single_choiceとなっており、Androidの組み込みのレイアウトを使っている。

package sample.at;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ListView listView = (ListView) findViewById(R.id.listView);

        String[] aiueo = getResources().getStringArray(R.array.test_array);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_single_choice, aiueo);
        listView.setAdapter(adapter);
    }
}

実行結果は以下。RadioButtonが付加されリストの1つのみが指定できるようになっている。

次に、multipleChoiceの例を挙げる。同様にmain.xmlは以下のように書く。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <ListView
        android:id="@+id/listView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:divider="#00f"
        android:dividerHeight="5px"
        android:choiceMode="multipleChoice"
        />
</LinearLayout>

次に、MainActivity.java。こちらも同様にArrayAdapterの2番目の引数をAndroid組み込みの、android.R.layout.simple_list_item_multiple_choiceにしている。

package sample.at;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        ListView listView = (ListView) findViewById(R.id.listView);

        String[] aiueo = getResources().getStringArray(R.array.test_array);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_multiple_choice, aiueo);
        listView.setAdapter(adapter);
    }
}

実行結果は以下。CheckBox形式で複数選択できるようになっている。