ListViewの限界(2)
ソースコード記述
次に、ソースコードを記述していきましょう。まずはstrings.xmlです。以下の内容に変更してください。
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">リサイクラービューサンプル</string>
<string name="toolbar_title">Recycle!</string>
</resources>
次はactivity_scroll_list.xmlです。まず、前回のactivity_scroll_article.xmlの完成版をコピーしてください。その上でNestedScrollViewタグを以下のように置き換えてください。
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
~省略~
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView // (1)
android:id="@+id/lv_menu"
android:scrollbars="vertical" // (2)
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
<android.support.design.widget.FloatingActionButton
~省略~
</android.support.design.widget.CoordinatorLayout>
(1)のタグがRecyclerViewタグです。通常のタグと同様の記述が可能ですが、1点注意事項があります。RecyclerViewは縦横双方にスクロールすることができるので、どの方向にスクロールさせるのかを属性として指定する必要があります。それが(2)です。
最後に、ScrollListActivityのonCreate()メソッドに追記しましょう。
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState); // (1)
setContentView(R.layout.activity_scroll_list); // (1)
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setLogo(R.mipmap.ic_launcher);
setSupportActionBar(toolbar);
CollapsingToolbarLayout toolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.toolbarLayout);
toolbarLayout.setTitle(getString(R.string.toolbar_title));
toolbarLayout.setExpandedTitleColor(Color.WHITE);
toolbarLayout.setCollapsedTitleTextColor(Color.LTGRAY);
}
(1)はもともと記述されているコードです。また、追記したコードは前回のScrollArticleActivityのonCreate()内のコードと同一です。
ここまでで、ビルドエラーが出なければアプリを起動してください。以下の画面が表示されます。
RecyclerViewで表示させるデータを設定していないため、アクションバー以下は真っ白になっています。
RecyclerViewの使い方
では、表示させるリストデータを記述していきましょう。こちらはActivityクラスにJavaで記述します。ScrollListActivityのonCreate()メソッドに、先ほどの続きとして以下のコードを記述してください。
protected void onCreate(Bundle savedInstanceState) {
~省略~
RecyclerView lvMenu = (RecyclerView) findViewById(R.id.lv_menu); // (1)
LinearLayoutManager layout = new LinearLayoutManager(ScrollListActivity.this); // (2)
lvMenu.setLayoutManager(layout); // (3)
List<String> menuList = new ArrayList<String>(); // (4)
menuList.add("から揚げ定食"); // (4)
~省略~ // (4)
menuList.add("餃子定食"); // (4)
RecyclerListAdapter adapter = new RecyclerListAdapter(menuList); // (5)
lvMenu.setAdapter(adapter); // (6)
}
RecyclerListAdapterクラスが存在しないため、このままだとコンパイルは通りません。このクラスは後で実装します。
さて、RecyclerViewでデータを表示するには、少なくとも以下2つの手順を行う必要があります。
- レイアウトマネージャーの設定:リスト4の(2)と(3)
- アダプタの設定:リスト4の(5)と(6)
詳細は後述しますが、レイアウトマネージャーとアダプタのどちらについても、設定にはRecyclerViewのメソッドを使用します。そのため、まずは画面上のRecyclerViewを取得します。それが(1)です。
また、アダプタの設定では表示データを使用します。それを作成しているのが(4)です。ここでmenuListに定食名を登録していますが、途中の部分は省略しています。省略部分はダウンロードサンプルを参照するか、好きな定食の登録を記述してください(多く登録する方がスクロール時に分かりやすいのでオススメです)。
レイアウトマネージャー
それでは、レイアウトマネージャーの設定について解説していきます。リサイクラービューはListViewと違い、柔軟な表示方法が可能です。それをつかさどるのがレイアウトマネージャーであり、各アイテムの配置とスクロール時のアイテムの移動を担当しています。標準では以下3つのレイアウトマネージャーが用意されています。また、RecyclerView.LayoutManagerを継承することで、独自のレイアウトマネージャーを作成することも可能です。
LinearLayoutManager
ListView同様に、各アイテムを縦のリストに並べます。今回はこちらを使用します。下図が表示結果のサンプルです(ここでは、各アイテムの境界がはっきり分かるように背景色を付けています)。
GridLayoutManager
各アイテムを格子状に表示します。GridLayoutManagerを適用すると、定食リストは下図のようになります。ここでは縦5列で表示しています。
StaggeredGridLayoutManager
各アイテムをスタッガード格子状に表示します。StaggeredGridLayoutManagerを適用すると、リストは下図の通り表示されます。GridLayoutManagerとの違いがお分かりいただけると思います。
これらのレイアウトマネージャーの使い方は簡単です。まず、newします(リスト4の(2))。そのオブジェクトをRecyclerViewのsetLayoutManager()メソッドの引数として渡すだけです(リスト4の(3))。
なお、new時の引数はレイアウトマネージャーでそれぞれ異なります。LinearLayoutManagerはコンテキストを渡します。その他のレイアウトマネージャーについては、それぞれのAPI仕様書を参照してください。
アダプタ
次に、アダプタの設定について解説します。アダプタはListViewでも登場し、各リストのデータをListViewの各アイテム(リストの各行)内の画面部品に割り当てていくというものでした。ListViewではアダプタクラスとして、例えばArrayAdapterやSimpleAdapterなどの既存のクラスを使用できました。ところがRecyclerViewにはそういったものがないため、独自にアダプタクラスを作る必要があります。今回のサンプルでは、リスト4の(5)で登場するRecyclerListAdapterクラスがそれにあたります。作成さえしてしまえば、そのアダプタクラスをnewし(リスト4の(5))、RecyclerViewのsetAdapter()メソッドの引数として渡すだけで設定可能です(リスト4の(6))。
