Androidアプリ開発 ListViewで一覧画面を作成する

2016年04月13日(編集2016年04月13日)
このエントリーをはてなブックマークに追加

Androidアプリで一覧データのUI(ユーザーインターフェース)を作成する場合は、ListViewかRecyclerViewを使います。

この記事は、ListViewの使い方を記載した記事です。
環境はAndroid 6.0 (API level 23) です。

環境

  • android sdk 23
  • Build Tools, Revision 23.0.2
  • Android Studio 1.5.1

難易度

初心者向け

サンプルコード

https://github.com/java-lang-programming/Android-ListView-Demo

ListViewとは

ListViewクラスは、Androidアプリで一覧画面のUIを作成する時に利用します。

ListViewで作成した一覧画面

RecyclerViewとの違い

一覧画面のUIの作成は、RecyclerViewクラスを利用しても作成することができます。
RecyclerViewはMaterial designと共にandroid5.0から導入された比較的新しいライブラリです。
一方で、ListViewクラスはAndroid初期から用意されているクラスです。
シンプルな一覧画面(少なめのデータの一覧表示、クリック遷移)を作成する場合は、ListViewで十分に機能を満たせます。

また、枯れた技術なので、なにか問題が発生した場合にインターネット上で解決策が探しやすいという利点もあります。

ListViewのクリック処理

機能比較

よく利用する機能を、ListViewとRecyclerViewで比較した一覧を示します。

■ ListViewとRecyclerViewの機能比較一覧

機能 ListView RecyclerView
header ×
footer ×
項目クリック 実装する
区切り線 実装する
スワイプ ×
ドラッグ&ドロップ ×
横スクロール ×
キャッシュ(ViewHolder) ×

データよりアクションに重きを置く場合は、RecyclerViewを利用するべきです。

また、Androidアプリ開発初心者の場合は、ListViewの方が理解しやすいと思います。
最初はListViewで一覧画面を作成して、実装に慣れてきたらRecyclerViewに移行すると良いでしょう。

ListView

実際にListViewを使用してアプリのサンプルを作成していきます。Android Studioを利用している場合は、GUIから雛形を作成できます。
Listを選択すると、RecyclerViewが自動で作成されてしまうので、手動でFragmentを作成します。

利用クラスの解説

ListViewで使うクラスの説明をします。
ListViewは、以下のクラスやインターフェースを組み合わせて作成していきます。

■ListViewで利用するインターフェースとクラス

名称 機能
ListView 縦スクロールの画面一覧を表示する
ArrayAdapter ListView内で表示する画面とデータを結合する

ListViewの定義

ListViewを定義します。xmlにListViewのタグを記述します。

{project_folder}/app/res/layout/fragment_list_view.xml
<FrameLayout 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"
    tools:context="com.java_lang_programming.android_listview_demo.ui.ListViewFragment">

    <ListView
        android:id="@android:id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:choiceMode="singleChoice" />

</FrameLayout>
        

java側で記載したtagを実体化します。

{project_folder}/app/com/ui/ListViewFragment.java
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_list_view, container, false);

        this.mListView = (ListView) view.findViewById(android.R.id.list);
        this.mListView.setOnScrollListener(new AbsListView.OnScrollListener() {

            @Override
            public void onScrollStateChanged(AbsListView view, int scrollState) {

            }

            @Override
            public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

            }
        });

        if (adapter == null) {
            adapter = new MyItemListViewAdapter(getActivity(), R.layout.list_view_item, DummyContent.ITEMS);
            this.mListView.setAdapter(adapter);
        }
        
        return view;
    }
        

■ 実装のポイント

AbsListView.OnScrollListenerの匿名クラスで、スクロール処理を記述します。

this.mListView.setOnScrollListener(new AbsListView.OnScrollListener() {

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {

    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

    }
});
        

setAdapterメソッドで、MyItemListViewAdapterオブジェクトを設定しています。MyItemListViewAdapterは、ArrayAdapterを継承した子クラスです。このクラスでListViewで表示するデータを処理します。

if (adapter == null) {
    adapter = new MyItemListViewAdapter(getActivity(), R.layout.list_view_item, DummyContent.ITEMS);
    this.mListView.setAdapter(adapter);
}
        

ArrayAdapterの定義

ListViewで縦表示するデータは、ArrayAdapterを介して扱うことができます。
ArrayAdapterはBaseAdapterを継承した子クラスです。

以下のように実装します。

{project_folder}/app/com/ui/MyItemRecyclerViewAdapter.java
package com.java_lang_programming.android_listview_demo.ui;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

import com.java_lang_programming.android_listview_demo.R;
import com.java_lang_programming.android_listview_demo.logic.DummyContent.DummyItem;

import java.util.ArrayList;
import java.util.List;

public class MyItemListViewAdapter extends ArrayAdapter<ArrayList<DummyItem>> {

    List<DummyItem> mList;

    public MyItemListViewAdapter(Context context, int resource, List<DummyItem> list) {
        super(context, resource);
        mList = list;
    }

    @Override
    public int getCount() {
        if (mList != null) {
            return mList.size();
        } else {
            return 0;
        }
    }

    @Override
    public long getItemId(int position) {
        if (mList != null) {
            return position;
        } else {
            return -1;
        }
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        View row = convertView;
        if (row == null) {
            LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            row = inflater.inflate(R.layout.list_view_item, parent, false);
        }

        DummyItem dummyItem = mList.get(position);

        TextView id = (TextView) row.findViewById(R.id.id);
        id.setText(dummyItem.id);

        TextView content = (TextView) row.findViewById(
                R.id.content);
        content.setText(dummyItem.content);

        return row;

    }
}
        

■ 実装のポイント

オーバーライドしたgetViewメソッドで特定の位置でデータを表示するviewを取得します。

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    View row = convertView;
    // something
}
        

XMLのレイアウトファイルからviewを取得するか、もしくは自分でviewを作成します。

@Override
public View getView(int position, View convertView, ViewGroup parent) {

    View row = convertView;
    if (row == null) {
        LayoutInflater inflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        row = inflater.inflate(R.layout.list_view_item, parent, false);
    }
    // something
}
        

viewを取得したら、フィールドオブジェクトを生成し、データを設定します。

ビルドして実行

ビルドしてアプリを実行します。

ビルドしてアプリを実行

一覧が表示されました。

まとめ

ListViewは、RecyclerViewと比較すると、簡単に一覧画面を実装できます。なので、Android開発に慣れていない場合は、まずはListViewを利用しましょう。

慣れてきたらRecyclerViewを利用して、動きのある一覧画面を作成してみると良いと思います。

関連記事

タグ検索で調べてみよう

Android6.0 UI