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

Navigation - Android Architecture Components

Navigation - Android Architecture Components

Introduction to Navigation components

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 •