Programming Style

メニュー

初心者がアプリ開発者になるためのプログラミング学習サイト

[Android] RecyclerView:リストを表示する

APIガイド コメント
android_android-recyclerview_00

RecyclerViewは、従来のListViewをよりレイアウトやアニメーションを自由にカスタマイズすることができるリストです。ここでは、RecyclerViewを使ってリストを表示する方法を説明します。

 

広 告

 

目次

前提条件

動作確認端末

  • Google Nexus 5 – 5.0.0 – API21（エミュレータ）

1. RecyclerViewの概要

RecyclerViewは大容量のデータを効率的よく閲覧するためにスクロールするリストのウィジェットです。ユーザ操作やネットワーク状態により動的に項目数を変更させるリストを表示させたいときなどに使います。

 

RecyclerViewを使用するためには、アダプターとレイアウトマネージャーを設定する必要があります。設定するアダプターはRecyclerView.Adapterを継承したクラスを用います。

 

設定するレイアウトマネージャーによって、RecyclerViewのレイアウトが変わります。レイアウトには以下の３種類があります。

 

  • LinearLayoutManagerは垂直または水平にスクロールするリストを表示します
  • GridLayoutManagerはグリッド上のリストを表示します
  • StaggeredGridLayoutManagerはスタッガード格子状のリストを表示します

2. RecyclerView用サポートライブラリを導入する

RecyclerViewを使うためには、まずサポートライブラリをプロジェクトにインポートする必要があります。

 

サポートライブラリを導入するためには、Android Studioのプロジェクトビューからプロジェクトを選択した状態でマウスを右クリックし、「Open Module Settings」を選択します。次に「Dependencies」タブを選択し、左下の「+」ボタンをクリック、プルダウンから「1.Library Dependency」を選択します。

 

android_android-recyclerview_01

表示されたリストの中から「recyclerview-v7」を選択し「OK」をクリックすればインポート完了です。

 

3. １行リストを表示する

RecyclerViewを使ってリストを表示させるためには、<android.support.v7.widget.RecyclerView>タグを使用します。

以下に、1行のテキストリストを表示させるレイアウトXMLの実装例を示します。

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/recyclerview"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EEEEEE"
    tools:context=".MainActivity"
    />

リストを表示する場合は、リスト１行分のレイアウトを用意する必要があります。ここではitem.xmlという名前のレイアウトXMLを用意し、以下のように記述します。テキストのみが表示される単純なレイアウトです。

 

main/res/layout/item.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="100dp"
    android:layout_margin="8dp"
    android:orientation="horizontal">
    <TextView
        android:id="@+id/item_name"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="8dp"
        android:gravity="center_vertical"
        android:textSize="14sp"
        android:textColor="#424242"
        android:background="#F8BBD0"/>
</LinearLayout>

次にActivity側のコードです。

 

java/<packagename>/MainActivity.java

public class MainActivity extends Activity {
    …
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));
        final List list = new ArrayList();
        for (int i = 0; i < 30 ; i++ ) {
            list.add("item" + i);
        }
        recyclerView.setAdapter(new RecyclerAdapter(getApplicationContext(), list));
    }

    private static final class RecyclerAdapter
            extends RecyclerView.Adapter {
        private final Context mContext;
        private List mItemList = new ArrayList();
        private RecyclerAdapter (final Context context, final List itemList) {
            mContext = context;
            mItemList = itemList;
        }

        @Override
        public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            final View view = LayoutInflater.from(mContext).inflate(R.layout.item, parent, false);
            return new ViewHolder(view);
        }
        @Override
        public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
            final TextView textItem = (TextView) holder.itemView.findViewById(R.id.item_name);
            textItem.setText(mItemList.get(position));
        }
        @Override
        public int getItemCount() {
            return mItemList.size();
        }

        private static class ViewHolder extends RecyclerView.ViewHolder {
            private final TextView mTextView;
            private ViewHolder(View v) {
                super(v);
                mTextView = (TextView) v.findViewById(R.id.item_name);
            }
        }
    }
}

上記コードについて、まずonCreate()メソッドの実装について説明します。

 

recyclerView.setHasFixedSize(true);

リストのレイアウトサイズが動的に変わらず固定されている場合、setHasFixedSize()にtrueを設定すると、パフォーマンスが向上します。今回はレイアウトサイズが動的に変わることはありません。

 

recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext()));

レイアウトマネージャーをRecyclerViewに設定しています。RecyclerViewを使う場合は、レイアウトマネージャーを必ず設定する必要があります。１行リストを表示する場合は、LinearLayoutManagerを設定します。

 

final List list = new ArrayList();
for (int i = 0; i < 30 ; i++ ) {
    list.add("item" + i);
}
recyclerView.setAdapter(new RecyclerAdapter(getApplicationContext(), list));

30行分のデータを生成し、アダプターに設定しています。RecyclerAdapterクラスはRecyclerView.Adapterクラスを継承した自作クラスです。ここではMainActivityクラス内に内部クラスとして宣言しています。

次にRecyclerAdapterクラス内部の処理について説明します。

 

private static class ViewHolder extends RecyclerView.ViewHolder {
    private final TextView mTextView;
    private ViewHolder(View v) {
        super(v);
        mTextView = (TextView) v.findViewById(R.id.item_name);
    }
}

このクラスはRecyclerView.ViewHolderクラスを継承させたものでビューホルダーと呼びます。このクラスは、リスト1行分レイアウト（item.xml）のビューオブジェクトを保持するクラスです。後に説明しますが、リストに表示するデータを設定するメソッド内で使用します。

 

ビューはインスタンス変数に宣言し、コンストラクタ内でインスタンス生成させます。今回は、テキストのみであるためTextViewのみを記述します。

 

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    final View view = LayoutInflater.from(mContext).inflate(R.layout.item, parent, false);
    return new ViewHolder(view);
}

ビューホルダーを生成するメソッドです。LayoutInflaterを使ってレイアウトXMLのビューオブジェクトを生成し、それをコンストラクタの引数としてビューホルダーを生成し返却します。

 

このメソッドは、リストを生成する時に自動で実行されます。

 

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    final TextView textItem = (TextView) holder.itemView.findViewById(R.id.item_name);
    textItem.setText(mItemList.get(position));
}

リストに表示するデータを設定するメソッドです。テキストに表示する文字を設定しています。設定する文字列は、RecyclerAdapterのコンストラクタに渡されたString型リストの値を使用しています。

 

@Override
public int getItemCount() {
    return mItemList.size();
}

表示するリストの行数を返却するメソッドです。

これらを実行すると、以下のような画面になります。

 

android_android-recyclerview_02

 

4. グリッド状のリストを表示する

グリッド状のリストを表示する場合は、レイアウトマネージャーとしてGridLayoutManagerを使用します。以下のようにsetLayoutManager()メソッドの引数にGirdLayoutManagerのインスタンスを設定します。

 

recyclerView.setLayoutManager(new GridLayoutManager(getApplicationContext(),2));

GridLayoutManagerの第2引数にはグリッドを何列にして表示させるかを設定します。上記のコード例だと2列で表示されます。実行すると以下のように表示されます。

 

android_android-recyclerview_03

3列表示にした場合は、以下のように表示されます。

 

android_android-recyclerview_04

 

5. スタッガード格子状のリストを表示する

スタッガード格子状のリストを表示する場合は、レイアウトマネージャーとしてStaggeredGridLayoutManagerを使用します。以下のようにsetLayoutManager()メソッドの引数にStaggeredGridLayoutManagerのインスタンスを設定します。

 

recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.HORIZONTAL));

StaggeredGridLayoutManagerの第1引数には列数を設定します。第2引数にはスクロール方向を決めるint型定数を設定します。

 

StaggeredGridLayoutManager.HORIZONTAL
水平方向にスクロールします。
StaggeredGridLayoutManager.VERTICAL
垂直方向にスクロールします。

2列で水平方向にスクロールするためには、レイアウトマネージャーに以下のように設定します。

 

recyclerView.setLayoutManager(new StaggeredGridLayoutManager(2, StaggeredGridLayoutManager.VERTICAL));

実行すると以下のような画面になります。

 

android_android-recyclerview_05

 

広 告