Slide 1
Slide 1 text
Navigation Component
を実践導⼊した際の感動、
便利さ、そしてつまづき
Yuzuru Nakashima, Junichiro Suyama
2020/02/21 13:00-13:40 DroidKaigi2020
1
Slide 2
Slide 2 text
⾃⼰紹介
2
Slide 3
Slide 3 text
3
⾃⼰紹介
名前 ：Junichiro Suyama
GitHubID：@JASON13F
TwitterID：@JasonAndroidDev
趣味 ：ぷよぷよ
(⼤会優勝を経験)
名前 ：Yuzuru Nakashima
GitHubID：@nacatl
TwitterID：@affinity_robots
趣味 ：Magic The Gathering
Slide 4
Slide 4 text
会社紹介
4
Slide 5
Slide 5 text
5
「毎⽇の勉強を習慣にできない」悩みを解決
勉強したら、スマホで記録し、グラフで可視化、勉強仲間で
励まし合うことで、勉強の習慣化を⽀援
累計会員数：500万⼈達成
⼤学受験⽣の約40%が会員
アプリレビュー平均4.5以上
Google Playベストアプリ(2015, 2016)、
⽇本e-Learning⼤賞（最優秀賞）など受賞多数。
Slide 6
Slide 6 text
⽬次
• Navigationの説明
• Navigationとは
• 基本的な遷移の実装について
• NavigationUI
• データ受け渡し
• 導⼊事例紹介
• 導⼊⽅針
• 実際の導⼊事例(隅⼭)
• 実際の導⼊事例(中島)
6
Slide 7
Slide 7 text
伝えたいこと
• Navigationで画⾯遷移が簡単になったこと
• ⼤規模アプリでもNavigationは導⼊できること
• Navigationの各種便利機能の使いどころ
7
Slide 8
Slide 8 text
伝えたいこと
Navigation導⼊の切っ掛けになれば嬉しい
8
Slide 9
Slide 9 text
Navigationとは
9
Slide 10
Slide 10 text
Navigationとは
10
Slide 11
Slide 11 text
Navigationとは
• Fragment遷移を簡単に実装可能
• Navigation EditorでGUI操作
11
Slide 12
Slide 12 text
使うことのメリット
12
今までの遷移
(FragmentManager)
これからの遷移
(Navigation)
遷移の実装
❌
遷移をコード上で管理できない
⭕
GUIで遷移を実装可能
バックスタック考慮
❌
Fragmentスタック状態を
コード上で管理
⭕
Fragmentスタック状態を
考慮しなくていい
データ受け渡し
❌
型考慮、nullable考慮
⭕
型安全、null安全
Slide 13
Slide 13 text
• Navigation ライブラリ
• Navigation Editor
• Navigation UI
Navigationの構成要素
13
Slide 14
Slide 14 text
基本的な遷移の実装について
14
Slide 15
Slide 15 text
既存のFragment遷移
• Fragment遷移図の把握が⾯倒
• 遷移時にstackの処理が必要
• アニメーション指定
• ActionBar.setTitle
15
Slide 16
Slide 16 text
// ભҠ࣌
supportFragmentManager.commit {
add(
R.id.fragment_container,
~~Fragment.newInstance()
)
addToBackStack(null)
setCustomAnimations(
R.anim.slide_in_right,
R.anim.slide_out_left,
R.anim.slide_in_left,
R.anim.slide_out_right
)
}
supportActionBar?.setTitle(~~)
16
Slide 17
Slide 17 text
// ભҠ࣌
supportFragmentManager.commit {
add(
R.id.fragment_container,
~~Fragment.newInstance()
)
addToBackStack(null)
setCustomAnimations(
R.anim.slide_in_right,
R.anim.slide_out_left,
R.anim.slide_in_left,
R.anim.slide_out_right
)
}
supportActionBar?.setTitle(~~)
17
Slide 18
Slide 18 text
// ભҠ࣌
supportFragmentManager.commit {
add(
R.id.fragment_container,
~~Fragment.newInstance()
)
addToBackStack(null)
setCustomAnimations(
R.anim.slide_in_right,
R.anim.slide_out_left,
R.anim.slide_in_left,
R.anim.slide_out_right
)
}
supportActionBar?.setTitle(~~)
18
Slide 19
Slide 19 text
// ભҠ࣌
supportFragmentManager.commit {
add(
R.id.fragment_container,
~~Fragment.newInstance()
)
addToBackStack(null)
setCustomAnimations(
R.anim.slide_in_right,
R.anim.slide_out_left,
R.anim.slide_in_left,
R.anim.slide_out_right
)
}
supportActionBar?.setTitle(~~)
19
Slide 20
Slide 20 text
// ભҠ࣌
supportFragmentManager.commit {
add(
R.id.fragment_container,
~~Fragment.newInstance()
)
addToBackStack(null)
setCustomAnimations(
R.anim.slide_in_right,
R.anim.slide_out_left,
R.anim.slide_in_left,
R.anim.slide_out_right
)
}
supportActionBar?.setTitle(~~)
20
Slide 21
Slide 21 text
NavigationのFragment遷移
• NavController + xml(NavGraph)
• NavGraphで視覚的に遷移図を管理
21
Slide 22
Slide 22 text
NavigationのFragment遷移
22
Slide 23
Slide 23 text
NavigationのFragment遷移
23
Slide 24
Slide 24 text
画⾯遷移をGUIで俯瞰できるのすごい！
24
NavigationのFragment遷移
Slide 25
Slide 25 text
// ભҠॲཧ
val navController = findNavController(R.id.nav_host_fragment)
navController.navigate(
HogeFragmentDirections.actionHogeToFuga()
)
25
Slide 26
Slide 26 text
// navGraphͷaction
Slide 27
Slide 27 text
// navGraphͷaction
Slide 28
Slide 28 text
// navGraphͷaction
Slide 29
Slide 29 text
// navGraphͷaction
Slide 30
Slide 30 text
NavigationUI
30
Slide 31
Slide 31 text
NavigationUIとは
UIコンポーネントと連携させて更新可能
• Top App Bars(ActionBar, Toolbar)
• Navigation Drawer
• Bottom Navigation
31
Slide 32
Slide 32 text
NavigationUIとは
• Activity.setupActionBarWithNavController
• Toolbar.setupWithNavController
• NavigationView.setupWithNavController
32
Slide 33
Slide 33 text
データ受け渡し
33
Slide 34
Slide 34 text
Argumentの設定
データ受け渡しもNavGraphで実装可能
• プリミティブ型
• Parcelable
• Serializable
• Enumなど
34
Slide 35
Slide 35 text
35
// nav_graph.xml
// ࣗಈੜ
Slide 36
Slide 36 text
SafeArgsの利⽤
SafeArgsのプラグインを適⽤することで
DirectionsクラスとArgsクラスが⾃動⽣成
• Directions：遷移する関数の引数でArgumentを
型安全に設定可能
• Args：by navArgs()で型安全に取得可能
36
Slide 37
Slide 37 text
// DirectionsΫϥε(ࣗಈੜ)
class FirstFragmentDirections private constructor() {
private data class ActionFirstToSecond(
val hogeName: String = "hoge"
) : NavDirections {
override fun getActionId(): Int = R.id.action_first_to_second
override fun getArguments(): Bundle {
val result = Bundle()
result.putString("hogeName", this.hogeName)
return result
}
}
companion object {
fun actionFirstToSecond(hogeName: String = "hoge"): NavDirections =
ActionFirstToSecond(hogeName)
}
}
37
Slide 38
Slide 38 text
// DirectionsΫϥε(ࣗಈੜ)
class FirstFragmentDirections private constructor() {
private data class ActionFirstToSecond(
val hogeName: String = "hoge"
) : NavDirections {
override fun getActionId(): Int = R.id.action_first_to_second
override fun getArguments(): Bundle {
val result = Bundle()
result.putString("hogeName", this.hogeName)
return result
}
}
companion object {
fun actionFirstToSecond(hogeName: String = "hoge"): NavDirections =
ActionFirstToSecond(hogeName)
}
}
38
Slide 39
Slide 39 text
// ArgsΫϥε(ࣗಈੜ)
data class SecondFragmentArgs(val hogeName: String = "hoge") : NavArgs {
fun toBundle(): Bundle {
val result = Bundle()
result.putString("hogeName", this.hogeName)
return result
}
companion object {
@JvmStatic
fun fromBundle(bundle: Bundle): SecondFragmentArgs {
bundle.setClassLoader(SecondFragmentArgs::class.java.classLoader)
val __hogeName : String?
If (bundle.containsKey("hogeName")) {
__hogeName = bundle.getString("hogeName")
if (__hogeName == null) {
throw IllegalArgumentException("Argument is marked as non-null but was passed a null value.")
}
} else {
__hogeName = "hoge"
}
return SecondFragmentArgs(__hogeName)
}
}
}
39
Slide 40
Slide 40 text
// ArgsΫϥε(ࣗಈੜ)
data class SecondFragmentArgs(val hogeName: String = "hoge") : NavArgs {
fun toBundle(): Bundle {
val result = Bundle()
result.putString("hogeName", this.hogeName)
return result
}
companion object {
@JvmStatic
fun fromBundle(bundle: Bundle): SecondFragmentArgs {
bundle.setClassLoader(SecondFragmentArgs::class.java.classLoader)
val __hogeName : String?
If (bundle.containsKey("hogeName")) {
__hogeName = bundle.getString("hogeName")
if (__hogeName == null) {
throw IllegalArgumentException("Argument is marked as non-null but was passed a null value.")
}
} else {
__hogeName = "hoge"
}
return SecondFragmentArgs(__hogeName)
}
}
}
40
NavGraphで指定した変数名をキー
Slide 41
Slide 41 text
41
class SecondFragment : Fragment(R.layout.fragment_second) {
private val args: SecondFragmentArgs by navArgs()
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
val hogeName: String = args.hogeName
ʙʙʙུʙʙʙ
}
}
Slide 42
Slide 42 text
42
class SecondFragment : Fragment(R.layout.fragment_second) {
private val args: SecondFragmentArgs by navArgs()
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
super.onViewCreated(view, savedInstanceState)
val hogeName: String = args.hogeName
ʙʙʙུʙʙʙ
}
}
型安全・null安全にデータ受け渡し可能
Slide 43
Slide 43 text
ViewModelを⽤いる場合
ViewModelでデータ共有
• ActivityViewModel：Activityスコープ
• NavGraphViewModel：NavGraphスコープ
(NEW)
43
Slide 44
Slide 44 text
導⼊事例
44
Slide 45
Slide 45 text
Studyplusアプリの概要
• アプリの歴史：2015年7⽉〜
• アプリサイズ：100000⾏弱
• Activity数：約200個
• Navigation導⼊開始：2019年7⽉〜
45
Slide 46
Slide 46 text
既存の作り
• 画⾯全体がActivity構成
• マルチモジュール
46
Slide 47
Slide 47 text
47
モジュール図
Slide 48
Slide 48 text
48
モジュール図
app層
Slide 49
Slide 49 text
49
モジュール図
ui層
Slide 50
Slide 50 text
50
モジュール図
repository層
Slide 51
Slide 51 text
51
モジュール図
entity層
Slide 52
Slide 52 text
Studyplusアプリへの導⼊⽅針
導⼊⽅針
• 機能モジュールごとにNavigation導⼊
導⼊⽅法
• 機能モジュールを1ActivityマルチFragment化
• Navigationで画⾯遷移、データ受け渡し実現
52
Slide 53
Slide 53 text
実際の導⼊事例 (隅⼭)
53
Slide 54
Slide 54 text
コミュニティ機能の全体構成
CommunityActivity(全11画⾯)
検索画⾯、検索結果画⾯、メンバー招待画⾯、
作成画⾯、詳細画⾯、メンバー管理画⾯、
編集画⾯、参加申請画⾯、トピック⼀覧画⾯、
トピック詳細画⾯、トピック作成画⾯
54
Slide 55
Slide 55 text
コミュニティ機能とは
55
Slide 56
Slide 56 text
56
Slide 57
Slide 57 text
導⼊事例
• 課題①：画⾯遷移
• 課題②：Toolbar
• 注意事項：マルチクリックによるクラッシュ
57
Slide 58
Slide 58 text
導⼊事例
• 課題①：画⾯遷移
• 課題②：Toolbar
• 注意事項：マルチクリックによるクラッシュ
58
Slide 59
Slide 59 text
課題①：画⾯遷移
他モジュールから遷移する場合、開始地点が異なる
1. 通常の開始地点：検索画⾯
2. ユーザ情報からの遷移：検索結果画⾯
3. 通知からの遷移：詳細画⾯
4. 通知からの遷移：トピック詳細画⾯
59
Slide 60
Slide 60 text
60
１
２
３
４
Slide 61
Slide 61 text
解決策：開始地点の変更⽅法
• StartDestinationを⽤いる
• GlobalActionを⽤いる
• NavGraphを分ける
61
Slide 62
Slide 62 text
解決策：開始地点の変更⽅法
• StartDestinationを⽤いる
• GlobalActionを⽤いる
• NavGraphを分ける
→今回はNavGraphを分けることを選択
62
Slide 63
Slide 63 text
StartDestinationの場合
63
NavGraphのsetStartDestinationで
どの画⾯から始めるか指定できる
使い所 ：開始地点が多い場合
メリット ：nav_graphを変更する必要がない
デメリット：特になし
Slide 64
Slide 64 text
// StartDestinationͷΓํ
private enum class Action {
TOP, SEARCH_RESULT, DETAIL, TOPIC_DETAIL
}
companion object {
fun createTopIntent(context: Context) =
Intent(context, CommunityActivity::class.java).apply {
putExtra(CommunityActivity::action.name, Action.TOP)
}
fun createSearchResultIntent(context: Context) =
Intent(context, CommunityActivity::class.java).apply {
putExtra(CommunityActivity::action.name, Action.SEARCH_RESULT)
}
fun createDetailIntent(context: Context) =
Intent(context, CommunityActivity::class.java).apply {
putExtra(CommunityActivity::action.name, Action.DETAIL)
}
fun createTopicDetailIntent(context: Context) =
Intent(context, CommunityActivity::class.java).apply {
putExtra(CommunityActivity::action.name, Action.TOPIC_DETAIL)
}
} 64
Slide 65
Slide 65 text
65
// StartDestinationͷΓํ
override fun onCreate(savedInstanceState: Bundle?) {
ʙʙʙུʙʙʙ
val navController = findNavController(R.id.nav_host_fragment)
val navGraph = navController.navInflater.inflate(R.navigation.community_nav_graph)
when (action) {
Action.TOP -> navController.graph = navGraph
Action.SEARCH_RESULT -> navController.graph =
navGraph.apply { startDestination = R.id.communitySearchResultFragment }
Action.DETAIL -> navController.graph =
navGraph.apply { startDestination = R.id.communityDetailFragment }
Action.TOPIC_DETAIL -> navController.graph =
navGraph.apply { startDestination = R.id.communityTopicDetailFragment }
}
}
Slide 66
Slide 66 text
66
// StartDestinationͷΓํ
override fun onCreate(savedInstanceState: Bundle?) {
ʙʙʙུʙʙʙ
val navController = findNavController(R.id.nav_host_fragment)
val navGraph = navController.navInflater.inflate(R.navigation.community_nav_graph)
when (action) {
Action.TOP -> navController.graph = navGraph
Action.SEARCH_RESULT -> navController.graph =
navGraph.apply { startDestination = R.id.communitySearchResultFragment }
Action.DETAIL -> navController.graph =
navGraph.apply { startDestination = R.id.communityDetailFragment }
Action.TOPIC_DETAIL -> navController.graph =
navGraph.apply { startDestination = R.id.communityTopicDetailFragment }
}
}
Slide 67
Slide 67 text
GlobalActionの場合
67
どこからでも利⽤できる遷移
使い所 ：汎⽤的な画⾯への遷移の場合
メリット ：遷移が複雑でも遷移図がシンプル
デメリット：GUI上で遷移関係が追いにくい
Slide 68
Slide 68 text
GlobalActionのやり⽅
68
Slide 69
Slide 69 text
69
// ࣗಈੜ
Slide 70
Slide 70 text
70
Slide 71
Slide 71 text
71
Slide 72
Slide 72 text
72
// GlobalActionͷΓํ
override fun onCreate(savedInstanceState: Bundle?) {
ʙʙʙུʙʙʙ
val navController = findNavController(R.id.nav_host_fragment)
navController.setGraph(R.navigation.community_nav_graph)
if (action == Action.SEARCH_RESULT) {
navController.navigate(
ActionOnlyNavDirections(R.id.actionToSearchResult)
)
}
}
Slide 73
Slide 73 text
73
// GlobalActionͷΓํ
override fun onCreate(savedInstanceState: Bundle?) {
ʙʙʙུʙʙʙ
val navController = findNavController(R.id.nav_host_fragment)
navController.setGraph(R.navigation.community_nav_graph)
if (action == Action.SEARCH_RESULT) {
navController.navigate(
ActionOnlyNavDirections(R.id.actionToSearchResult)
)
}
}
Slide 74
Slide 74 text
マルチモジュールでの
GlobalActionの注意点
74
• NavGraphのstartDestinationの上に
GlobalActionの遷移先が乗る
• GlobalActionの遷移先をRemoveする
とNavGraphのstartDestinationに戻る
Slide 75
Slide 75 text
マルチモジュールでの
GlobalActionの注意点
75
理想
トップ画⾯ コミュニティのNavGraph
GlobalAction先
Slide 76
Slide 76 text
マルチモジュールでの
GlobalActionの注意点
76
トップ画⾯ コミュニティのNavGraph
GlobalAction先
遷移
戻る
理想
Slide 77
Slide 77 text
マルチモジュールでの
GlobalActionの注意点
77
トップ画⾯ コミュニティのNavGraph
GlobalAction先
startDestination
現実
Slide 78
Slide 78 text
遷移
マルチモジュールでの
GlobalActionの注意点
78
トップ画⾯ コミュニティのNavGraph
GlobalAction先
startDestination
戻る 戻る
現実
Slide 79
Slide 79 text
NavGraphを分ける場合
79
開始地点ごとにNavGraphを切り分けて
それぞれのNavGraphをNestedGraphで遷移を実現
使い所 ：ViewModelでデータ共有する場合
メリット ：NavGraphViewModelが使える
デメリット：GUI上で機能全体の遷移が追いにくい
Slide 80
Slide 80 text
80
Slide 81
Slide 81 text
81
// NestedGraphͷΓํ
override fun onCreate(savedInstanceState: Bundle?) {
ʙʙʙུʙʙʙ
val navController = findNavController(R.id.nav_host_fragment)
when (action) {
Action.TOP ->
navController.setGraph(R.navigation.community_top_nav_graph)
Action.SEARCH_RESULT ->
navController.setGraph(R.navigation.community_search_result_nav_graph)
Action.DETAIL ->
navController.setGraph(R.navigation.community_detail_nav_graph)
Action.TOPIC_DETAIL ->
navController.setGraph(R.navigation.community_topic_detail_nav_graph)
}
}
Slide 82
Slide 82 text
82
// NestedGraphͷΓํ
override fun onCreate(savedInstanceState: Bundle?) {
ʙʙʙུʙʙʙ
val navController = findNavController(R.id.nav_host_fragment)
when (action) {
Action.TOP ->
navController.setGraph(R.navigation.community_top_nav_graph)
Action.SEARCH_RESULT ->
navController.setGraph(R.navigation.community_search_result_nav_graph)
Action.DETAIL ->
navController.setGraph(R.navigation.community_detail_nav_graph)
Action.TOPIC_DETAIL ->
navController.setGraph(R.navigation.community_topic_detail_nav_graph)
}
}
Slide 83
Slide 83 text
補⾜：データ受け渡し実現
NestedGraphの場合
• NavGraphでデータ受け渡し
• NavGraphViewModelでデータ共有
83
Slide 84
Slide 84 text
84
// ผͷNavGraphͷσʔλड͚͠
// actionʹՃ͢Δ͜ͱͰDirectionsͷҾͱͯ͠ೝࣝ
// Fragment.kt
private fun navigateToSearchResult(word: String) {
findNavController().navigate(
CommunitySearchFragmentDirections.actionSearchToSearchResult(keyword = word)
)
}
Slide 85
Slide 85 text
85
// NavGraphViewModelͰσʔλड͚͠
private val viewModel by navGraphViewModels(
R.navigation.community_detail_nav_graph
)
Slide 86
Slide 86 text
導⼊事例
• 課題①：画⾯遷移
• 課題②：Toolbar
• 注意事項：マルチクリックによるクラッシュ
86
Slide 87
Slide 87 text
課題②：Toolbar
画⾯仕様：
• UpボタンのアイコンがCloseの画⾯が存在
• iOSとデザインを共通にする必要がある
87
Slide 88
Slide 88 text
解決策：Toolbarの作成⽅法
• NavigationUIでToolbarと連携
• ToolbarをActivityに持たせ、
addOnDestinationChangedListener()で変更
• Toolbarを各Fragmentに持たせる
88
Slide 89
Slide 89 text
解決策：Toolbarの作成⽅法
• NavigationUIでToolbarと連携
→アイコンが変えられない
• ToolbarをActivityに持たせ、
addOnDestinationChangedListener()で変更
• Toolbarを各Fragmentに持たせる
89
Slide 90
Slide 90 text
解決策：Toolbarの作成⽅法
• NavigationUIでToolbarと連携
→アイコンが変えられない
• ToolbarをActivityに持たせ、
addOnDestinationChangedListener()で変更
→アイコン変更のコード量が多い
• Toolbarを各Fragmentに持たせる
90
Slide 91
Slide 91 text
解決策：Toolbarの作成⽅法
• NavigationUIでToolbarと連携
→アイコンが変えられない
• ToolbarをActivityに持たせ、
addOnDestinationChangedListener()で変更
→アイコン変更のコード量が多い
• Toolbarを各Fragmentに持たせる→選択
91
Slide 92
Slide 92 text
// NavigationUIͰToolbarͱ࿈ܞ
findViewById(R.id.toolbar)
.setupWithNavController(
navController = findNavController(R.id.nav_host_fragment),
configuration = AppBarConfiguration(emptySet()) {
onBackPressed()
true
}
)
92
Slide 93
Slide 93 text
onDestinationChangedListener
Destination
•
といった遷移先
onDestinationChangedListener
• Navigationによる遷移時に呼び出される
93
Slide 94
Slide 94 text
94
// ListenerͰToolbarΛมߋ
// ToolbarͷΞΠίϯϝχϡʔͳͲΧελϚΠζՄೳ
val navController = findNavController(R.id.nav_host_fragment)
navController.addOnDestinationChangedListener { _, destination, _ ->
when (destination.id) {
R.id.communitySearchFragment -> {
// ॲཧՃ
}
R.id.communityCreateFragment -> {
// ॲཧՃ
}
}
}
Slide 95
Slide 95 text
補⾜：前画⾯に戻る挙動
popBackStack()
• バックスタックからCurrentDestinationを削除
• バックスタックがCurrentのみの場合、
処理が⾏われずfalseを返却
95
private fun navigateBack() {
if (findNavController().popBackStack().not()) activity?.finish()
}
Slide 96
Slide 96 text
導⼊事例
• 課題①：画⾯遷移
• 課題②：Toolbar
• 注意事項：マルチクリックによるクラッシュ
96
Slide 97
Slide 97 text
マルチクリックによるクラッシュ
エラー：xxx is unknown to this NavController
原因：マルチクリック時に複数回navigateが呼ばれ、
currentDestinationがずれるとクラッシュ
解決策：マルチクリックを無効にする
97
// styles.xml
false
Slide 98
Slide 98 text
マルチクリック以外でも発⽣(発⽣条件は不明、⾮同期処理？)
→ライブラリ側の不具合の可能性が⾼い
→遷移時にcurrentDestinationのidを確認することで回避可能
参考資料：株式会社ZOZOテクノロジーズ TECH BLOG
https://techblog.zozo.com/entry/android-jetpack-navigation
98
マルチクリックによるクラッシュ
Slide 99
Slide 99 text
実際の導⼊事例 (中島)
99
Slide 100
Slide 100 text
導⼊事例
• DeepLinkの留意点
• CustomNavigator
• CustomNavigatorとは
• Studyplusでの導⼊経緯
• CustomNavigatorの留意点
100
Slide 101
Slide 101 text
導⼊事例
• DeepLinkの留意点
• CustomNavigator
• CustomNavigatorとは
• Studyplusでの導⼊経緯
• CustomNavigatorの留意点
101
Slide 102
Slide 102 text
Studyplus Pro
102
⇄
相互遷移
課⾦導線画⾯ 登録状況画⾯
Slide 103
Slide 103 text
Studyplus Pro
• 課⾦基盤関連画⾯(全4画⾯)
• 課⾦導線画⾯(Fragment)
• 機能⼀覧画⾯(BottomSheetDialog)
• 登録完了画⾯(BottomSheetDialog)
• 登録状況画⾯(別Activity)
103
Slide 104
Slide 104 text
// AndroidManifest
104
Slide 105
Slide 105 text
// AndroidManifest
105
互いに遷移可能かつそれぞれ複数をスタックに積まない
Slide 106
Slide 106 text
Studyplus Pro
106
Slide 107
Slide 107 text
• 未課⾦時に課⾦機能を使おうとした時に
課⾦導線画⾯へ遷移させる
• いろんな機能に散らばるためできる限り
共通に作りたい
107
課題：他モジュールから遷移
Slide 108
Slide 108 text
• 既存の仕組み
• ui層の下に置いたrouterモジュールに
遷移⽤のinterfaceを置く
• 各機能モジュールで遷移interface実装
108
Studyplusのモジュール間遷移
Slide 109
Slide 109 text
109
再掲:モジュール図
ui層
routerモジュール
Slide 110
Slide 110 text
// routerϞδϡʔϧͷinterface
fun openHogeActivity(activity: Activity)
// ֤uiϞδϡʔϧͰͷinterface࣮
override fun openHogeActivity(activity: Activity) {
activity.startActivity(HogeActivity.createIntent(activity))
}
110
Slide 111
Slide 111 text
既存の仕組みでもいいけど
Navigation導⼊済みの画⾯なら
NavigationのDeepLink遷移で
いいのではないか？
111
解決策：他モジュールから遷移
Slide 112
Slide 112 text
// premium_nav_graph.xml
112
Slide 113
Slide 113 text
// AndroidManifest
113
Slide 114
Slide 114 text
Studyplus Pro
114
Slide 115
Slide 115 text
Studyplus Pro
115
Slide 116
Slide 116 text
// ભҠݩͷॲཧ
startActivity(Intent(
Intent.ACTION_VIEW,
Uri.parse("(scheme)://premium_appeal")
))
116
Slide 117
Slide 117 text
マルチモジュールでの遷移が⾮常に楽！
117
解決策：他モジュールから遷移
Slide 118
Slide 118 text
つまづき：DeepLink遷移
118
→
OK
Slide 119
Slide 119 text
つまづき：DeepLink遷移
119
←
×
アプリが
閉じる
Slide 120
Slide 120 text
タスクのバックスタックが全部消えた…？
120
つまづき：DeepLink遷移
Slide 121
Slide 121 text
• Navigationの暗黙的DeepLinkは
Intent.FLAG_ACTIVITY_NEW_TASK
の有無でバックスタックの挙動が変わる
• 明記はされていないが、
launchMode=“singleTask”も同様の結果に
121
原因
https://developer.android.com/guide/navigation/navigation-deep-link#implicit
Slide 122
Slide 122 text
// AndroidManifest
122
!!
Slide 123
Slide 123 text
• モジュール間の画⾯遷移⾃体には
⾮常に使いやすく、有⽤
• ただし、遷移先ActivityのLaunchMode
には注意…
(SingleTask指定はかなり特殊だと思いますが)
123
DeepLink遷移を試してみて
Slide 124
Slide 124 text
導⼊事例
• DeepLinkの留意点
• CustomNavigator
• CustomNavigatorとは
• Studyplusでの利⽤経緯
• CustomNavigatorの留意点
124
Slide 125
Slide 125 text
CustomNavigatorとは
• 遷移管理クラス(Navigator)を⾃分で
カスタマイズして追加できる
• 公式にないDestinationを追加したいとき
• 遷移時に共通で何か処理が必要なとき
125
Slide 126
Slide 126 text
Navigationの拡張性の⾼さに感動
126
CustomNavigatorとは
Slide 127
Slide 127 text
導⼊事例
• DeepLinkの留意点
• CustomNavigator
• CustomNavigatorとは
• Studyplusでの利⽤経緯
• CustomNavigatorの留意点
127
Slide 128
Slide 128 text
⼤学資料機能
128
検索して
→
選択して
→
Slide 129
Slide 129 text
⼤学資料機能
• CollegeDocumentActivity(全7画⾯)
• 検索条件指定画⾯
• 検索結果画⾯
• おすすめ資料画⾯
• 請求画⾯
• 請求完了画⾯
• 請求履歴画⾯
• 住所⼊⼒画⾯
129
Slide 130
Slide 130 text
⼤学資料機能
130
Slide 131
Slide 131 text
⼤学資料機能
131
DialogFragment
Slide 132
Slide 132 text
Studyplusでの利⽤経緯
• 実装当時(ver2.0.0)DialogFragmentは
公式でサポートされていなかった
• 2.1.0-alphaでは実装済みだったが
リリース時期的に待てなかった
132
Slide 133
Slide 133 text
Studyplusでの利⽤経緯
alphaの内部コードなどを参考に
DialogFragmentNavigatorを⾃作した
133
Slide 134
Slide 134 text
// DialogFragmentNavigator.kt
@Navigator.Name("dialog-fragment")
class DialogFragmentNavigator(
private val context: Context,
private val manager: FragmentManager
) : Navigator() {
override fun createDestination() = DialogDestination(this)
override fun navigate(
destination: DialogDestination, args: Bundle?, navOptions: NavOptions?, navigatorExtras: Extras?
): NavDestination? {
val fragment = destination.createFragment(args)
fragment.show(manager, TAG)
return destination
}
override fun popBackStack(): Boolean {
val existingFragment = manager.findFragmentByTag(TAG)
if (existingFragment != null) {
(existingFragment as DialogFragment).dismiss()
}
return true
}
134
Slide 135
Slide 135 text
// DialogFragmentNavigator.kt
@Navigator.Name("dialog-fragment")
class DialogFragmentNavigator(
private val context: Context,
private val manager: FragmentManager
) : Navigator() {
override fun createDestination() = DialogDestination(this)
override fun navigate(
destination: DialogDestination, args: Bundle?, navOptions: NavOptions?, navigatorExtras: Extras?
): NavDestination? {
val fragment = destination.createFragment(args)
fragment.show(manager, TAG)
return destination
}
override fun popBackStack(): Boolean {
val existingFragment = manager.findFragmentByTag(TAG)
if (existingFragment != null) {
(existingFragment as DialogFragment).dismiss()
}
return true
}
Destinationの作成(クラスも⾃作必要)
135
Slide 136
Slide 136 text
// DialogFragmentNavigator.kt
@Navigator.Name("dialog-fragment")
class DialogFragmentNavigator(
private val context: Context,
private val manager: FragmentManager
) : Navigator() {
override fun createDestination() = DialogDestination(this)
override fun navigate(
destination: DialogDestination, args: Bundle?, navOptions: NavOptions?, navigatorExtras: Extras?
): NavDestination? {
val fragment = destination.createFragment(args)
fragment.show(manager, TAG)
return destination
}
override fun popBackStack(): Boolean {
val existingFragment = manager.findFragmentByTag(TAG)
if (existingFragment != null) {
(existingFragment as DialogFragment).dismiss()
}
return true
}
遷移する時の処理( dialog.show() )
136
Slide 137
Slide 137 text
// DialogFragmentNavigator.kt
@Navigator.Name("dialog-fragment")
class DialogFragmentNavigator(
private val context: Context,
private val manager: FragmentManager
) : Navigator() {
override fun createDestination() = DialogDestination(this)
override fun navigate(
destination: DialogDestination, args: Bundle?, navOptions: NavOptions?, navigatorExtras: Extras?
): NavDestination? {
val fragment = destination.createFragment(args)
fragment.show(manager, TAG)
return destination
}
override fun popBackStack(): Boolean {
val existingFragment = manager.findFragmentByTag(TAG)
if (existingFragment != null) {
(existingFragment as DialogFragment).dismiss()
}
return true
}
バックキー時の処理(
dialog.dismiss() )
137
Slide 138
Slide 138 text
// DialogFragmentNavigator.kt
@Navigator.Name("dialog-fragment")
class DialogFragmentNavigator(
private val context: Context,
private val manager: FragmentManager
) : Navigator() {
override fun createDestination() = DialogDestination(this)
override fun navigate(
destination: DialogDestination, args: Bundle?, navOptions: NavOptions?, navigatorExtras: Extras?
): NavDestination? {
val fragment = destination.createFragment(args)
fragment.show(manager, TAG)
return destination
}
override fun popBackStack(): Boolean {
val existingFragment = manager.findFragmentByTag(TAG)
if (existingFragment != null) {
(existingFragment as DialogFragment).dismiss()
}
return true
}
NavGraphで使うタグ()
138
Slide 139
Slide 139 text
// college_document_nav_graph.xml
ここの指定以外は同じ
139
Slide 140
Slide 140 text
// CollegeDocumentActivity.kt
// onCreate()
// `dialog-fragment` λάΛ༻͢ΔͨΊʹΧελϜNavigatorΛՃ
val navController = findNavController(R.id.nav_host_fragment)
navController.navigatorProvider += DialogFragmentNavigator(~~)
140
Slide 141
Slide 141 text
// CollegeDocumentActivity.kt
// onCreate()
// `dialog-fragment` λάΛ༻͢ΔͨΊʹΧελϜNavigatorΛՃ
val navController = findNavController(R.id.nav_host_fragment)
navController.navigatorProvider += DialogFragmentNavigator(~~)
141
インスタンス作って追加する
Slide 142
Slide 142 text
補⾜：公式のDialog対応
• DialogFragmentNavigatorは
ver2.1.0で追加されている
• BottomSheetDialogFragmentも対応
• なお、ライブラリ更新時に
⾃作クラスは削除
142
Slide 143
Slide 143 text
導⼊事例
• DeepLinkの留意点
• CustomNavigator
• CustomNavigatorとは
• Studyplusでの利⽤経緯
• CustomNavigatorの留意点
143
Slide 144
Slide 144 text
CustomNavigatorの留意点
• 欲しい機能は公式alphaに追加されてないか
• 作っても⼀時的なコードになる
• stableを待てるかリリース⽇の相談
144
Slide 145
Slide 145 text
CustomNavigatorの留意点
• 作成後、Navigatorクラス周りに変更はないか
• 公式の変更に追従する必要性
• メンテナンスコストの検討
145
Slide 146
Slide 146 text
CustomNavigatorの留意点
• 仕様の⾒直しで解決できないか
• 特殊なことをしないで済まないか相談
146
Slide 147
Slide 147 text
CustomNavigatorの留意点
便利で強⼒な拡張機能だが使いどころは⾒極めよう！
147
Slide 148
Slide 148 text
余談
Navigatorクラスが遷移に必要な処理を
ラップしているということは…
通常のFragmentからDialogFragmentに変更、
みたいな仕様変更に強い
148
Slide 149
Slide 149 text
まとめ
149
Slide 150
Slide 150 text
まとめ
• Navigationで画⾯遷移が簡単になった！
• ⼤規模アプリでもNavigationは導⼊できる！
• Navigationの機能使いこなすと便利！
150
Slide 151
Slide 151 text
まとめ
• Navigationで画⾯遷移が簡単になった！
• ⼤規模アプリでもNavigationは導⼊できる！
• Navigationの機能使いこなすと便利！
遷移図の俯瞰やGUI操作、遷移処理の簡易化など
151
Slide 152
Slide 152 text
まとめ
• Navigationで画⾯遷移が簡単になった！
• ⼤規模アプリでもNavigationは導⼊できる！
• Navigationの機能使いこなすと便利！
1機能1Activity⽅針で⼗分効果的
マルチモジュールでも導⼊は容易かつ有⽤
152
Slide 153
Slide 153 text
まとめ
• Navigationで画⾯遷移が簡単になった！
• ⼤規模アプリでもNavigationは導⼊できる！
• Navigationの機能使いこなすと便利！
様々な便利機能、拡張性
153
Slide 154
Slide 154 text
まとめ
Navigation導⼊の切っ掛けになれば嬉しい
154
Slide 155
Slide 155 text
ご静聴ありがとうございました
Thank you for listening.
155