Androidアプリ開発でListViewを追加する方法【初心者向け】

Androidアプリ開発では、アプリのパーツを簡単に追加できるGUIコンポーネントが数多く用意されています。

今回はそのなかの1つである、ListView（リストビュー）を追加する方法と基本的な使い方をご紹介します。Android Studioの開発環境を構築していないという方は、Androidアプリ開発環境の構築方法をまずご覧ください。

 

本記事はTechAcademyのAndroidアプリ開発オンラインブートキャンプの内容をもとに解説しています。

 

 

ListViewを配置する

プロジェクト内の「/res/layout」で、ListViewを配置したいアクティビティのXMLファイルを開きます。

ListViewはパレットの「Containers」から配置できます。
パレット内のListViewを、配置したい場所までドラッグしましょう。

これでListViewの配置ができました。

なお、xmlファイルを確認すると、次のようなコードが追加されています。

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

 

ListViewにリスト項目を表示させる

この記事では、ListViewにリスト項目を表示させる方法を解説します。

MainActivityのonCreateを以下のように修正します。

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

    // ListViewに表示するリスト項目をArrayListで準備する
    ArrayList data = new ArrayList<>();
    data.add("国語");
    data.add("社会");
    data.add("算数");
    data.add("理科");
    data.add("生活");
    data.add("音楽");
    data.add("図画工作");
    data.add("家庭");
    data.add("体育");

    // リスト項目とListViewを対応付けるArrayAdapterを用意する
    ArrayAdapter adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, data);

    // ListViewにArrayAdapterを設定する
    ListView listView = (ListView)findViewById(R.id.listView);
    listView.setAdapter(adapter);
}

 

それぞれの内容を詳しく見ていきましょう。

 

まず、ListViewに表示するリスト項目を、ArrayListで準備します。実際の開発現場では、データベースから取得した情報をもとにリスト項目を準備する場合が多いでしょう。

// ListViewに表示するリスト項目をArrayListで準備する
ArrayList data = new ArrayList<>();
data.add("国語");
data.add("社会");
data.add("算数");
data.add("理科");
data.add("生活");
data.add("音楽");
data.add("図画工作");
data.add("家庭");
data.add("体育");

 

次に、ArrayAdapterを用意します。ArrayAdapterは、ArrayListで作成したリスト項目をListViewに表示させるための橋渡し役役となります。引数の「android.R.layout.simple_list_item_1」は、あらかじめ用意されているシンプルなリスト用のレイアウトです。

// リスト項目とListViewを対応付けるArrayAdapterを用意する
ArrayAdapter adapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, data);

 

最後に、listViewにArrayAdapterをセットします。これでAdapterを介してListViewにリスト項目が表示されることになります。

// ListViewにArrayAdapterを設定する
ListView listView = (ListView)findViewById(R.id.listView);
listView.setAdapter(adapter);

 

[PR] Androidアプリの開発で挫折しない学習方法を動画で公開中

ListViewを表示する

実行すると次のようになります。作成したリスト項目がListViewで表示されています。

 

画面からはみ出してしまっていてもスクロールで表示することができます。

 

ListViewをカスタマイズする（1）

ListViewのカスタマイズの方法を2つご紹介します。1つ目は、リストの各項目の区切り線の色と太さを変える方法です。

プロパティの「Divider」で区切り線の色を指定することができます。また、「Divider Height」で区切り線の太さを指定することも可能です。

アプリを起動すると、区切り線が変更されていることが確認できます。

 

ListViewをカスタマイズする（2）

2つ目は、リストの各行のレイアウトを変える方法です。ListViewでは以下のように、各行のレイアウトを簡単に変えることができます。今回は「タイトルと説明」のような、2つの項目が1行に表示されるレイアウトにする方法をご紹介します。

 

MainActivityのonCreateを以下のように修正します。

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

    // リスト項目のもととなる値を準備する
    String[] subjects = {"国語", "社会", "算数", "理科"};
    String[] comments = {"今週の授業は古典です", "来週、社会科見学に行きます",
            "図形のテストがあります", "今日は実験をします"};

    // ListViewに表示するリスト項目をArrayListで準備する
    List<Map<String, String>> data = new ArrayList<Map<String, String>>();
    for (int i=0; i<subjects.length; i++){
        Map<String, String> item = new HashMap<String, String>();
        item.put("Subject", subjects[i]);
        item.put("Comment", comments[i]);
        data.add(item);
    }

    // リスト項目とListViewを対応付けるArrayAdapterを用意する
    SimpleAdapter adapter = new SimpleAdapter(this, data,
            android.R.layout.simple_list_item_2,
            new String[] { "Subject", "Comment" },
            new int[] { android.R.id.text1, android.R.id.text2});

    // ListViewにArrayAdapterを設定する
    ListView listView = (ListView)findViewById(R.id.listView);
    listView.setAdapter(adapter);
}

 

変わったところを見ていきましょう。

今回は、2項目で1組のレイアウトですので、リスト項目もそれに合わせて準備します。

// リスト項目のもととなる値を準備する
String[] subjects = {"国語", "社会", "算数", "理科"};
String[] comments = {"今週の授業は古典です", "来週、社会科見学に行きます",
        "図形のテストがあります", "今日は実験をします"};

// ListViewに表示するリスト項目をArrayListで準備する
List<Map<String, String>> data = new ArrayList<Map<String, String>>();
for (int i=0; i<subjects.length; i++){
    Map<String, String> item = new HashMap<String, String>();
    item.put("Subject", subjects[i]);
    item.put("Comment", comments[i]);
    data.add(item);
}

次に、ArrayAdapterを用意します。基本的な考え方は先程の例と同じです。引数の「android.R.layout.simple_list_item_2」は、あらかじめ用意されている2項目1組のリスト用のレイアウトです

// リスト項目とListViewを対応付けるArrayAdapterを用意する
SimpleAdapter adapter = new SimpleAdapter(this, data,
        android.R.layout.simple_list_item_2,
        new String[] { "Subject", "Comment" },
        new int[] { android.R.id.text1, android.R.id.text2});

 

実行すると次のようになります。ListViewのレイアウトが変更されましたね。

 

今回の記事は以上です。
ぜひ参考にしてみてください。

 

また、Androidアプリ開発でImageViewを追加する方法など、Androidアプリ開発に役立つほかの記事も合わせてご覧ください。

 

 

[お知らせ]TechAcademyでは初心者でもオリジナルアプリが作れるAndroidアプリ開発講座(オンラインブートキャンプ)を開催しています。自分でアプリを公開してみたい場合はご参加ください。