Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Navigation Architecture Component(京都Devかふぇ バージョン)

753 views

Published on

京都Devかふぇ#2 〜WWDC & Google IO総復習会〜
https://kyoto-dev-cafe.connpass.com/event/89875/
でのIO枠発表資料です。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Navigation Architecture Component(京都Devかふぇ バージョン)

  1. 1. Navigation Architecture Component 2018/06/15 Dev #2 WWDC & Google IO tech vein (@kwmt27)
  2. 2. Who are you? ▸ ( ) ▸ tech vein ( ) ▸ (Android iOS) ▸ GitHub: kwmt twitter: kwmt27 ▸ Google I/O2018 2
  3. 3. 3 RPG ChiiQ Android/iOS
  4. 4. 4 https://www.slideshare.net/yasi_life/navigation-architecture-component
  5. 5. ▸ Navigation & Navigation 5 ▸ Navigation ▸ ▸ ▸ ▸ Google IO 2018 ←
  6. 6. ▸ 6 ▸ Navigation ▸ Navigation ▸ New Destination Type ▸ Navigation Architecture Component
  7. 7. /37Navigation 7
  8. 8. /37Navigation ▸ ▸ 1.0.0-alpha02 (6/7 updated) 8
  9. 9. /37Navigation ▸ Fragment ▸ DeepLink ▸ ▸ 9 Navigation
  10. 10. ▸ Navigation & Navigation 10 ▸ Navigation ▸ ▸ ▸ ▸ Google IO 2018
  11. 11. /37Navigation ▸ 11 implementation 'android.arch.navigation:navigation-fragment:1.0.0-alpha02' implementation ‘android.arch.navigation:navigation-ui:1.0.0-alpha02' implementation ‘android.arch.navigation:navigation-fragment-ktx:1.0.0-alpha02’ implementation ‘android.arch.navigation:navigation-ui-ktx:1.0.0-alpha02’ classpath 'android.arch.navigation:navigation-safe-args-gradle-plugin:1.0.0-alpha02' ▸ Navigation Drawer Bottom Navigation ▸ Kotlin ▸ Safe Args Gradle
  12. 12. /37Navigation 12 ▸ ▸ Destination ▸ Destination Fragment Activity
  13. 13. /37Navigation ▸ Android Studio 3.2 ▸ ▸ navigation ▸ xml 13
  14. 14. /37Navigation 14
  15. 15. /37Navigation 15 action
  16. 16. /37 <navigation … app:startDestination="@id/homeFragment"> <fragment android:id="@+id/homeFragment" android:name=“net.kwmt27.codesearch.ui.HomeFragment"> <action android:id="@+id/nextAction" app:destination="@id/nextFragment" /> </fragment> <fragment android:id=“@+id/nextFragment“ android:name="net.kwmt27.codesearch.ui.NextFragment"/> </navigation> <navigation … app:startDestination="@id/homeFragment"> <fragment android:id="@+id/homeFragment" android:name=“net.kwmt27.codesearch.ui.HomeFragment"> <action android:id="@+id/nextAction" app:destination="@id/nextFragment" /> </fragment> <fragment android:id=“@+id/nextFragment“ android:name="net.kwmt27.codesearch.ui.NextFragment"/> </navigation> Navigation 16 <navigation … app:startDestination="@id/homeFragment"> <fragment android:id="@+id/homeFragment" android:name=“net.kwmt27.codesearch.ui.HomeFragment"> <action android:id="@+id/nextAction" app:destination="@id/nextFragment" /> </fragment> <fragment android:id=“@+id/nextFragment“ android:name="net.kwmt27.codesearch.ui.NextFragment"/> </navigation> <navigation … app:startDestination="@id/homeFragment"> <fragment android:id="@+id/homeFragment" android:name=“net.kwmt27.codesearch.ui.HomeFragment"> <action android:id="@+id/nextAction" app:destination="@id/nextFragment" /> </fragment> <fragment android:id=“@+id/nextFragment“ android:name="net.kwmt27.codesearch.ui.NextFragment"/> </navigation> <navigation … app:startDestination="@id/homeFragment"> <fragment android:id="@+id/homeFragment" android:name=“net.kwmt27.codesearch.ui.HomeFragment"> <action android:id="@+id/nextAction" app:destination="@id/nextFragment" /> </fragment> <fragment android:id=“@+id/nextFragment“ android:name="net.kwmt27.codesearch.ui.NextFragment"/> </navigation>
  17. 17. /37Navigation 17 NavHost
  18. 18. /37Navigation 18 <LinearLayout…> <android.support.v7.widget.Toolbar … /> <fragment… android:id="@+id/my_nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/mobile_navigation" app:defaultNavHost="true" /> <android.support.design.widget.BottomNavigationView…/> </LinearLayout> <LinearLayout…> <android.support.v7.widget.Toolbar … /> <fragment… android:id="@+id/my_nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/mobile_navigation" app:defaultNavHost="true" /> <android.support.design.widget.BottomNavigationView…/> </LinearLayout> <LinearLayout…> <android.support.v7.widget.Toolbar … /> <fragment… android:id="@+id/my_nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/mobile_navigation" app:defaultNavHost="true" /> <android.support.design.widget.BottomNavigationView…/> </LinearLayout> <LinearLayout…> <android.support.v7.widget.Toolbar … /> <fragment… android:id="@+id/my_nav_host_fragment" android:name="androidx.navigation.fragment.NavHostFragment" app:navGraph="@navigation/mobile_navigation" app:defaultNavHost="true" /> <android.support.design.widget.BottomNavigationView…/> </LinearLayout>
  19. 19. /37Navigation 19 val button: Button = view.findViewById(R.id.next) button.setOnClickListener { Navigation.findNavController(it).navigate(R.id.nextFragment) } R.id.nextAction action id ▸ NavController#navigate ▸ NavController ▸ Navigation#findNavController
  20. 20. /37Navigation 20 <android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" … > <LinearLayout …> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" … /> <fragment android:id="@+id/main_nav_host_fragment" android:name=“androidx.navigation.fragment.NavHostFragment" app:defaultNavHost="true" app:navGraph="@navigation/nav_main" /> </LinearLayout> <android.support.design.widget.NavigationView android:id="@+id/nav_view" … app:menu="@menu/menu_nav_drawer" /> </android.support.v4.widget.DrawerLayout> <android.support.v4.widget.DrawerLayout android:id="@+id/drawer_layout" … > <LinearLayout …> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" … /> <fragment android:id="@+id/main_nav_host_fragment" android:name=“androidx.navigation.fragment.NavHostFragment" app:defaultNavHost="true" app:navGraph="@navigation/nav_main" /> </LinearLayout> <android.support.design.widget.NavigationView android:id="@+id/nav_view" … app:menu="@menu/menu_nav_drawer" /> </android.support.v4.widget.DrawerLayout>
  21. 21. /37Navigation 21 <menu …> <item android:id=“@id/homeFragment" …/> <item android:id=“@id/nextFragment" … /> </menu> Navigation Graph Destination id
  22. 22. /37 class MainActivity : AppCompatActivity() { private lateinit var drawerLayout: DrawerLayout override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.main_activity) val toolbar: Toolbar = findViewById(R.id.toolbar) setSupportActionBar(toolbar) drawerLayout = findViewById(R.id.drawer_layout) findNavController(R.id.main_nav_host_fragment).apply { val navView : NavigationView = findViewById(R.id.nav_view) NavigationUI.setupWithNavController(navView, this) NavigationUI.setupActionBarWithNavController( this@MainActivity, this, drawerLayout) } } override fun onSupportNavigateUp(): Boolean = navigateUp( drawerLayout, Navigation.findNavController(this, R.id.main_nav_host_fragment) ) } Navigation 22 class MainActivity : AppCompatActivity() { private lateinit var drawerLayout: DrawerLayout override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.main_activity) val toolbar: Toolbar = findViewById(R.id.toolbar) setSupportActionBar(toolbar) drawerLayout = findViewById(R.id.drawer_layout) findNavController(R.id.main_nav_host_fragment).apply { val navView : NavigationView = findViewById(R.id.nav_view) NavigationUI.setupWithNavController(navView, this) NavigationUI.setupActionBarWithNavController( this@MainActivity, this, drawerLayout) } } override fun onSupportNavigateUp(): Boolean = navigateUp( drawerLayout, Navigation.findNavController(this, R.id.main_nav_host_fragment) ) } DrawerLatyoute NavigationVIew ActionBar NavController
  23. 23. /37Navigation ▸ Bundle ▸ Safe Args Gradle 23
  24. 24. /37Navigation 24 apply plugin: 'com.android.application' apply plugin: 'androidx.navigation.safeargs' classpath 'android.arch.navigation:navigation-safe-args-gradle-plugin:1.0.0-alpha02' build.gradle app/build.gradle
  25. 25. /37Navigation 25 <fragment android:id="@+id/nextFragment" android:name="net.kwmt27.codesearch.ui.repository.NextFragment" android:label="@string/title_repository" tools:layout="@layout/next_fragment" > <argument android:name="step" android:defaultValue="1" app:type="integer"/> </fragment>
  26. 26. /37Navigation ▸ Fragment + Directions ▸ ( )HomeFragmentDirections ▸ Fragment + Args ▸ ( )NextFragmentArgs 26
  27. 27. /37Navigation ▸ 27 button.setOnClickListener { val action = HomeFragmentDirections.nextAction().setStep(5) Navigation.findNavController(it).navigate(action) } val step = arguments?.let { val safeArgs = NextFragmentArgs.fromBundle(it) safeArgs.step } ▸
  28. 28. /37Navigation ▸ 28 PendingIntent deeplink = Navigation.findNavController(v).createDeepLink() .setDestination(R.id.android) .setArguments(args) .createPendingIntent();
  29. 29. /37Navigation ▸ URL 29 <fragment android:id="@+id/deepLinkFragment" android:name="net.kwmt27.codesearch.ui.DeepLinkFragment"> <argument android:name="myarg" android:defaultValue="Android!"/> <deepLink app:uri="www.example.com/{myarg}"/> </fragment> <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_main"/> </activity> ▸ Navigation Graph ▸ AndroidManifest
  30. 30. ▸ Navigation & Navigation 30 ▸ Navigation ▸ ▸ ▸ ▸ Google IO 2018
  31. 31. /37 ▸ https://issuetracker.google.com/issues/79672220 ▸ navigateForResult ▸ 5/15 31 ▸ https://issuetracker.google.com/issues/80267254 ▸ 5/25
  32. 32. /37 ▸ https://issuetracker.google.com/issues/79665225 ▸ 5/14 32 ▸ https://issuetracker.google.com/issues/79993862 ▸ 5/19
  33. 33. ▸ Navigation & Navigation 33 ▸ Navigation ▸ ▸ ▸ ▸ Google IO 2018
  34. 34. /37 ▸ Navigation ▸ Navigation Graph ▸ ▸ ▸ 34
  35. 35. /37 ▸ Implement navigation with the Navigation Architecture Component ▸ https://developer.android.com/topic/libraries/architecture/ navigation/navigation-implementing ▸ Codelabs ▸ https://codelabs.developers.google.com/codelabs/android- navigation/index.html?index=..%2F..%2Findex#2 ▸ Issue Tracker ▸ https://issuetracker.google.com/issues?q=componentid: 409828%20status:open&p=1 35
  36. 36. ▸ Navigation & Navigation 36 ▸ Navigation ▸ ▸ ▸ ▸ Google IO 2018 ←
  37. 37. /3737

×