Android Jetpack - Navigation Components

2018년 8월 12일 GDG 주최 Google I/O 2018 Extended Android Overflow 행사 발표자료 입니다. Android Jetpack의 Navigation Components를 다루었습니다.

Transcript

1. Android Jetpack - Navigation ٘ۄ݃ঙஹಌפ উ٘۽੉٘ ѐߊ੗
 facebook.com/rfrost77 ੉थ޹
2. Challenges for Navigation
3. Challenges for Navigation - Fragment Transaction
4. Challenges for Navigation - Fragment Transaction - Up and Back
5. Challenges for Navigation - Fragment Transaction - Up and Back - Passing Arguments
6. Challenges for Navigation - Fragment Transaction - Up and Back - Passing Arguments - Deep Links
7. Challenges for Navigation - Fragment Transaction - Up and Back - Passing Arguments - Deep Links - Error-prone Boilerplate
9. implementation 'android.arch.navigation:navigation-fragment-ktx:1.0.0-alpha04' implementation 'android.arch.navigation:navigation-ui-ktx:1.0.0-alpha04' Apply Navigation
10. Navigation Architecture Component
11. Navigation Architecture Component - ݺࣁ - Navigation Graph. XML. - प೯ - NavController.navigate()
12. navigation destinationҗ actions੄ ୒ࢎ૓ Navigation Graph
13. Navigation Editor
14. Navigation Editor Destination
15. Action
16. <navigation xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" app:startDestination="@+id/title_screen"> <fragment android:id="@+id/title_screen" android:name="com.example.android.navigationsample.TitleScreen" android:label="fragment_title_screen" tools:layout="@layout/fragment_title_screen"> <action android:id="@+id/action_title_screen_to_register" app:destination="@id/register" app:popEnterAnim="@anim/slide_in_left" app:popExitAnim="@anim/slide_out_right" app:enterAnim="@anim/slide_in_right" app:exitAnim="@anim/slide_out_left"/> </fragment> </navigation> nav_graph.xml
17. <navigation xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" app:startDestination="@+id/title_screen"> <fragment android:id="@+id/title_screen" android:name="com.example.android.navigationsample.TitleScreen" android:label="fragment_title_screen" tools:layout="@layout/fragment_title_screen"> <action android:id="@+id/action_title_screen_to_register" app:destination="@id/register" app:popEnterAnim="@anim/slide_in_left" app:popExitAnim="@anim/slide_out_right" app:enterAnim="@anim/slide_in_right" app:exitAnim="@anim/slide_out_left"/> </fragment> </navigation> nav_graph.xml Destination
18. <navigation xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" app:startDestination="@+id/title_screen"> <fragment android:id="@+id/title_screen" android:name="com.example.android.navigationsample.TitleScreen" android:label="fragment_title_screen" tools:layout="@layout/fragment_title_screen"> <action android:id="@+id/action_title_screen_to_register" app:destination="@id/register" app:popEnterAnim="@anim/slide_in_left" app:popExitAnim="@anim/slide_out_right" app:enterAnim="@anim/slide_in_right" app:exitAnim="@anim/slide_out_left"/> </fragment> </navigation> nav_graph.xml Action
19. Demo
20. Entry point - Not owner of content NavHost manages navigation and content Activity
21. Entry point - Not owner of content NavHost manages navigation and content Activity
22. <fragment android:id="@+id/nav_host" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="match_parent" android:layout_height="match_parent" app:defaultNavHost="true" app:navGraph="@navigation/nav_graph_main" /> main_activity.xml
23. <fragment android:id="@+id/nav_host" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="match_parent" android:layout_height="match_parent" app:defaultNavHost="true" app:navGraph="@navigation/nav_graph_main" /> main_activity.xml
24. <fragment android:id="@+id/nav_host" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="match_parent" android:layout_height="match_parent" app:defaultNavHost="true" app:navGraph="@navigation/nav_graph_main" /> main_activity.xml
25. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.main_activity) val navController = findNavController(R.id.nav_host) NavigationUI.setupActionBarWithNavController(this, navController) } override fun onSupportNavigateUp() = findNavController(R.id.nav_host).navigateUp() } MainActivity.kt
26. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.main_activity) val navController = findNavController(R.id.nav_host) NavigationUI.setupActionBarWithNavController(this, navController) } override fun onSupportNavigateUp() = findNavController(R.id.nav_host).navigateUp() } MainActivity.kt
27. class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.main_activity) val navController = findNavController(R.id.nav_host) NavigationUI.setupActionBarWithNavController(this, navController) } override fun onSupportNavigateUp() = findNavController(R.id.nav_host).navigateUp() } MainActivity.kt
28. NavController.navigate() Navigating
29. btnGame.setOnClickListener { view -> view.findNavController().navigate(R.id.gameFragment) } MainFragment.kt
30. btnGame.setOnClickListener { view -> view.findNavController().navigate(R.id.gameFragment) } MainFragment.kt Destination
31. btnGame.setOnClickListener { view -> view.findNavController().navigate(R.id.gameFragment) } MainFragment.kt Action btnGame.setOnClickListener { view -> view.findNavController().navigate(R.id.action_mainFragment_to_gameFragment) }
32. <fragment android:id="@+id/mainFragment" android:name="com.rfrost.navigationsample.MainFragment" android:label="MainFragment" tools:layout="@layout/main_fragment"> <action android:id="@+id/action_mainFragment_to_gameFragment" app:destination="@id/gameFragment" app:enterAnim="@anim/nav_default_enter_anim" app:exitAnim="@anim/nav_default_exit_anim" app:popEnterAnim="@anim/nav_default_pop_enter_anim" app:popExitAnim="@anim/nav_default_pop_exit_anim" /> </fragment> nav_graph_main.xml
33. btnGame.setOnClickListener { view -> view.findNavController().navigate(R.id.gameFragment) } MainFragment.kt btnGame.setOnClickListener { view -> view.findNavController().navigate(R.id.action_mainFragment_to_gameFragment) } btnGame.setOnClickListener(Navigation.createNavigateOnClickListener(R.id.action _mainFragment_to_gameFragment))
34. Safe Args
35. view.findNavController().navigate(R.id.action_mainFragment_to_gameFragment, bundleOf("userName" to “rfrost”)) arguments?.getString("userName") Passing & Getting Arguments
36. view.findNavController().navigate(R.id.action_mainFragment_to_gameFragment, bundleOf("userName" to “rfrost”)) arguments?.getString("userName") Easy to mistake Passing & Getting Arguments
37. Navigation graph defines arguments Generate error-prone boilerplate code and make it type safe Type Safe Args
38. <fragment android:id="@+id/gameFragment" android:name="com.rfrost.navigationsample.GameFragment" android:label="GameFragment" tools:layout="@layout/game_fragment"> <argument android:name="screenName" app:argType="string" /> <argument android:name="userName" android:defaultValue="name" app:argType="string" /> </fragment> nav_graph.xml
39. Passing Arguments arguments?.let { val arguments = GameFragmentArgs.fromBundle(it) txt_screen_name.text = arguments.screenName txt_name.text = arguments.userName } val directions = MainFragmentDirections.actionToGame("GameFragment") directions.setUserName("rfrost") view.findNavController().navigate(directions)
40. val directions = MainFragmentDirections.actionToGame("GameFragment") directions.setUserName("rfrost") view.findNavController().navigate(directions) Passing Arguments arguments?.let { val arguments = GameFragmentArgs.fromBundle(it) txt_screen_name.text = arguments.screenName txt_name.text = arguments.userName }
41. val directions = MainFragmentDirections.actionToGame("GameFragment") directions.setUserName("rfrost") view.findNavController().navigate(directions) Passing Arguments arguments?.let { val arguments = GameFragmentArgs.fromBundle(it) txt_screen_name.text = arguments.screenName txt_name.text = arguments.userName } Default Valueо ࢸ੿غ૑ ঋ਷ ScreenName
42. Passing Arguments arguments?.let { val arguments = GameFragmentArgs.fromBundle(it) txt_screen_name.text = arguments.screenName txt_name.text = arguments.userName } val directions = MainFragmentDirections.actionToGame("GameFragment") directions.setUserName("rfrost") view.findNavController().navigate(directions)
43. Getting Arguments arguments?.let { val arguments = GameFragmentArgs.fromBundle(it) txt_screen_name.text = arguments.screenName txt_name.text = arguments.userName } val directions = MainFragmentDirections.actionToGame("GameFragment") directions.setUserName("rfrost") view.findNavController().navigate(directions)
44. arguments?.let { val arguments = GameFragmentArgs.fromBundle(it) txt_screen_name.text = arguments.screenName txt_name.text = arguments.userName } Getting Arguments val directions = MainFragmentDirections.actionToGame("GameFragment") directions.setUserName("rfrost") view.findNavController().navigate(directions)
45. arguments?.let { val arguments = GameFragmentArgs.fromBundle(it) txt_screen_name.text = arguments.screenName txt_name.text = arguments.userName } Getting Arguments val directions = MainFragmentDirections.actionToGame("GameFragment") directions.setUserName("rfrost") view.findNavController().navigate(directions)
46. classpath 'android.arch.navigation:navigation-safe-args-gradle-plugin:1.0.0-alpha04' apply plugin: 'androidx.navigation.safeargs' Apply Safe Args
47. Deep Linking
48. Explicit Implicit
49. Explicit Implicit Notification জ ই੉௑ জ ਤઇ Slices
50. Explicit Implicit Notification জ ই੉௑ জ ਤઇ Slices Web URLs Custom Scheme URLs
51. Explicit Implicit Notification জ ই੉௑ জ ਤઇ Slices Web URLs Custom Scheme URLs জ ղࠗীࢲ ੉ز জ ৻ࠗীࢲ ੉ز
52. NavDeepLinkBuilder Explicit Deep Linking
53. val deepLinkBuilder = NavDeepLinkBuilder(context) .setGraph(R.navigation.nav_graph_main) .setDestination(R.id.gameFragment) .setArguments(MainFragmentDirections.actionToGame("GameFragment").arguments) val pendingIntent = deepLinkBuilder.createPendingIntent() notificationBuilder.setContentIntent(pendingIntent) ExplicitDeepLink.kt
54. val deepLinkBuilder = NavDeepLinkBuilder(context) .setGraph(R.navigation.nav_graph_main) .setDestination(R.id.gameFragment) .setArguments(MainFragmentDirections.actionToGame("GameFragment").arguments) val pendingIntent = deepLinkBuilder.createPendingIntent() notificationBuilder.setContentIntent(pendingIntent) ExplicitDeepLink.kt
55. val deepLinkBuilder = NavDeepLinkBuilder(context) .setGraph(R.navigation.nav_graph_main) .setDestination(R.id.gameFragment) .setArguments(MainFragmentDirections.actionToGame("GameFragment").arguments) val pendingIntent = deepLinkBuilder.createPendingIntent() notificationBuilder.setContentIntent(pendingIntent) ExplicitDeepLink.kt
56. val deepLinkBuilder = NavDeepLinkBuilder(context) .setGraph(R.navigation.nav_graph_main) .setDestination(R.id.gameFragment) .setArguments(MainFragmentDirections.actionToGame("GameFragment").arguments) val pendingIntent = deepLinkBuilder.createPendingIntent() notificationBuilder.setContentIntent(pendingIntent) ExplicitDeepLink.kt
57. <deeplink app:uri=“https://www.google.com”> Implicit Deep Linking
58. <fragment android:id="@+id/resultFragment" android:name="com.rfrost.navigationsample.ResultFragment" android:label="ResultFragment" tools:layout="@layout/result_fragment"> <deepLink android:autoVerify="true" app:uri="http://www.google.com" /> <deepLink app:uri="navsample://result/userName/{userName}" /> <argument android:name="userName" android:defaultValue="name" app:argType="string" /> </fragment> ImplicitDeepLink.kt
59. <fragment android:id="@+id/resultFragment" android:name="com.rfrost.navigationsample.ResultFragment" android:label="ResultFragment" tools:layout="@layout/result_fragment"> <deepLink android:autoVerify="true" app:uri="http://www.google.com" /> <deepLink app:uri="navsample://result/userName/{userName}" /> <argument android:name="userName" android:defaultValue="name" app:argType="string" /> </fragment> ImplicitDeepLink.kt
60. <fragment android:id="@+id/resultFragment" android:name="com.rfrost.navigationsample.ResultFragment" android:label="ResultFragment" tools:layout="@layout/result_fragment"> <deepLink android:autoVerify="true" app:uri="http://www.google.com" /> <deepLink app:uri="navsample://result/userName/{userName}" /> <argument android:name="userName" android:defaultValue="name" app:argType="string" /> </fragment> ImplicitDeepLink.kt
61. <activity android:name=".MainActivity"> <nav-graph android:value="@navigation/nav_graph_main" /> </activity> AndroidManifest.xml
62. Appendix - Menu id Driven Navigation - Navigate to Activity
63. Menu id৬ Destinationਸ ڙэ੉ ݏ୶ݶ ੗ز োز Menu id Driven Navigation
64. <com.google.android.material.bottomnavigation.BottomNavigationView app:menu="@menu/menu_bottom_nav" /> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@id/mainFragment" android:title="MainFragment" /> <item android:id="@id/action_mainFragment_to_settingsFragment" android:title="SettingsFragment" /> </menu> Menu id Driven Navigation
65. <com.google.android.material.bottomnavigation.BottomNavigationView app:menu="@menu/menu_bottom_nav" /> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@id/mainFragment" android:title="MainFragment" /> <item android:id="@id/action_mainFragment_to_settingsFragment" android:title="SettingsFragment" /> </menu> Menu id Driven Navigation
66. <com.google.android.material.bottomnavigation.BottomNavigationView app:menu="@menu/menu_bottom_nav" /> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@id/mainFragment" android:title="MainFragment" /> <item android:id="@id/action_mainFragment_to_settingsFragment" android:title="SettingsFragment" /> </menu> Menu id Driven Navigation
67. ӝઓ Navigatingҗ زੌೠ ߑߨ ࢜۽਍ Activityীࢲח ࢜۽਍ navigation_graph.xmlਸ ٜ݅যࢲ োز Navigate to Activity
68. <navigation> <activity android:id="@+id/detailActivity" android:name="com.rfrost.navigationsample.DetailActivity" android:label="detail_activity" tools:layout="@layout/detail_activity" /> </navigation> view.findNavController().navigate(R.id.action_mainFragment_to_detailActivity) Navigate to Activity
69. <navigation> <activity android:id="@+id/detailActivity" android:name="com.rfrost.navigationsample.DetailActivity" android:label="detail_activity" tools:layout="@layout/detail_activity" /> </navigation> view.findNavController().navigate(R.id.action_mainFragment_to_detailActivity) Navigate to Activity
70. <navigation> <activity android:id="@+id/detailActivity" android:name="com.rfrost.navigationsample.DetailActivity" android:label="detail_activity" tools:layout="@layout/detail_activity" /> </navigation> view.findNavController().navigate(R.id.action_mainFragment_to_detailActivity) Navigate to Activity
71. <fragment android:id="@+id/nav_host" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="match_parent" android:layout_height="match_parent" app:defaultNavHost="true" app:navGraph=“@navigation/nav_graph_detail” /> detail_activity.xml ࢜۽਍ Navigation Graph xmlਸ ଵઑೠ׮
72. ই૒ ࠛউ੿ೠ ࢎ೦ - BackActionীࢲ NavControllerҗ ActionBar੄ زӝചо ੉࢚ೣ - Manifestীࢲ nav-graphо ੜ ز੘ೞ૑ ঋ਺ - Deeplinkীࢲ ઺р BackStackਸ ݽف ࢓ܻ૑ ޅೣ - Deeplinkীࢲ {arguments}ח String݅ ؽ
73. Reference ҕध о੉٘: - developer.android.com/topic/libraries/architecture/navigation/ ҕध ࢠ೒௏٘: - github.com/googlesamples/android-architecture-components/tree/master/ NavigationBasicSample ࢠ೒௏٘ - github.com/rfrost77/GDG-NavigationSample
74. хࢎ೤פ׮ ٘ۄ݃ঙஹಌפ উ٘۽੉٘ ѐߊ੗
 facebook.com/rfrost77 ੉थ޹