LOADING, LOADED, ERROR どこに何を表示するか

Slide 1

Slide 1 text

LOADING, LOADED, ERROR どこに何を表示するか Kyash Inc. Yusuke Konishi (@konifar) 1

Slide 2

Slide 2 text

マテリアルデザインのおかげでそれなりの見た目のアプリを楽に作れるようになった 2

Slide 3

Slide 3 text

にもかかわらず 3

Slide 4

Slide 4 text

統一感のないアプリができてしまう 4

Slide 5

Slide 5 text

解決策 5

Slide 6

Slide 6 text

マテリアルデザインに沿った細かいガイドラインを作る 6

Slide 7

Slide 7 text

わかる、けど難しい 7

Slide 8

Slide 8 text

ガイドラインの中でも整理しにくい部分がある 8

Slide 9

Slide 9 text

整理しにくい = パターンが複雑 = デザイナーさんも想定しにくい 9

Slide 10

Slide 10 text

その代表格通信とユーザーへの通知 10

Slide 11

Slide 11 text

今日話すこと LOADING, LOADED, ERROR のとき、どこに何を表示するか 11

Slide 12

Slide 12 text

分類 1. データの取得 => 比較的整理しやすい 2. データの更新 => なやんでる 12

Slide 13

Slide 13 text

データの取得 13

Slide 14

Slide 14 text

大まかな分類 1. 画面全体のロード 2. 画面の一部のロード 3. 追加のロード Pull to Refresh リストの追加読み込み 14

Slide 15

Slide 15 text

1. 画面全体のロード 15

Slide 16

Slide 16 text

1. 画面全体のロードどこに画面の真ん中何をデフォルトのProgressBar 16

Slide 17

Slide 17 text

LoadingAndErrorView CustomView とDataBinding で共通化 loadState にenum を渡すといい感じに表示 17

Slide 18

Slide 18 text

画面全体のローディング表示がベストなのか？画面全体のロードってわりとストレスたまる部分的にロードできないのか？ 18

Slide 19

Slide 19 text

2. 画面の一部のロードロードする部分ごとにplaceholder 置いて部分的にローディングを表示する 19

Slide 20

Slide 20 text

考えること多いデータがなかった時の表示の切り替え一部エラーだった時の表示ロードの待ち合わせとView の切り替えロードの結果、View がガクつかないためのwidth、 height、アニメーションの調整 20

Slide 21

Slide 21 text

開発効率とのトレードオフ個人的にはデザインガイドラインには入れない方がいいと思うどうしてもこだわりたい大事な画面は特別扱いで対応する LOADING 中のView の表示については、https://github.com/ethanhua/Skeleton のようなライブラリである程度楽になるかもしれない 21

Slide 22

Slide 22 text

3-1. Pull to Refresh 22

Slide 23

Slide 23 text

3-1. Pull to Refresh どこに画面の上部何をデフォルトのSwipeRefreshLayout 23

Slide 24

Slide 24 text

DataBinding を使った実装 fun onRefresh() { swipeRefreshing.set(true) refreshAll(true) } 24

Slide 25

Slide 25 text

3-2. リストの追加読み込み 25

Slide 26

Slide 26 text

3-2. リストの追加読み込みどこにリストの下部何をデフォルトのProgressBar 26

Slide 27

Slide 27 text

DataBinding を使った実装 @BindingAdapter(value = ["onScrolled", "onScrollTop", "onScrollE fun RecyclerView.setOnScrollEnd( ... onScrollEnd: RecyclerViewExt.OnScrollEnd? ) { addOnScrollListener(object : RecyclerView.OnScrollListener() ... override fun onScrolled(recyclerView: RecyclerView?, dx: onScrolled?.onScrolled(recyclerView, dx, dy) val llm = layoutManager as? LinearLayoutManager ... // BOTTOM llm?.let { val visibleItemCount = it.childCount val totalItemCount = it.itemCount val pastVisibleItems = it.findFirstVisibleItemPo if (pastVisibleItems + visibleItemCount >= total onScrollEnd?.onScrollEnd() 27

Slide 28

Slide 28 text

DataBinding を使った実装 ViewModel で処理を書くだけ fun onScrollEnd() { if (hasMore.get() && !loadingMore) { loadingMore = true refreshData() } } 28

Slide 29

Slide 29 text

データの更新 29

Slide 30

Slide 30 text

整理のポイント更新が終わる前にユーザーに操作をさせてよいかどうか 30

Slide 31

Slide 31 text

Kyash の場合『送金、請求、チャージ』 => 決済などお金にかかわる部分なので、LOADING 中は操作できないように画面をロックしたい『プロフィール、設定の変更、メッセージの送信』 => 更新できなかったとしても大きな問題ではないので、LOADING 中でも操作できるようにしたい 31

Slide 32

Slide 32 text

送金時（画面全体） 32

Slide 33

Slide 33 text

送金時（画面全体） ProgressDialog を使っていたが今日やめた透明 or 半透明なFragment にProgressBar を載せて表示するのがよいかも送金、請求は重要なアクションの一つなので、ガイドライン外でこだわってもいいかもしれないガイドラインはあくまで基本的な思想に留めたい 33

Slide 34

Slide 34 text

プロフィール画像の変更画像の更新は時間がかかることがある UPLOADING の状態を表示しつつ、Noti cation で進捗を表示するのがよさそう 34

Slide 35

Slide 35 text

設定の変更何も表示しないのがよさそうダメだった時にやり直すためのSnackbar を表示する 35

Slide 36

Slide 36 text

メッセージの送信送信したメッセージを送信中としてすぐに表示する送信し終わったらView を更新する表示用のモデルに isTemporary みたいなフラグを持たせて表示を切り替えるのがよさそう 36

Slide 37

Slide 37 text

まとめ 37

Slide 38

Slide 38 text

データの取得は画面全体のローディングをどうするか以外は簡単そう 38

Slide 39

Slide 39 text

データの更新はとにかく悩ましい 39

Slide 40

Slide 40 text

モデルの実際の更新と View の表示が一致しないことが起こりそうなので表示用のモデルを作っておくのがよさそう 40

Slide 41

Slide 41 text

どうしようか考え中なので懇親会で教えてください konifar kobakei 41

Slide 42

Slide 42 text

Thanks! https://material.io/guidelines/components/progre ss-activity.html https://goodpatch.com/blog/progress-indicator/ https://github.com/ethanhua/Skeleton 42