Android Jetpack: Navigationを使ってみる

Transcript

1. Android Jetpack: Navigationを使っ
   てみる
   Google I/O 2018 わいわい報告会
   @teshi04
   

   View Slide

2. About me
   てし @teshi04
   Yui Matuura
   Mercari/Marpay
   

   View Slide

3. Android Jetpack
   

   View Slide

4. Jetpack: Architecture
   ● Databinding
   ● Lifecycles
   ● LiveData
   ● Navigation new!
   ● Paging new!
   ● Room
   ● ViewModel
   ● WorkManager new!
   

   View Slide

5. デモ
   

   View Slide

6. View Slide

7. Navigationの課題
   ● Fragment Transition
   ● Passing Arguments
   ● Deep Links
   ● Up and Back
   ● Testing
   ● Error-prone Boilerplate
   

   View Slide

8. Architecture: Navigation
   ビジュアルツールとXML
   ● Navigation Actions
   ● Arguments
   ● Animation
   ● Up behavior
   ● Deep Link
   no more Fragment Transaction!
   

   View Slide

9. Gradle Dependency
   allprojects {
   repositories {
   google()
   jcenter()
   }
   }
   implementation 'android.arch.navigation:navigation-fragment:1.0.0-alpha01'
   implementation 'android.arch.navigation:navigation-ui:1.0.0-alpha01'
   

   View Slide

10. NavHostFragmentを追加
    activity_main.xml
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/my_nav_host_fragment"
    android:name="androidx.navigation.fragment.NavHostFragment"
    app:navGraph="@navigation/mobile_navigation"
    app:defaultNavHost="true" />
    

    View Slide

11. Navigation Graph
    

    View Slide

12. Actionを設定する
    

    View Slide

13. Actionを設定する
    

    View Slide

14. Navigation Graph（XML）
    mobile_navigation.xml
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    app:startDestination="@+id/launcher_home">
    android:id="@+id/launcher_home"
    android:name="com.example.android.codelabs.navigation.MainFragment"
    android:label="@string/home"
    tools:layout="@layout/main_fragment">
    android:id="@+id/next_action"
    app:destination="@id/flow_step_one"
    ...
    app:popExitAnim="@anim/slide_out_right" />
    
    android:id="@+id/flow_step_one"
    android:name="com.example.android.codelabs.navigation.FlowStepFragment"
    tools:layout="@layout/flow_step_one_fragment"/>
    ...
    

    View Slide

15. NavControllerで遷移する
    MainFragment.kt
    transactionsButton.setOnClickListener { view ->
    Navigation.findNavController(view).navigate(R.id.next_action)
    }
    

    View Slide

16. まとめ
    ● Android Jetpack: Navigationのメリット
    ○ 画面遷移が可視化できる
    ○ FragmentTransition, Animationが簡単とか
    ● Jetpack。手段の一つでしかない。使うか使わないかは
    アプリの次第だと思う
    

    View Slide

17. 参考リンク
    ● 「Android Jetpack: manage UI navigation with Navigation
    Controller (Google I/O '18)
    https://www.youtube.com/watch?v=8GCXtCjtg40
    ● Sample
    https://github.com/googlesamples/android-architecture-c
    omponents/tree/master/NavigationBasicSample
    ● Navigation Codelab
    https://codelabs.developers.google.com/codelabs/androi
    d-navigation/index.html
    ● ドキュメント
    https://developer.android.com/topic/libraries/architecture/
    navigation/
    

    View Slide

18. Thanks!
    

    View Slide