Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Navigation - Android Architecture Components

Navigation - Android Architecture Components

Introduction to Navigation components

Avatar for Daichi Furiya (Wasabeef)

Daichi Furiya (Wasabeef)

July 18, 2019
Tweet

More Decks by Daichi Furiya (Wasabeef)

Other Decks in Programming

Transcript

  1. Architecture Components ษڧձ ͱ͸ • Architecture Components ͷجૅ஌ࣝʹֶ͍ͭͯͿษڧձ • ओ࠵ɿGDG

    Tokyo ϋογϡλά: #gdgtokyo • ߨࢣɺνϡʔλʔɿGoogle ࣾһͱ Google Developer Expert • ʢ͋Μ͍͟Ώ͖ɺ ͕͑ΘɺΘ͞ͼʔ;ɺ͋Β͖ʣ • ౰೔νϡʔλʔ : @95kugo, @STAR_ZERO, @tomoya0x00
  2. Architecture Components ษڧձ ͱ͸ • ܭ4ճͷ༧ఆ • ୈ5ճ: Lifecycle, ViewModel,

    LiveData ͷ෮श • ୈ6ճ: Room ͷ෮श, Paging • ୈ7ճ: WorkManager • ୈ8ճ: Navigation λΠϜςʔϒϧ 19:30ʙ19:35 ѫࡰˍઆ໌ 19:35ʙ20:15 આ໌ 20:15ʙ20:25 ٳܜ 20:25ʙ ՝୊औΓ૊Έ
  3. Architecture Components ͱ͸ ෳ਺ͷػೳɾϥΠϒϥϦͷ૯শ • Data Binding • Lifecycles •

    LiveData • ViewModel • Room • Paging • WorkManager • Navigation
  4. Architecture Components ͱ͸ ෳ਺ͷػೳɾϥΠϒϥϦͷ૯শ • Data Binding • Lifecycles •

    LiveData • ViewModel • Room • Paging • WorkManager • Navigation ݸผར༻OK ૊Έ߹Θͤར༻OK
  5. Architecture Components ͱ͸ ෳ਺ͷػೳɾϥΠϒϥϦͷ૯শ • Data Binding • Lifecycles •

    LiveData • ViewModel • Room • Paging • WorkManager • Navigation ݸผར༻OK ૊Έ߹Θͤར༻OK #1 #2 #3 #4
  6. Architecture Components ͱ͸ ෳ਺ͷػೳɾϥΠϒϥϦͷ૯শ • Data Binding • Lifecycles •

    LiveData • ViewModel • Room • Paging • WorkManager • Navigation ݸผར༻OK ૊Έ߹Θͤར༻OK #1 #2 #3 #4 #5 #6 #7 #8
  7. Navigation • Fragment Transaction ͷ؆қԽ • Ξχϝʔγϣϯ • σΟʔϓϦϯΫ •

    BottomNavigation / Toolbar ͳͲͱ؆୯ʹ࿈ܞ • Fragment ؒͰσʔλΛܕ҆શʹ౉ͤΔ • Navigation editor Λ࢖͏ͱ GUI Ͱ؆୯ʹઃఆ͕Ͱ͖Δ
  8. Gradle - dependencies dependencies { def nav_version = "2.1.0-alpha06" implementation

    “androidx.navigation:navigation-fragment-ktx:nav_version" implementation “androidx.navigation:navigation-ui-ktx:nav_version” }
  9. Gradle - dependencies buildscript { repositories { google() } dependencies

    { def nav_version = "2.1.0-alpha06" classpath “androidx.navigation:navigation-safe-args-gradle-plugin:$nav_version" } } "// Kotlin apply plugin: "androidx.navigation.safeargs.kotlin"
  10. nav_graph.xml Ͱར༻͢Δओͳλά • <navigation /> : ϧʔτཁૉɻىಈޙͷ։࢝ҐஔͳͲΛࢦఆ • <fragment />

    : ֤ը໘ʢFragmentʣ • <action /> : ը໘ؒͷ֤ը໘ʢFragmentʣ • <argument /> : ը໘Ͱड͚औΔҾ਺ • <deeplink /> : σΟʔϓϦϯΫ • <dialog /> : DialogFragmentΛར༻͍ͯ͠Δ৔߹ͷը໘ • <include /> : Nested graphsɻάϥϑΛ෼ׂͯ͠੔ཧɾ࠶ར༻
  11. nav_graph.xml <?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" xmlns:tools="http:"//schemas.android.com/tools" android:id="@+id/nav_graph" app:startDestination="@id/fragment_home">

    <fragment android:id="@+id/fragment_home" android:name="jp.wasabeef.navplayground.home.HomeFragment" tools:layout="@layout/fragment_home"> <action android:id="@+id/to_dashboard" app:destination="@id/fragment_dashboard""/> "</fragment> <fragment android:id="@+id/fragment_dashboard" android:name="jp.wasabeef.navplayground.dashboard.DashboardFragment" tools:layout="@layout/fragment_dashboard" > <argument android:name="id" app:argType="string" "/> "</fragment> "</navigation> ֤λάΛઆ໌͍͖ͯ͠·͢ɻ
  12. <fragment /> <?xml version="1.0" encoding="utf-8"?> <navigation ""... app:startDestination="@id/fragment_home"> <fragment android:id="@+id/fragment_home"

    android:name="jp.wasabeef.navplayground.home.HomeFragment" android:label="HomeFragment" tools:layout="@layout/fragment_home"> "</fragment> "</navigation> ͜ͷλάͰ͸ Fragment ͷ֘౰Ϋϥεͱࢦఆ͠·͢ ·ͨɺޙड़͠·͕͢ <action/>, < argument/>, <deeplink/> ͳͲ͸͜ͷ഑Լʹهࡌ͠·͢ɻ
  13. <?xml version="1.0" encoding="utf-8"?> <navigation ""... app:startDestination="@id/fragment_home"> <fragment android:id="@+id/fragment_home" android:name="jp.wasabeef.navplayground.home.HomeFragment" android:label="HomeFragment"

    tools:layout="@layout/fragment_home"> "</fragment> "</navigation> <fragment /> ͜ͷ HomeFragment Λىಈ࣌ͷॳظը໘ͱ͢Δ৔߹͸ <navigation/> ͷ startDestination ʹࢦఆ͠·͢
  14. <argument /> <?xml version="1.0" encoding="utf-8"?> <navigation ""...> <fragment android:id="@+id/fragment_dashboard" android:name="jp.wasabeef.navplayground.dashboard.DashboardFragment"

    android:label="DashboardFragment" tools:layout="@layout/fragment_dashboard" > <argument android:name="id" app:argType="string" "/> "</fragment> "</navigation> Ҿ਺ʹ͸ integer, float, long, boolean, string, reference, parcelable, serializable, enum ͷར༻͕Մೳ ར༻Ͱ͖Δܕɿhttps://developer.android.com/guide/navigation/navigation-pass-data#supported_argument_types
  15. <action /> <?xml version="1.0" encoding="utf-8"?> <navigation ""...> <fragment ""...> <action

    android:id="@+id/to_dashboard" app:destination="@id/fragment_dashboard""/> "</fragment> <fragment android:id=“@+id/fragment_dashboard" ""..."/> "</navigation> <action> ͰॏཁʹͳΔͷ͕ id ͱ destination Ͱ͢ɻ id ͸ setOnClickListener ͳͲͰࢦఆ͢Δͱ͖ʹ࢖ ͍ɺdestination ͸ભҠઌͷ Fragment Λࢦఆ͠·͢
  16. <deeplink /> <fragment android:id="@+id/fragment_dashboard" android:name="jp.wasabeef.navplayground.dashboard.DashboardFragment" android:label="DashboardFragment" tools:layout="@layout/fragment_dashboard" > <argument android:name="id"

    app:argType="string" "/> <deeplink android:id="@+id/deeplink" app:uri="wasabeef.jp/dashboard/{id}" "/> "</fragment> σΟʔϓϦϯΫͰىಈ͍ͨ͠ Fragment ͷ഑Լ ʹىಈ͢Δ URIɺҾ਺ Λઃఆ͠·͢ɻ
  17. <deeplink /> - AndroidManifest.xml AndroidManifest ʹ <intent-filter/> Ͱ͸ͳ͘ <nav-graph/> Λ௥Ճ͢Δ͜ͱͰɺ͜͜ͷઃఆ

    ͸׬݁ͳΓ·͢ <?xml version="1.0" encoding="utf-8"?> <manifest ""...> <application ""...> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" "/> <category android:name="android.intent.category.LAUNCHER" "/> "</intent-filter> <nav-graph android:value="@navigation/nav_graph" "/> "</activity> "</application> "</manifest>
  18. <dialog /> <?xml version="1.0" encoding="utf-8"?> <navigation ""...> <fragment ""...> <action

    android:id="@+id/show_confirm" app:destination=“@id/fragment_confirm_dialog""/> "</fragment> <dialog android:id=“@+id/fragment_confirm_dialog” ""..."/> "</navigation> ࢖͍ํ͸ <fragment/> ͱಉ͡Ͱ DialogFragment Λ Navigation Ͱར༻͍ͨ͠৔߹͸ͪ͜ΒΛ࢖͍·͢ɻ
  19. Z BottomNavigation "// MainActivity override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState)

    setContentView(R.layout.activity_main) val navController = findNavController(R.id.nav_host_fragment) "// ActionBarͷλΠτϧͳͲΛ੍ޚ setupActionBarWithNavController( navController, AppBarConfiguration( setOf( R.id.fragment_home, R.id.fragment_dashboard ) ) ) "// ભҠΛ੍ޚ nav_view.setupWithNavController(navController) } ͜Ε͚ͩͰ BottomNavigation ͱͷ࿈ܞՄೳ <!— activity_main.xml —> <com.google.android.material.bottomnavigation.BottomNavigationView android:id="@+id/nav_view" app:menu="@menu/bottom_nav_menu" ""..."/> <!— bottom_nav_menu.xml ※ nav_graph.xml ͷ <fragment "/>Ͱࢦఆ͢Δ Id ͱҰகͤ͞Δ —> <menu ""...> <item android:id="@+id/fragment_home" …"/> <item android:id=“@+id/fragment_dashboard" ""..."/> "</menu>
  20. FragmentNavigator ͜ΕʹΑΓ͜Ε·Ͱ̍ͭͷ xml Ͱ ̍ͭͷ Activity ͕ભҠ͢Δ Fragment ͷઃఆ͕શͯ෼ׂɾ࠶ར༻Ͱ͖ΔΑ͏ʹͳΓ·͠ ͨɻ

    @Navigator.Name("fragment_with_anim") class DefaultNavigator( context: Context, manager: FragmentManager, containerId: Int ) : FragmentNavigator(context, manager, containerId) { override fun navigate( destination: Destination, args: Bundle?, navOptions: NavOptions?, navigatorExtras: Navigator.Extras? ): NavDestination? { return super.navigate(destination, args, exOp, navigatorExtras) } }
  21. FragmentNavigator MainActivity Ͱ ࡞੒ͨ͠ FragmentNavigator Λ NavController ʹ௥Ճ͠·͢ɻ ※ άϥϑ͕ઃఆ͞ΕΔલʹɺߦΘͳ͍ͱ͍͚·ͤΜɻ

    override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) findNavController(R.id.nav_host_fragment).apply { navigatorProvider += DefaultNavigator( this@MainActivity, nav_host_fragment.childFragmentManager, R.id.nav_host_fragment ) setGraph(R.navigation.nav_graph) } }
  22. ՝୊ • ՝୊1
 Navigation Խͯ͠ɺHome -> DashboardΛભҠͤ͞·͠ΐ͏ɻ
 ՝୊1.5 ભҠ࣌ͷΞχϝʔγϣϯΛ௥Ճͯ͠Έ·͠ΐ͏ɻ •

    ՝୊2
 <argument /> Λ࢖ͬͯ Dashboard ʹ id:String, name:String, location:String Λ౉ͯ͠Έ·͠ΐ͏ɻ • ՝୊3
 <deeplink /> Λ࢖ͬͯ Dashboard ͕͜ͷURLͰىಈͰ͖ΔΑ͏ʹ͠·͠ΐ͏ɻ
 https://sample.com/dashboard/{id}/{name}
 
 ىಈςετɿ
 adb shell am start -W -a android.intent.action.VIEW \
 -d "https://sample.com/dashboard/xxxxx/yyyyy"
  23. ౴͑ • ՝୊1 -> app-step1-action, app-step1-action-with-anim • ՝୊2 -> app-step2-args

    • ՝୊3 -> app-step3-deeplink • ՝୊4 -> app-step4-nested • ՝୊5 -> app-step5-bottom-nav • ՝୊6 -> app-step6-navigator
  24. ࢀߟࢿྉ • Android Navigation Architecture Component
 https://medium.com/@Alex.v/android-navigation-architecture- component-25b5a7aab8aa • Get

    started with the Navigation component
 https://developer.android.com/guide/navigation/navigation-getting- started •