Android Jetpack -- navigation

看到這些部落格的時候，相信小夥伴們已經看了不少的有關于Android Jetpack的知識了，關于Jetpack的原理，有些文章講的很好，這裡就不重複了，此系列的部落格，旨在通過一些很簡單的小demo，和大家一起熟悉最基本的用法~

Android Jetpack -- Lifecycle

Android Jetpack -- ViewModel & LiveData

Android Jetpack -- paging & room

Android Jetpack -- navigation

項目git位址：https://github.com/zhangtiansimple/jetpack_demo

------------------------------------------------------------------------------------------------------------------------

Navigation的引入在一定程度上優化了傳統的對于Fragment的控制，接下來看看Navigation的使用。

首先建立三個Fragment和它們的布局檔案

class Fragment1 : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment1, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        btn.setOnClickListener { Navigation.findNavController(it).navigate(R.id.action_page2) }
    }
}


class Fragment2 : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment2, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        btn_return.setOnClickListener { Navigation.findNavController(it).navigateUp() }
        btn_go.setOnClickListener { Navigation.findNavController(it).navigate(R.id.action_page3) }
    }
}

class Fragment3 : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.fragment3, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        //點選傳回page2
        btn.setOnClickListener { Navigation.findNavController(it).navigateUp() }
    }
}
           

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <TextView
            android:id="@+id/btn"
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="current page1, click to go page2"/>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <TextView
            android:id="@+id/btn_return"
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:text="current page2, click to return page1"
            android:layout_height="wrap_content"/>

    <TextView
            android:id="@+id/btn_go"
            android:layout_centerInParent="true"
            android:layout_width="wrap_content"
            android:text="current page2, click to go page3"
            android:layout_below="@+id/btn_return"
            android:layout_marginTop="20dp"
            android:layout_height="wrap_content"/>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <TextView
            android:id="@+id/btn"
            android:layout_centerInParent="true"
            android:text="current page3, click to return page2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>

</RelativeLayout>           

接着在res資源目錄下建立navigation路徑，并且建立nav_graph.xml檔案，xml檔案裡配置了fragment的行為關系

<?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"
            app:startDestination="@id/page1Fragment"
            tools:ignore="UnusedNavigation">

    <fragment
            android:id="@+id/page1Fragment"
            android:name="com.study.jetpacktest.navigation.Fragment1"
            android:label="fragment_page1"
            tools:layout="@layout/fragment1">
        <action
                android:id="@+id/action_page2"
                app:destination="@id/page2Fragment"/>
    </fragment>

    <fragment
            android:id="@+id/page2Fragment"
            android:name="com.study.jetpacktest.navigation.Fragment2"
            android:label="fragment_page2"
            tools:layout="@layout/fragment2">
        <action
                android:id="@+id/action_page1"
                app:popUpTo="@id/page1Fragment"/>
        <action
                android:id="@+id/action_page3"
                app:destination="@id/nav_graph_page3"/>
    </fragment>

    <navigation
            android:id="@+id/nav_graph_page3"
            app:startDestination="@id/page3Fragment">
        <fragment
                android:id="@+id/page3Fragment"
                android:name="com.study.jetpacktest.navigation.Fragment3"
                android:label="fragment_page3"
                tools:layout="@layout/fragment3"/>
    </navigation>

</navigation>           

最後是Activity，在Activity的布局檔案裡引入一個fragment作為根容器

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    <fragment
            android:id="@+id/my_nav_host_fragment"
            android:name="androidx.navigation.fragment.NavHostFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:defaultNavHost="true"
            app:navGraph="@navigation/nav_graph"/>

</LinearLayout>           

class NavigationActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_navigation)
    }

    override fun onSupportNavigateUp() =
        findNavController(this, R.id.my_nav_host_fragment).navigateUp()
}           

一個簡單的Navigation demo就寫好了