Youtube like BottomNavigation

Transcript

1. Hiroyuki Mori @moridroid BottomNavigationView for humankind
2. ↓This
3. making a new app
4. making a new app - multi-module project
5. making a new app - multi-module project - Jetpack Navigation
6. making a new app - multi-module project - Jetpack Navigation - BottomNavigationView
7. making a new app - multi-module project - Jetpack Navigation - BottomNavigationView →
8. making a new app - multi-module project - Jetpack Navigation - BottomNavigationView →
9. No support for Multiple Backstack
10. https://bit.ly/3wXjGLy
11. Click
13. Click
15. Click QUIZ： When the Home menu is clicked, which screen is displayed? 1. Welcome 2. About
17. disappear go down
18. No!
19. Behavior Changed support multiple backstack from Fragment 1.4.0-alpha01 NavigationUI 2.4.0-alpha01
20. Just update dependencies
21. This isn’t nice
22. Click
23. Click
24. Click
26. This isn’t nice
27. This isn’t nice
28. QUIZ： If you click the back key, which screen is displayed? 1. Welcome 2. About Click
29. QUIZ： If you click the back key, which screen is displayed? 1. Welcome 2. About Click ？
30. QUIZ： If you click the back key, which screen is displayed? 1. Welcome 2. About Click ✕
32. Click
34. How Multiple backstack works
35. Backstack　　 SavedState　　
36. Backstack　　 SavedState　　 Click
37. Backstack　　 SavedState　　 menu A　 Save Backstack　　 SavedState　　 Click
38. Backstack　　 SavedState　　 menu A　 Click
39. Backstack　　 SavedState　　 menu B　 menu A　 Restore Save Click
40. Backstack　　 SavedState　　 menu A　 menu B　 ← When the back key is pressed ← Can’t decide 　which should be restored
41. Backstack　　 SavedState　　 menu A　 menu B　 ← New Instance Backstack　　 SavedState　　 menu A　 menu B　
42. Backstack　　 SavedState　　 menu A　 menu B　 menu A　 menu B　 Click
43. menu B　 menu A　 Backstack　　 SavedState　　 menu B　 Backstack　　 SavedState　　
44. graph A1 B1 C1 D1 B2 B3 C2 C3 D2 D3 C4 C5
45. graph A1 B1 C1 D1 B2 B3 C2 C3 D2 D3 C4 C5
46. graph A1 B1 C1 D1 B2 B3 C2 C3 D2 D3 C4 C5
47. graph A1 B1 C1 D1 B2 B3 C2 C3 D2 D3 C4 C5
48. graph A1 B1 C1 D1 B2 B3 C2 C3 D2 D3 C4 C5
49. graph A1 B1 C1 D1 B2 B3 C2 C3 D2 D3 C4 C5
50. What the ideal Bottom Navigation should be
53. C1
54. C1 C2
55. C1 C2 C3
56. C1 C2 C3 D1 Click menu D
57. C1 C2 C3 D1 D2 Click menu D
58. C1 C2 C3 D1 D2 Click menu D Click menu C
59. C1 C2 C3 D1 D2 Click menu D Click menu C Then, the back key will navigate… ① ② ③ ④ ⑤ ⑥ C3 C3 C2 D2 D1 C3 C2 C1 C1 D2 D1 ⑥ ⑤ ④ ③ ② ① ② ③ ① ⑤ ④
60. How to implement Backstack management
61. https://bit.ly/3zdDxrn
62. First of all: Reorderable Stack
63. class NavStack @Inject constructor(){ data class NavRecord(val screenId: Int, val menuId: Int) private val selectedMenu = MutableStateFlow(R.id.none) fun push(screenId: Int, menuId: Int) { ... } fun pop(): NavRecord? { ... } fun peekAt(index: Int) : NavRecord? { ... } val size: Int get() { … } fun findByMenuId(menuId: Int): List<NavRecord> { ... } fun moveToTop(menuId: Int) { ... } fun removeAll(menuId: Int) { ... } }
64. • Navigate • Switch menu • Go Back
65. Navigate Switch menu Go Back if (currentMenuId == nextMenuId) { stack.push(screenId, currentMenuId) fragmentManager.replace(currentMenuId, nextScreen.clazz, arguments) } else { stack.moveToTop(nextMenuId) stack.push(screenId, nextMenuId) fragmentManager.saveBackStack(currentMenuId.toString()) fragmentManager.restoreBackStack(nextMenuId.toString()) fragmentManager.replace(nextMenuId, nextScreen.clazz, arguments) }
66. Navigate case 1: within the same menu if (currentMenuId == nextMenuId) { stack.push(screenId, currentMenuId) fragmentManager.replace(currentMenuId, nextScreen.clazz, arguments) } else { stack.moveToTop(nextMenuId) stack.push(screenId, nextMenuId) fragmentManager.saveBackStack(currentMenuId.toString()) fragmentManager.restoreBackStack(nextMenuId.toString()) fragmentManager.replace(nextMenuId, nextScreen.clazz, arguments) }
67. if (currentMenuId == nextMenuId) { stack.push(screenId, currentMenuId) fragmentManager.replace(currentMenuId, nextScreen.clazz, arguments) } else { stack.moveToTop(nextMenuId) stack.push(screenId, nextMenuId) fragmentManager.saveBackStack(currentMenuId.toString()) fragmentManager.restoreBackStack(nextMenuId.toString()) fragmentManager.replace(nextMenuId, nextScreen.clazz, arguments) } Navigate case 2: across menus
68. Navigate case 1: within the same menu if (currentMenuId == nextMenuId) { stack.push(screenId, currentMenuId) fragmentManager.replace(currentMenuId, nextScreen.clazz, arguments) } else { stack.moveToTop(nextMenuId) stack.push(screenId, nextMenuId) fragmentManager.saveBackStack(currentMenuId.toString()) fragmentManager.restoreBackStack(nextMenuId.toString()) fragmentManager.replace(nextMenuId, nextScreen.clazz, arguments) }
69. Navigate case 1: within the same menu if (currentMenuId == nextMenuId) { stack.push(screenId, currentMenuId) fragmentManager.replace(currentMenuId, nextScreen.clazz, arguments) } else { stack.moveToTop(nextMenuId) stack.push(screenId, nextMenuId) fragmentManager.saveBackStack(currentMenuId.toString()) fragmentManager.restoreBackStack(nextMenuId.toString()) fragmentManager.replace(nextMenuId, nextScreen.clazz, arguments) }
70. Navigate case 1: within the same menu if (currentMenuId == nextMenuId) { stack.push(screenId, currentMenuId) fragmentManager.replace(currentMenuId, nextScreen.clazz, arguments) } else { stack.moveToTop(nextMenuId) stack.push(screenId, nextMenuId) fragmentManager.saveBackStack(currentMenuId.toString()) fragmentManager.restoreBackStack(nextMenuId.toString()) fragmentManager.replace(nextMenuId, nextScreen.clazz, arguments) } fragmentManager.commit { setReorderingAllowed(true) replace(requireNotNull(containerId), clazz.newInstance().apply { arguments = args }) addToBackStack(menuId.toString()) }
71. Navigate case 1: within the same menu if (currentMenuId == nextMenuId) { stack.push(screenId, currentMenuId) fragmentManager.replace(currentMenuId, nextScreen.clazz, arguments) } else { stack.moveToTop(nextMenuId) stack.push(screenId, nextMenuId) fragmentManager.saveBackStack(currentMenuId.toString()) fragmentManager.restoreBackStack(nextMenuId.toString()) fragmentManager.replace(nextMenuId, nextScreen.clazz, arguments) } fragmentManager.commit { setReorderingAllowed(true) replace(requireNotNull(containerId), clazz.newInstance().apply { arguments = args }) addToBackStack(menuId.toString()) }
72. if (currentMenuId == nextMenuId) { stack.push(screenId, currentMenuId) fragmentManager.replace(currentMenuId, nextScreen.clazz, arguments) } else { stack.moveToTop(nextMenuId) stack.push(screenId, nextMenuId) fragmentManager.saveBackStack(currentMenuId.toString()) fragmentManager.restoreBackStack(nextMenuId.toString()) fragmentManager.replace(nextMenuId, nextScreen.clazz, arguments) } Navigate case 2: across menus
73. if (currentMenuId == nextMenuId) { stack.push(screenId, currentMenuId) fragmentManager.replace(currentMenuId, nextScreen.clazz, arguments) } else { stack.moveToTop(nextMenuId) stack.push(screenId, nextMenuId) fragmentManager.saveBackStack(currentMenuId.toString()) fragmentManager.restoreBackStack(nextMenuId.toString()) fragmentManager.replace(nextMenuId, nextScreen.clazz, arguments) } Navigate case 2: across menus
74. if (currentMenuId == nextMenuId) { stack.push(screenId, currentMenuId) fragmentManager.replace(currentMenuId, nextScreen.clazz, arguments) } else { stack.moveToTop(nextMenuId) stack.push(screenId, nextMenuId) fragmentManager.saveBackStack(currentMenuId.toString()) fragmentManager.restoreBackStack(nextMenuId.toString()) fragmentManager.replace(nextMenuId, nextScreen.clazz, arguments) } Navigate case 2: across menus
75. if (currentMenuId == nextMenuId) { stack.push(screenId, currentMenuId) fragmentManager.replace(currentMenuId, nextScreen.clazz, arguments) } else { stack.moveToTop(nextMenuId) stack.push(screenId, nextMenuId) fragmentManager.saveBackStack(currentMenuId.toString()) fragmentManager.restoreBackStack(nextMenuId.toString()) fragmentManager.replace(nextMenuId, nextScreen.clazz, arguments) } Navigate case 2: across menus
76. Navigate Switch menu Go Back when { currentMenu.menuId == nextMenu.menuId -> { stack.removeAll(currentMenu.menuId) stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.clearBackStack(nextMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } stack.findByMenuId(nextMenu.menuId).isEmpty() -> { stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } else -> { stack.moveToTop(nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.restoreBackStack(nextMenu.menuId.toString()) } }
77. Switch Menu case 1: re-select menu when { currentMenu.menuId == nextMenu.menuId -> { stack.removeAll(currentMenu.menuId) stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.clearBackStack(nextMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } stack.findByMenuId(nextMenu.menuId).isEmpty() -> { stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } else -> { stack.moveToTop(nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.restoreBackStack(nextMenu.menuId.toString()) } }
78. Switch Menu case 2: has no records when { currentMenu.menuId == nextMenu.menuId -> { stack.removeAll(currentMenu.menuId) stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.clearBackStack(nextMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } stack.findByMenuId(nextMenu.menuId).isEmpty() -> { stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } else -> { stack.moveToTop(nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.restoreBackStack(nextMenu.menuId.toString()) } }
79. Switch Menu case 3: click the same menu when { currentMenu.menuId == nextMenu.menuId -> { stack.removeAll(currentMenu.menuId) stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.clearBackStack(nextMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } stack.findByMenuId(nextMenu.menuId).isEmpty() -> { stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } else -> { stack.moveToTop(nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.restoreBackStack(nextMenu.menuId.toString()) } }
80. Switch Menu case 1: re-select menu when { currentMenu.menuId == nextMenu.menuId -> { stack.removeAll(currentMenu.menuId) stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.clearBackStack(nextMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } stack.findByMenuId(nextMenu.menuId).isEmpty() -> { stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } else -> { stack.moveToTop(nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.restoreBackStack(nextMenu.menuId.toString()) } }
81. Switch Menu case 1: re-select menu when { currentMenu.menuId == nextMenu.menuId -> { stack.removeAll(currentMenu.menuId) stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.clearBackStack(nextMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } stack.findByMenuId(nextMenu.menuId).isEmpty() -> { stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } else -> { stack.moveToTop(nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.restoreBackStack(nextMenu.menuId.toString()) } }
82. Switch Menu case 1: re-select menu when { currentMenu.menuId == nextMenu.menuId -> { stack.removeAll(currentMenu.menuId) stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.clearBackStack(nextMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } stack.findByMenuId(nextMenu.menuId).isEmpty() -> { stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } else -> { stack.moveToTop(nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.restoreBackStack(nextMenu.menuId.toString()) } }
83. Switch Menu case 2: has no records when { currentMenu.menuId == nextMenu.menuId -> { stack.removeAll(currentMenu.menuId) stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.clearBackStack(nextMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } stack.findByMenuId(nextMenu.menuId).isEmpty() -> { stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } else -> { stack.moveToTop(nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.restoreBackStack(nextMenu.menuId.toString()) } }
84. Switch Menu case 2: has no records when { currentMenu.menuId == nextMenu.menuId -> { stack.removeAll(currentMenu.menuId) stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.clearBackStack(nextMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } stack.findByMenuId(nextMenu.menuId).isEmpty() -> { stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } else -> { stack.moveToTop(nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.restoreBackStack(nextMenu.menuId.toString()) } }
85. Switch Menu case 2: has no records when { currentMenu.menuId == nextMenu.menuId -> { stack.removeAll(currentMenu.menuId) stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.clearBackStack(nextMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } stack.findByMenuId(nextMenu.menuId).isEmpty() -> { stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } else -> { stack.moveToTop(nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.restoreBackStack(nextMenu.menuId.toString()) } }
86. Switch Menu case 3: click the same menu when { currentMenu.menuId == nextMenu.menuId -> { stack.removeAll(currentMenu.menuId) stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.clearBackStack(nextMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } stack.findByMenuId(nextMenu.menuId).isEmpty() -> { stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } else -> { stack.moveToTop(nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.restoreBackStack(nextMenu.menuId.toString()) } }
87. Switch Menu case 3: click the same menu when { currentMenu.menuId == nextMenu.menuId -> { stack.removeAll(currentMenu.menuId) stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.clearBackStack(nextMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } stack.findByMenuId(nextMenu.menuId).isEmpty() -> { stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } else -> { stack.moveToTop(nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.restoreBackStack(nextMenu.menuId.toString()) } }
88. Switch Menu case 3: click the same menu when { currentMenu.menuId == nextMenu.menuId -> { stack.removeAll(currentMenu.menuId) stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.clearBackStack(nextMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } stack.findByMenuId(nextMenu.menuId).isEmpty() -> { stack.push(startScreen.screenId, nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.replace(nextMenu.menuId, startScreen.clazz) } else -> { stack.moveToTop(nextMenu.menuId) fragmentManager.saveBackStack(currentMenu.menuId.toString()) fragmentManager.restoreBackStack(nextMenu.menuId.toString()) } }
89. Navigate Switch menu Go Back when { destRecord == null && currentMenuId == graph.startMenuId -> { activity.finish() } destRecord == null -> { stack.push(startScreen.screenId, graph.startMenuId) fragmentManager.replace(graph.startMenuId, startScreen.clazz) } destRecord.menuId == currentMenuId -> { stack.pop() fragmentManager.popBackStack() } else -> { stack.pop() fragmentManager.popBackStack() fragmentManager.restoreBackStack(destRecord.menuId.toString()) } }
90. Go Back case 1: can’t back at default menu when { destRecord == null && currentMenuId == graph.startMenuId -> { activity.finish() } destRecord == null -> { stack.push(startScreen.screenId, graph.startMenuId) fragmentManager.replace(graph.startMenuId, startScreen.clazz) } destRecord.menuId == currentMenuId -> { stack.pop() fragmentManager.popBackStack() } else -> { stack.pop() fragmentManager.popBackStack() fragmentManager.restoreBackStack(destRecord.menuId.toString()) } }
91. Go Back case 2: can’t back at not default menu when { destRecord == null && currentMenuId == graph.startMenuId -> { activity.finish() } destRecord == null -> { stack.push(startScreen.screenId, graph.startMenuId) fragmentManager.replace(graph.startMenuId, startScreen.clazz) } destRecord.menuId == currentMenuId -> { stack.pop() fragmentManager.popBackStack() } else -> { stack.pop() fragmentManager.popBackStack() fragmentManager.restoreBackStack(destRecord.menuId.toString()) } }
92. Go Back case 3: navigate back inside the same menu when { destRecord == null && currentMenuId == graph.startMenuId -> { activity.finish() } destRecord == null -> { stack.push(startScreen.screenId, graph.startMenuId) fragmentManager.replace(graph.startMenuId, startScreen.clazz) } destRecord.menuId == currentMenuId -> { stack.pop() fragmentManager.popBackStack() } else -> { stack.pop() fragmentManager.popBackStack() fragmentManager.restoreBackStack(destRecord.menuId.toString()) } }
93. Go Back case 4: navigate back across menus when { destRecord == null && currentMenuId == graph.startMenuId -> { activity.finish() } destRecord == null -> { stack.push(startScreen.screenId, graph.startMenuId) fragmentManager.replace(graph.startMenuId, startScreen.clazz) } destRecord.menuId == currentMenuId -> { stack.pop() fragmentManager.popBackStack() } else -> { stack.pop() fragmentManager.popBackStack() fragmentManager.restoreBackStack(destRecord.menuId.toString()) } }
94. in Summary: - Fragment supports Multiple Backstack - BottomNavigationView works weirdly - You can make it by yourself - I don’t want to make it
95. in Summary: - Fragment supports Multiple Backstack - BottomNavigationView works weirdly - You can make it by yourself - I don’t want to make it
96. in Summary: - Fragment supports Multiple Backstack - BottomNavigationView works weirdly - You can make it by yourself - I don’t want to make it
97. in Summary: - Fragment supports Multiple Backstack - BottomNavigationView works weirdly - You can make it by yourself - I don’t want to make it
98. in Summary: - Fragment supports Multiple Backstack - BottomNavigationView works weirdly - You can make it by yourself - I don’t want to make it
99. Hiroyuki Mori @moridroid Thank you