Fragments V2 + Navigation Component

Transcript

1. Fragments V2 + Navigation component
2. Old screen architecture • multiple Activities • each screen had a separate Activity • no Fragments in the project • OK, we had like one or two (e.g. PreferenceFragment)
3. Why did we decide to migrate to Fragments? Activity has some limitations • It doesn’t support fl exible UI for tablets (e.g.: two pane layout) • It doesn’t allow to move views between Activities (e.g.: video in AB)
5. Why did we decide to migrate to Fragments? Activity has some limitations • It doesn’t support fl exible UI for tablets (e.g.: two pane layout) • It doesn’t allow to move views between Activities (e.g.: video in AB) Nav Component solves some problems • We don’t have to reinvent the wheel • Easier onboarding
6. Elements of navigation component •navigation_graph.xml
7. <?xml version="1.0" encoding="utf-8"?> <navigation xmlns:android="http: // schemas.android.com/apk/res/android" xmlns:app="http: // schemas.android.com/apk/res-auto" android:id="@+id/nav_graph" app:startDestination="@id/router"> <fragment android:id="@+id/article" android:name=".ArticleFragment" android:label="Article"> <argument android:name="articleId" app:argType="string" app:nullable="true" /> </ fragment> <action android:id="@+id/action_global_article" app:destination="@id/article" / > ... </ navigation>
8. <?xml version="1.0" encoding="utf-8"?> <navigation xmlns:android="http: // schemas.android.com/apk/res/android" xmlns:app="http: // schemas.android.com/apk/res-auto" android:id="@+id/nav_graph" app:startDestination="@id/router"> <fragment android:id="@+id/article" android:name=".ArticleFragment" android:label="Article"> <argument android:name="articleId" app:argType="string" app:nullable="true" /> </ fragment> <action android:id="@+id/action_global_article" app:destination="@id/article" / > ... </ navigation>
9. <?xml version="1.0" encoding="utf-8"?> <navigation xmlns:android="http: // schemas.android.com/apk/res/android" xmlns:app="http: // schemas.android.com/apk/res-auto" android:id="@+id/nav_graph" app:startDestination="@id/router"> <fragment android:id="@+id/article" android:name=".ArticleFragment" android:label="Article"> <argument android:name="articleId" app:argType="string" app:nullable="true" /> </ fragment> <action android:id="@+id/action_global_article" app:destination="@id/article" / > ... </ navigation>
10. <?xml version="1.0" encoding="utf-8"?> <navigation xmlns:android="http: // schemas.android.com/apk/res/android" xmlns:app="http: // schemas.android.com/apk/res-auto" android:id="@+id/nav_graph" app:startDestination="@id/router"> <fragment android:id="@+id/article" android:name=".ArticleFragment" android:label="Article"> <argument android:name="articleId" app:argType="string" app:nullable="true" /> </ fragment> <action android:id="@+id/action_global_article" app:destination="@id/article" / > ... </ navigation>
11. NavGraphDirections.actionGlobalArticle(articleId)
14. Elements of navigation component •navigation_graph.xml •NavHost
15. <androidx.fragment.app.FragmentContainerView android:id="@+id/nav_host" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="match_parent" android:layout_height="match_parent" />
16. <androidx.fragment.app.FragmentContainerView android:id="@+id/nav_host" android:name="androidx.navigation.fragment.NavHostFragment" android:layout_width="match_parent" android:layout_height="match_parent" />
17. Elements of navigation component •navigation_graph.xml •NavHost •NavController
18. NavController manages app navigation within a NavHost.
19. Fragment.findNavController() View.findNavController() Activity.findNavController(viewId: Int) val navHost = fragmentManager.findFragmentById(R.id.nav_host) as NavHostFragment val navController = navHostFragment.navController navController.navigate( ... )
20. Fragment.findNavController() View.findNavController() Activity.findNavController(viewId: Int) val navHost = fragmentManager.findFragmentById(R.id.nav_host) as NavHostFragment val navController = navHostFragment.navController navController.navigate( ... )
21. 1. Creating a Fragment for an Activity 2. Creating the whole navigation graph 3. Deleting all Activities 4. Clean up, fi xing Migration process
22. How to do X with AndroidX Navigation & Fragments?
23. Navigation findNavController() .navigate(NavGraphDirections.yourActionToFragmentX())
24. Back press handling private val backButtonCallback = object : OnBackPressedCallback(true) { override fun handleOnBackPressed() { if (webView.canGoBack()) { webView.goBack() } else { remove() requireActivity().onBackPressed() } } } override fun onCreate(savedInstanceState: Bundle?) { ... requireActivity().onBackPressedDispatcher .addCallback(this, backButtonCallback) }
25. Back press handling private val backButtonCallback = object : OnBackPressedCallback(true) { override fun handleOnBackPressed() { if (webView.canGoBack()) { webView.goBack() } else { remove() requireActivity().onBackPressed() } } } override fun onCreate(savedInstanceState: Bundle?) { ... requireActivity().onBackPressedDispatcher .addCallback(this, backButtonCallback) }
26. Back press handling private val backButtonCallback = object : OnBackPressedCallback(true) { override fun handleOnBackPressed() { if (webView.canGoBack()) { webView.goBack() } else { remove() requireActivity().onBackPressed() } } } override fun onCreate(savedInstanceState: Bundle?) { ... requireActivity().onBackPressedDispatcher .addCallback(this, backButtonCallback) }
27. Getting a result from a fragment • scoped ViewModel • currentBackStackEntry & previousBackStackEntry & 
 SavedStateHandle combo • More in https://stackover fl ow.com/q/50702643/759007
28. Getting a result from a fragment setFragmentResultListener("request_key") { requestKey: String, bundle: Bundle -> { val result = bundle.getString("your_data_key") // do something with the result } } findNavController().navigate(…) FirstFragment
29. Getting a result from a fragment setFragmentResultListener("request_key") { requestKey: String, bundle: Bundle -> { val result = bundle.getString("your_data_key") // do something with the result } } findNavController().navigate(…) FirstFragment
30. Getting a result from a fragment SecondFragment val result = Bundle().apply { putString("your_data_key", "Hello!") } setFragmentResult("request_key", result) findNavController().navigateUp()
31. Getting a result from a fragment SecondFragment val result = Bundle().apply { putString("your_data_key", "Hello!") } setFragmentResult("request_key", result) findNavController().navigateUp()
32. Getting a result from a fragment setFragmentResultListener("request_key") { requestKey: String, bundle: Bundle -> { val result = bundle.getString("your_data_key") // do something with the result } } findNavController().navigate(…) FirstFragment
33. Getting a result from a fragment setFragmentResultListener("request_key") { requestKey: String, bundle: Bundle -> { val result = bundle.getString("your_data_key") // do something with the result } } findNavController().navigate(…) FirstFragment
34. Deep links • Manually by passing data through Intent
35. Deep links • Manually by passing data through Intent • By using NavDeepLinkBuilder which creates PendingIntent (explicit)
36. Deep links (explicit) val pendingIntent = NavDeepLinkBuilder(context) .setComponentName(MainActivity :: class.java) .setGraph(R.navigation.nav_graph) .setDestination(R.id.newsfeed_web) .setArguments( ... ) .createPendingIntent()
37. Deep links • Manually by passing data through Intent • By using NavDeepLinkBuilder which creates PendingIntent (explicit deep link) • By using Uri (implicit deep link)
38. Deep links (implicit) <?xml version="1.0" encoding="utf-8"?> <navigation xmlns:android="http: // schemas.android.com/apk/res/android"> <fragment android:id="@+id/article" android:name=".ArticleFragment"> <argument android:name="articleId" /> <deepLink app:uri="vg: // article/{articleId}" /> ... </ navigation>
39. SafeArgs <fragment android:id="@+id/article" android:name=" ... ArticleFragment" android:label="ArticleFragment"> <argument android:name="articleId" app:argType="string" /> </ fragment>
40. SafeArgs val articleId = "kRmLdL" val dir = NavGraphDirections.actionGlobalArticle(articleId) val fragmentArgs = ArticleFragmentArgs(articleId) val bundle = fragmentArgs.toBundle() private val args: ArticleFragmentArgs by navArgs()
41. SafeArgs val articleId = "kRmLdL" val dir = NavGraphDirections.actionGlobalArticle(articleId) val fragmentArgs = ArticleFragmentArgs(articleId) val bundle = fragmentArgs.toBundle() private val args: ArticleFragmentArgs by navArgs()
42. SafeArgs val articleId = "kRmLdL" val dir = NavGraphDirections.actionGlobalArticle(articleId) val fragmentArgs = ArticleFragmentArgs(articleId) val bundle = fragmentArgs.toBundle() private val args: ArticleFragmentArgs by navArgs()
43. SafeArgs public data class ArticleFragmentArgs( public val articleId: String, ) : NavArgs { @Suppress("CAST_NEVER_SUCCEEDS") public fun toBundle(): Bundle { val result = Bundle() result.putString("articleId", this.articleId) return result } ... }
44. SafeArgs public data class ArticleFragmentArgs( public val articleId: String, ) : NavArgs { @Suppress("CAST_NEVER_SUCCEEDS") public fun toBundle(): Bundle { val result = Bundle() result.putString("articleId", this.articleId) return result } ... }
45. Testing
46. Basic Fragment test @RunWith(AndroidJUnit4 :: class) class PodcastFragmentTest { @Test fun start() { val args = PodcastFragmentArgs(Referrer.Test()).toBundle() val scenario = launchFragmentInContainer<PodcastFragment>(args) onView(withId( ... ) .check(matches(isDisplayed())) } }
47. Basic Fragment test @RunWith(AndroidJUnit4 :: class) class PodcastFragmentTest { @Test fun start() { val args = PodcastFragmentArgs(Referrer.Test()).toBundle() val scenario = launchFragmentInContainer<PodcastFragment>(args) onView(withId( ... ) .check(matches(isDisplayed())) } }
48. Basic Fragment test @RunWith(AndroidJUnit4 :: class) class PodcastFragmentTest { @Test fun start() { val args = PodcastFragmentArgs(Referrer.Test()).toBundle() val scenario = launchFragmentInContainer<PodcastFragment>(args) onView(withId( ... ) .check(matches(isDisplayed())) } }
49. launchFragmentInContainer launchFragmentInContainer<PodcastFragment>( Bundle(), themeResId = R.style.AppTheme )
50. FragmentScenario fragmentScenario.onFragment { fragment -> fragment.recreate() fragment.moveToState(Lifecycle.State.CREATED) fragment.showTitle("New title") }
51. TestNavHostController val navController = TestNavHostController( ApplicationProvider.getApplicationContext() ) navController.setGraph(R.navigation.navigation_graph) val fragmentScenario = launchFragmentInContainer<PodcastFragment>( ... ) fragmentScenario.onFragment { fragment -> Navigation.setViewNavController(fragment.requireView(), navController) }
52. TestNavHostController val fragmentScenario = launchFragmentInContainer<PodcastFragment>( ... ) val fragmentScenario = launchFragmentInContainer { PodcastFragment( ... ).also { fragment -> fragment.viewLifecycleOwnerLiveData.observeForever { viewLifecycleOwner -> if (viewLifecycleOwner != null) { Navigation.setViewNavController( fragment.requireView(), navController ) } } } }
53. Problems • Nav component destroys Fragment’s view when navigating to the new Fragment • We discovered leaking RecyclerView’s adapters • Testing is sometimes tricky • Not everything is supported
54. Summary • https://github.schibsted.io/smp-distribution/android-hermes-app/pull/2520 • Negative delta (+3,040 −3,562) • 221 commits • About two months of work of two people • Jetpack/AndroidX alpha and beta versions worked really well • Jetpack/AndroidX is the future
55. QUIZ!*
56. <fragment android:id="@+id/web" android:name="com.schibsted.publishing.hermes.web.WebFragment" android:label="WebFragment"> ... <argument android:name="benefitCardUrl" android:defaultValue="null" app:argType="string" app:nullable="true" /> </ fragment>
57. <fragment android:id="@+id/web" android:name="com.schibsted.publishing.hermes.web.WebFragment" android:label="WebFragment"> ... <argument android:name="benefitCardUrl" android:defaultValue="null" -> "null" // String android:defaultValue="@null" -> null // Object? app:argType="string" app:nullable="true" /> </ fragment>
58. Thank you!