Revisions of "Androidのリスト操作UIまとめ"

+

+# はじめに

+[Android その2 Advent Calendar 2017](https://qiita.com/advent-calendar/2017/android_second) 14日目の記事です！

+ここでは、AndroidにおけるリストのUI Controlについてまとめてみたいと思います。

+AndroidアプリでRecyclerView等を用いてリストを実装する場合に、UIとして必要かどうか、チェックリスト的に使っていただけたら幸いです :innocent:

+

+> この記事は主に[Material Design](https://material.io/guidelines/#)のガイドラインと[FlexibleAdapter](https://github.com/davideas/FlexibleAdapter)というRecyclerViewのライブラリを基に書いています。

+

+# UI Control

+

+| 名称 | リファレンス | 概要 | GIF |

+|-------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------|

+| Action Mode | [メニュー | Android Developers](https://developer.android.com/guide/topics/ui/menus.html#CAB) | 画面最上部にあるバーに、選択されたコンテンツに影響するアクションが表示されます。<br>複数のアイテムを選択できます。 | ![action_mode.gif](https://qiita-image-store.s3.amazonaws.com/0/107434/b61687af-e05c-3616-d7ea-6423aefee285.gif) |

+| Fast Scroll | [AbsListView | Android Developers](https://developer.android.com/reference/android/widget/AbsListView.html#setFastScrollEnabled(boolean)) | 画面右端のスクロールバーをドラッグすることでインデックスを確認しながら高速でスクロールできます。 | ![fast_scroll.gif](https://qiita-image-store.s3.amazonaws.com/0/107434/941bfe27-2ae1-f8d7-b9dc-d6e41d44643e.gif) |

+| Filter | [Setting Up the Search Interface | Android Developers](https://developer.android.com/training/search/setup.html) | 画面最上部にあるバーにキーワードを入力することで、キーワードを含むアイテムが絞り込まれます。 | ![filter.gif](https://qiita-image-store.s3.amazonaws.com/0/107434/7d920a77-c931-1514-2ad7-76ae17456c6b.gif) |

+| Sticky Header | | リストのスクロールにヘッダーが追従します。<br>ヘッダーはアイテムのスクロールに応じて入れ替わります。 | ![sticky_header.gif](https://qiita-image-store.s3.amazonaws.com/0/107434/3e05595e-4ef9-7dee-b986-7e06b4bf79bd.gif) |

+| Expand/Collapse | [Lists: Controls - Components - Material Design](https://material.io/guidelines/components/lists-controls.html#lists-controls-types-of-list-controls) | リストを垂直方向に展開および縮小することで、アイテムの表示・非表示を切り替えることができます。 | ![expand.gif](https://qiita-image-store.s3.amazonaws.com/0/107434/3d9ba6d2-252e-c032-51be-d4a7b0acb57d.gif) |

+| Endless scroll / On load more | | 最下部までアイテムを読み込んだ際に、自動で続きのアイテムを読み込みます。 | ![endless_scroll.gif](https://qiita-image-store.s3.amazonaws.com/0/107434/073b9d1e-f16e-6134-2edf-a073a8d0b137.gif) |

+| Swipe to Refresh | [Adding Swipe-to-Refresh To Your App | Android Developers](https://developer.android.com/training/swipe/add-swipe-interface.html) | 下方向にスワイプすることでリストの再読み込みを行えます。<br>読み込み時はプログレスバーが表示されます。 | ![swipe_to_refresh.gif](https://qiita-image-store.s3.amazonaws.com/0/107434/209b15ef-b231-ae80-17b3-993ee649c684.gif) |

+| Reorder | [Lists: Controls - Components - Material Design](https://material.io/guidelines/components/lists-controls.html#lists-controls-types-of-list-controls) | アイテム右端のアイコンをドラッグすることアイテムをリスト内の他の場所に移動できます。 | ![reorder.gif](https://qiita-image-store.s3.amazonaws.com/0/107434/0f01ed08-934d-3b80-9a49-d26c11b8306b.gif) |

+| Leave-behinds | [Lists: Controls - Components - Material Design](https://material.io/guidelines/components/lists-controls.html#lists-controls-types-of-list-controls) | 左右にアイテムをスワイプすることで、表示されたアクションを実行できます。<br>アクションによっては取り消し（Undo）が可能です。 | ![leave_behinds.gif](https://qiita-image-store.s3.amazonaws.com/0/107434/5e1b98fe-2335-6bed-3ecf-9dbc84f70a5c.gif) |

+

+# おわりに

+

+ソースは[sjnyag/ListControlDemo](https://github.com/sjnyag/ListControlDemo)で公開しているリポジトリから確認できます。

+今回の記事に利用したGIF画像はすべて上記リポジトリのアプリで撮影しました :smiley: