53
53

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Androidのリスト操作UIまとめ

Last updated at Posted at 2017-12-13

はじめに

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

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

UI Control

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

おわりに

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

53
53
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
53
53

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?