Jetpack -- Navigation

簡介

• NavHost: 是一個存放頁面的容器，同時也是一個控制器(Activity /Fragment)
• NavController：切換頁面，需要定製切換路線
• NavGraph：利用圖形化的方式定製切換路線

Navigation組件配合ViewModel實現數據共享

1.首先創建一個Activity, 兩個Fragment以及一個ViewModel

fragment的xml如下

// fragment_home
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="data"
            type="com.wjx.android.jetpackdemo.navigation.MyViewModel" />
    </data>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:id="@+id/home_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@{String.valueOf(data.getNumber())}"
            android:textSize="18sp" />
        <Button
            android:id="@+id/home_btn_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/home_text"
            android:layout_centerHorizontal="true"
            android:onClick="@{()->data.add(1)}"
            android:text="add" />
        <Button
            android:id="@+id/home_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/home_btn_add"
            android:layout_centerHorizontal="true"
            android:text="home" />


    </RelativeLayout>
</layout>

// fragment_detail

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">
    <data>
        <variable
            name="data"
            type="com.wjx.android.jetpackdemo.navigation.MyViewModel" />
    </data>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


        <TextView
            android:id="@+id/detail_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@{String.valueOf(data.getNumber())}"
            android:textSize="18sp" />


        <Button
            android:id="@+id/detail_btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/detail_text"
            android:layout_centerHorizontal="true"
            android:text="detail" />


    </RelativeLayout>
</layout>

2.右鍵res目錄創建AndroidResource文件

3.打開my_nav_graph文件並點擊下圖中綠色箭頭將兩個fragment引入

• 並通過連線來實現頁面跳轉過程（點擊連線可以設置頁面進入退出動畫）

4.進入主Activity頁面佈局文件（選擇Containers下的NavHostFragment創建HostFragment)

5.之後將佈局四邊點擊圓圈，設置全屏顯示

6.創建ViewModel

class MyViewModel : ViewModel() {
    private var number: MutableLiveData<Int>? = null
    fun getNumber(): MutableLiveData<Int> {
        if (number == null) {
            number = MutableLiveData()
            number!!.value = 0
        }
        return number!!
    }


    fun add(x: Int) {
        number!!.value = number!!.value!! + x
    }
}

7.NavigationActivity實現

class NavigationActivity : AppCompatActivity() {


    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_navigation)
        var controller = Navigation.findNavController(this, R.id.fragment)
        NavigationUI.setupActionBarWithNavController(this, controller)
    }


    // 設置返回鍵
    override fun onSupportNavigateUp(): Boolean {
        var controller = Navigation.findNavController(this, R.id.fragment)
        return controller.navigateUp()
    }
}

8.實現HomeFragment和DetailFragment

class HomeFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var myViewModel = ViewModelProviders.of(activity!!).get(MyViewModel::class.java)
        var binding = DataBindingUtil.inflate<FragmentHomeBinding>(inflater, R.layout.fragment_home, container, false)
        binding.data = myViewModel
        binding.setLifecycleOwner(activity)
        binding.homeBtn.setOnClickListener {
            // 使用id佈局id轉發
           Navigation.findNavController(it).navigate(R.id.detailFragment)
            // 使用action跳轉
            Navigation.findNavController(it).navigate(R.id.action_homeFragment_to_detailFragment)
        }
        return binding.root
    }
}

class DetailFragment : Fragment() {
    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        var myViewModel = ViewModelProviders.of(activity!!).get(MyViewModel::class.java)
        var binding = DataBindingUtil.inflate<FragmentDetailBinding>(inflater, R.layout.fragment_detail, container, false)
        binding.data = myViewModel
        binding.setLifecycleOwner(activity)
        // 實現路由跳轉
        binding.detailBtn.setOnClickListener {
            Navigation.findNavController(it).navigate(R.id.homeFragment)
        }
        return binding.root


    }
}