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

https://nohana.connpass.com/event/80530/
で話した資料です。

Transcript

1. LOADING, LOADED, ERROR どこに何を表示するか Kyash Inc. Yusuke Konishi (@konifar) 1
2. マテリアルデザインのおかげで それなりの見た目のアプリを 楽に作れるようになった 2
3. にもかかわらず 3
4. 統一感のないアプリが できてしまう 4
5. 解決策 5
6. マテリアルデザインに沿った 細かいガイドラインを作る 6
7. わかる、 けど難しい 7
8. ガイドラインの中でも 整理しにくい部分がある 8
9. 整理しにくい = パター ンが複雑 = デザイナー さんも想定しにくい 9
10. その代表格 通信とユー ザー への通知 10
11. 今日話すこと LOADING, LOADED, ERROR のとき、 どこに何を表示するか 11
12. 分類 1. デー タの取得 => 比較的整理しやすい 2. デー タの更新 => なやんでる 12
13. デー タの取得 13
14. 大まかな分類 1. 画面全体のロー ド 2. 画面の一部のロー ド 3. 追加のロー ド Pull to Refresh リストの追加読み込み 14
15. 1. 画面全体のロー ド 15
16. 1. 画面全体のロー ド どこに 画面の真ん中 何を デフォルトのProgressBar <ProgressBar android:id="@+id/loading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> 16
17. LoadingAndErrorView CustomView とDataBinding で共通化 loadState にenum を渡すといい感じに表示 <co.kyash.ui.view.LoadingAndErrorView android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/toolbar" app:loadState="@{viewModel.state}" app:onRetryClick="@{viewModel::onReloadClick}" /> 17
18. 画面全体のロー ディング表示 がベストなのか？ 画面全体のロー ドってわりとストレスたまる 部分的にロー ドできないのか？ 18
19. 2. 画面の一部のロー ド ロー ドする部分ごとにplaceholder 置いて部分的にロ ー ディングを表示する 19
20. 考えること多い デー タがなかった時の表示の切り替え 一部エラー だった時の表示 ロー ドの待ち合わせとView の切り替え ロー ドの結果、View がガクつかないためのwidth、 height、 アニメー ションの調整 20
21. 開発効率とのトレー ドオフ 個人的にはデザインガイドラインには入れない方 がいいと思う どうしてもこだわりたい大事な画面は特別扱いで 対応する LOADING 中のView の表示について は、https://github.com/ethanhua/Skeleton のよ うなライブラリである程度楽になるかもしれない 21
22. 3-1. Pull to Refresh 22
23. 3-1. Pull to Refresh どこに 画面の上部 何を デフォルトのSwipeRefreshLayout 23
24. DataBinding を使った実装 <android.support.v4.widget.SwipeRefreshLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/toolbar" app:onRefreshListener="@{viewModel::onRefresh}" app:refreshing="@{viewModel.swipeRefreshing}"> fun onRefresh() { swipeRefreshing.set(true) refreshAll(true) } 24
25. 3-2. リストの追加読み込み 25
26. 3-2. リストの追加読み込み どこに リストの下部 何を デフォルトのProgressBar 26
27. 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
28. DataBinding を使った実装 <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" app:onScrollEnd="@{viewModel::onScrollEnd}" /> ViewModel で処理を書くだけ fun onScrollEnd() { if (hasMore.get() && !loadingMore) { loadingMore = true refreshData() } } 28
29. デー タの更新 29
30. 整理のポイント 更新が終わる前にユー ザー に 操作をさせてよいかどうか 30
31. Kyash の場合 『 送金、 請求、 チャー ジ』 => 決済などお金にかかわる部分なので、LOADING 中 は操作できないように画面をロックしたい 『 プロフィー ル、 設定の変更、 メッセー ジの送信』 => 更新できなかったとしても大きな問題ではないの で、LOADING 中でも操作できるようにしたい 31
32. 送金時（ 画面全体） 32
33. 送金時（ 画面全体） ProgressDialog を使っていたが今日やめた 透明 or 半透明なFragment にProgressBar を載せて 表示するのがよいかも 送金、 請求は重要なアクションの一つなので、 ガ イドライン外でこだわってもいいかもしれない ガイドラインはあくまで基本的な思想に留めたい 33
34. プロフィー ル画像の変更 画像の更新は時間がかかることがある UPLOADING の状態を表示しつつ、Noti cation で 進捗を表示するのがよさそう 34
35. 設定の変更 何も表示しないのがよさそう ダメだった時にやり直すためのSnackbar を表示す る 35
36. メッセー ジの送信 送信したメッセー ジを送信中としてすぐに表示す る 送信し終わったらView を更新する 表示用のモデルに isTemporary みたいなフラグを持 たせて表示を切り替えるのがよさそう 36
37. まとめ 37
38. デー タの取得は 画面全体のロー ディングを どうするか以外は簡単そう 38
39. デー タの更新は とにかく悩ましい 39
40. モデルの実際の更新と View の表示が一致しないこと が起こりそうなので 表示用のモデルを作っておく のがよさそう 40
41. どうしようか考え中なので 懇親会で教えてください konifar kobakei 41
42. Thanks! https://material.io/guidelines/components/progre ss-activity.html https://goodpatch.com/blog/progress-indicator/ https://github.com/ethanhua/Skeleton 42