1. sjnya
Changes in body
Source | HTML | Preview

はじめに

Android その2 Advent Calendar 2017 14日目の記事です!
ここでは、AndroidにおけるリストのUI Controlについてまとめてみたいと思います。
AndroidアプリでRecyclerView等を用いてリストを実装する場合に、UIとして必要かどうか、チェックリスト的に使っていただけたら幸いです :innocent:

この記事は主にMaterial DesignのガイドラインとFlexibleAdapterというRecyclerViewのライブラリを基に書いています。

UI Control

名称 リファレンス概要 GIF
Action ModeAction Mode メニュー | Android Developers 画面最上部にあるバーに、選択されたコンテンツに影響するアクションが表示されます。
複数のアイテムを選択できます。
action_mode.gif
Fast ScrollFast Scroll AbsListView | Android Developers 画面右端のスクロールバーをドラッグすることでインデックスを確認しながら高速でスクロールできます。 fast_scroll.gif
FilterFilter Setting Up the Search Interface | Android Developers 画面最上部にあるバーにキーワードを入力することで、キーワードを含むアイテムが絞り込まれます。 filter.gif
Sticky Header リストのスクロールにヘッダーが追従します。
ヘッダーはアイテムのスクロールに応じて入れ替わります。
sticky_header.gif
Expand/CollapseExpand/Collapse Lists: Controls - Components - Material Design リストを垂直方向に展開および縮小することで、アイテムの表示・非表示を切り替えることができます。 expand.gif
Endless scroll / On load more 最下部までアイテムを読み込んだ際に、自動で続きのアイテムを読み込みます。 endless_scroll.gif
Swipe to RefreshSwipe to Refresh Adding Swipe-to-Refresh To Your App | Android Developers 下方向にスワイプすることでリストの再読み込みを行えます。
読み込み時はプログレスバーが表示されます。
swipe_to_refresh.gif
ReorderReorder Lists: Controls - Components - Material Design アイテム右端のアイコンをドラッグすることアイテムをリスト内の他の場所に移動できます。 reorder.gif
Leave-behindsLeave-behinds Lists: Controls - Components - Material Design 左右にアイテムをスワイプすることで、表示されたアクションを実行できます。
アクションによっては取り消し(Undo)が可能です。
leave_behinds.gif

おわりに

ソースはsjnyag/ListControlDemoで公開しているリポジトリから確認できます。
今回の記事に利用したGIF画像はすべて上記リポジトリのアプリで撮影しました :smiley: