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

RecyclerViewは、従来のListViewをよりレイアウトやアニメーションを自由にカスタマイズすることができるリストです。ここでは、RecyclerViewを使ってリストを表示する方法を説明します。
広 告
目次
- 1. RecyclerViewの概要
- 2. RecyclerView用サポートライブラリを導入する
- 3. 1行リストを表示する
- 4. グリッド状のリストを表示する
- 5. スタッガード格子状のリストを表示する
前提条件
- Android Studioでプロジェクトが作成済であること
- Android2.1(API level 7)以上
動作確認端末
- Google Nexus 5 – 5.0.0 – API21(エミュレータ)
1. RecyclerViewの概要
RecyclerViewは大容量のデータを効率的よく閲覧するためにスクロールするリストのウィジェットです。ユーザ操作やネットワーク状態により動的に項目数を変更させるリストを表示させたいときなどに使います。
RecyclerViewを使用するためには、アダプターとレイアウトマネージャーを設定する必要があります。設定するアダプターはRecyclerView.Adapterを継承したクラスを用います。
設定するレイアウトマネージャーによって、RecyclerViewのレイアウトが変わります。レイアウトには以下の3種類があります。
- LinearLayoutManagerは垂直または水平にスクロールするリストを表示します
- GridLayoutManagerはグリッド上のリストを表示します
- StaggeredGridLayoutManagerはスタッガード格子状のリストを表示します
2. RecyclerView用サポートライブラリを導入する
RecyclerViewを使うためには、まずサポートライブラリをプロジェクトにインポートする必要があります。
サポートライブラリを導入するためには、Android Studioのプロジェクトビューからプロジェクトを選択した状態でマウスを右クリックし、「Open Module Settings」を選択します。次に「Dependencies」タブを選択し、左下の「+」ボタンをクリック、プルダウンから「1.Library Dependency」を選択します。

表示されたリストの中から「recyclerview-v7」を選択し「OK」をクリックすればインポート完了です。
3. 1行リストを表示する
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" />
リストを表示する場合は、リスト1行分のレイアウトを用意する必要があります。ここでは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を使う場合は、レイアウトマネージャーを必ず設定する必要があります。1行リストを表示する場合は、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(); }
表示するリストの行数を返却するメソッドです。
これらを実行すると、以下のような画面になります。

4. グリッド状のリストを表示する
グリッド状のリストを表示する場合は、レイアウトマネージャーとしてGridLayoutManagerを使用します。以下のようにsetLayoutManager()メソッドの引数にGirdLayoutManagerのインスタンスを設定します。
recyclerView.setLayoutManager(new GridLayoutManager(getApplicationContext(),2));
GridLayoutManagerの第2引数にはグリッドを何列にして表示させるかを設定します。上記のコード例だと2列で表示されます。実行すると以下のように表示されます。

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

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));
実行すると以下のような画面になります。
