Navigation - Android Architecture Components

Introduction to Navigation components

Transcript

1. Architecture Components
   ษڧձ
   ͋Μ͍͟Ώ͖
   ͕͑Θ
   Θ͞ͼʔ;
   ͋Β͖
   ୈ8ճ໨ Navigation
   

   View Slide

2. Architecture Components ษڧձ ͱ͸
   • Architecture Components ͷجૅ஌ࣝʹֶ͍ͭͯͿษڧձ
   • ओ࠵ɿGDG Tokyo ϋογϡλά: #gdgtokyo
   • ߨࢣɺνϡʔλʔɿGoogle ࣾһͱ Google Developer Expert
   • ʢ͋Μ͍͟Ώ͖ɺ ͕͑ΘɺΘ͞ͼʔ;ɺ͋Β͖ʣ
   • ౰೔νϡʔλʔ : @95kugo, @STAR_ZERO, @tomoya0x00
   

   View Slide

3. 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ʙ ՝୊औΓ૊Έ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. Architecture Components ͷ໨త
   ݎ࿚ (robust) Ͱ
   ςετ͠΍͘͢ (testableʣ
   อक͠΍͍͢ (maintainable)
   ΞϓϦͷઃܭ͕Ͱ͖ΔΑ͏ʹखॿ͚͢Δ
   

   View Slide

9. Navigation
   

   View Slide

10. Navigation
    • Fragment Transaction ͷ؆қԽ
    • Ξχϝʔγϣϯ
    • σΟʔϓϦϯΫ
    • BottomNavigation / Toolbar ͳͲͱ؆୯ʹ࿈ܞ
    • Fragment ؒͰσʔλΛܕ҆શʹ౉ͤΔ
    • Navigation editor Λ࢖͏ͱ GUI Ͱ؆୯ʹઃఆ͕Ͱ͖Δ
    

    View Slide

11. Navigation
    

    View Slide

12. 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”
    }
    

    View Slide

13. 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"
    

    View Slide

14. Basic
    • ͜͜Ͱ͸ɺ؆୯ͳ Navigation editor ͷ࢖͍ํ΍ཁૉͷઆ໌Λͯ͠
    ͍͖·͢ɻ
    

    View Slide

15. nav_graph.xml
    • res/navigation ͷ഑Լʹ Navigation ༻
    ͷ xml Λ࡞Γɺ։͍ͯݟ͍ͯͩ͘͞ɻ

    ※ ͜͜Ͱ͸ nav_graph.xml ͱ͠·͢
    

    View Slide

16. nav_graph.xml
    Destinations panel
    

    View Slide

17. nav_graph.xml
    Graph Editor
    

    View Slide

18. nav_graph.xml
    Attributes
    

    View Slide

19. nav_graph.xml
    GUI ্Ͱ֤ը໘Λ௥Ճ͢Δ৔߹ʹ͸ɺ
    ͜ͷϘλϯ͔Β؆୯ʹ௥ՃͰ͖·͢ɻ
    

    View Slide

20. Demo: Navigation editor
    

    View Slide

21. nav_graph.xml Ͱར༻͢Δओͳλά
    • : ϧʔτཁૉɻىಈޙͷ։࢝ҐஔͳͲΛࢦఆ
    • : ֤ը໘ʢFragmentʣ
    • : ը໘ؒͷ֤ը໘ʢFragmentʣ
    • : ը໘Ͱड͚औΔҾ਺
    • : σΟʔϓϦϯΫ
    • : DialogFragmentΛར༻͍ͯ͠Δ৔߹ͷը໘
    • : Nested graphsɻάϥϑΛ෼ׂͯ͠੔ཧɾ࠶ར༻
    

    View Slide

22. nav_graph.xml
    
    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">
    android:id="@+id/fragment_home"
    android:name="jp.wasabeef.navplayground.home.HomeFragment"
    tools:layout="@layout/fragment_home">
    android:id="@+id/to_dashboard"
    app:destination="@id/fragment_dashboard""/>
    "
    android:id="@+id/fragment_dashboard"
    android:name="jp.wasabeef.navplayground.dashboard.DashboardFragment"
    tools:layout="@layout/fragment_dashboard" >
    android:name="id"
    app:argType="string" "/>
    "
    "
    ֤λάΛઆ໌͍͖ͯ͠·͢ɻ
    

    View Slide

23. 
    
    xmlns:app="http:"//schemas.android.com/apk/res-auto"
    android:id=“@+id/nav_graph">
    "
    ϧʔτཁૉʹͳΓ·͢
    ͜ͷதʹ֤λάΛهࡌ͖ͯ͠·͢ɻ
    ޙड़͠·͕͢ɺىಈ࣌ͷॳظը໘ͷઃఆ΋͜͜ʹ͠·͢
    

    View Slide

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

    View Slide

25. 
    app:startDestination="@id/fragment_home">
    android:id="@+id/fragment_home"
    android:name="jp.wasabeef.navplayground.home.HomeFragment"
    android:label="HomeFragment"
    tools:layout="@layout/fragment_home">
    "
    "
    
    ͜ͷ HomeFragment Λىಈ࣌ͷॳظը໘ͱ͢Δ৔߹͸
    ͷ startDestination ʹࢦఆ͠·͢
    

    View Slide

26. 
    GUI ্ͩͱɺ͜ͷҰͭʹ֘౰͠·͢ɻ
    

    View Slide

27. 
    
    
    android:id="@+id/fragment_dashboard"
    android:name="jp.wasabeef.navplayground.dashboard.DashboardFragment"
    android:label="DashboardFragment"
    tools:layout="@layout/fragment_dashboard" >
    android:name="id"
    app:argType="string" "/>
    "
    "
    Ҿ਺ʹ͸ integer, float, long, boolean,
    string, reference, parcelable,
    serializable, enum ͷར༻͕Մೳ
    ར༻Ͱ͖Δܕɿhttps://developer.android.com/guide/navigation/navigation-pass-data#supported_argument_types
    

    View Slide

28. 
    
    
    
    android:id="@+id/to_dashboard"
    app:destination="@id/fragment_dashboard""/>
    "
    android:id=“@+id/fragment_dashboard"
    ""..."/>
    "
    ͰॏཁʹͳΔͷ͕ id ͱ destination Ͱ͢ɻ
    id ͸ setOnClickListener ͳͲͰࢦఆ͢Δͱ͖ʹ࢖
    ͍ɺdestination ͸ભҠઌͷ Fragment Λࢦఆ͠·͢
    

    View Slide

29. with anim
    ભҠ࣌ͷΞχϝʔγϣϯΛ௥Ճ͢Δ৔߹͸ɺ͜ͷΑ͏ʹͳΓ·͢ɻ
    android:id="@+id/to_dashboard"
    app:destination="@id/fragment_dashboard"
    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" "/>
    

    View Slide

30. 
    android:id="@+id/fragment_dashboard"
    android:name="jp.wasabeef.navplayground.dashboard.DashboardFragment"
    android:label="DashboardFragment"
    tools:layout="@layout/fragment_dashboard" >
    android:name="id"
    app:argType="string" "/>
    android:id="@+id/deeplink"
    app:uri="wasabeef.jp/dashboard/{id}" "/>
    "
    σΟʔϓϦϯΫͰىಈ͍ͨ͠ Fragment ͷ഑Լ
    ʹىಈ͢Δ URIɺҾ਺ Λઃఆ͠·͢ɻ
    

    View Slide

31. - AndroidManifest.xml
    AndroidManifest ʹ Ͱ͸ͳ͘
    Λ௥Ճ͢Δ͜ͱͰɺ͜͜ͷઃఆ
    ͸׬݁ͳΓ·͢
    
    
    
    
    
    
    
    "
    
    "
    "
    "
    

    View Slide

32. 
    
    
    
    android:id="@+id/show_confirm"
    app:destination=“@id/fragment_confirm_dialog""/>
    "
    android:id=“@+id/fragment_confirm_dialog”
    ""..."/>
    "
    ࢖͍ํ͸ ͱಉ͡Ͱ DialogFragment Λ
    Navigation Ͱར༻͍ͨ͠৔߹͸ͪ͜ΒΛ࢖͍·͢ɻ
    

    View Slide

33. NavHostFragment
    android:id="@+id/nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    app:navGraph="@navigation/nav_graph" "/>
    activity_main.xml ʹը໘੍ޚ͢Δ NavHostFragment Λઃఆ͠ɺ࡞੒ͨ͠
    nav_graph.xml Λࢦఆ͢Δඞཁ͕͋Γ·͢ɻ
    

    View Slide

34. Advanced
    • Nested navigation graph
    • BottomNavigation
    • FragmentNavigator
    

    View Slide

35. Nested navigation graphs
    ͜ΕʹΑΓ͜Ε·Ͱ̍ͭͷ xml Ͱ ̍ͭͷ Activity ͕ભҠ͢Δ
    Fragment ͷઃఆ͕શͯ෼ׂɾ࠶ར༻Ͱ͖ΔΑ͏ʹͳΓ·͠
    ͨɻ
    

    View Slide

36. 
    
    ""...
    "
    Nested navigation graphs
    ଞͷάϥϑΛ ͢Δ͜ͱ͕Ͱ͖·͢ɻ
    

    View Slide

37. 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 ͱͷ࿈ܞՄೳ
    
    android:id="@+id/nav_view"
    app:menu="@menu/bottom_nav_menu"
    ""..."/>
    ※ nav_graph.xml ͷ Ͱࢦఆ͢Δ Id ͱҰகͤ͞Δ
    —>
    
    android:id="@+id/fragment_home" …"/>
    android:id=“@+id/fragment_dashboard" ""..."/>
    "
    

    View Slide

38. FragmentNavigator
    nav_graph.xml ͰΧελϜλάΛ࡞ΕΔ
    Α͏ʹͳΓ·͢ɻ
    android:id="@+id/fragment_home"
    android:name="jp.wasabeef.navplayground.home.HomeFragment"
    android:label="HomeFragment"
    tools:layout="@layout/fragment_home">
    android:id="@+id/to_dashboard"
    app:destination="@id/fragment_dashboard" "/>
    "
    

    View Slide

39. 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)
    }
    }
    

    View Slide

40. 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)
    }
    }
    

    View Slide

41. ՝୊
    

    View Slide

42. ՝୊0
    • ՝୊Ͱ࢖͏ίʔυͪ͜ΒͰ͢ɻ

    https://github.com/wasabeef/NavPlayground

    

    git clone git@github.com:wasabeef/NavPlayground.git

    

    

    Ϟδϡʔϧߏ੒

    app-step0 = ࡞ۀ༻Ϟδϡʔϧ
    

    View Slide

43. ՝୊
    • ՝୊1

    Navigation Խͯ͠ɺHome -> DashboardΛભҠͤ͞·͠ΐ͏ɻ

    ՝୊1.5 ભҠ࣌ͷΞχϝʔγϣϯΛ௥Ճͯ͠Έ·͠ΐ͏ɻ
    • ՝୊2

    Λ࢖ͬͯ Dashboard ʹ id:String, name:String, location:String Λ౉ͯ͠Έ·͠ΐ͏ɻ
    • ՝୊3

    Λ࢖ͬͯ 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"
    

    View Slide

44. ՝୊ʢ͕࣌ؒ͋Ε͹ʣ
    • ՝୊4

    Λ࢖ͬͯάϥϑΛ෼ׂͯ͠Έ·͠ΐ͏ɻ

    • ՝୊5

    BottomNavigation ͷ࣮૷Λ Navigation Λ࢖ͬͯΈ·͠ΐ͏ɻ
    

    View Slide

45. ౴͑
    • ՝୊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
    

    View Slide

46. ࢀߟࢿྉ
    • 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
    •
    

    View Slide