Day 12--Fragment Navigation

第 12 屆 iThome 鐵人賽

DAY 12

Mobile Development

程式初學:Android與Kotlin系列第 12 篇

12th鐵人賽

Kai

團隊好想工作室 v4.0

2020-09-27 00:45:51

1373 瀏覽

分享至

之前簡單試用了fragment,現在來加點東西
例如在TwoFragment頁面加一個button,點選可改顯示的值
這裡首先要注意的是,fragment中的動作須要寫在onActivityCreated()
是因爲與activity生命週期做的事情不一樣
如果寫在onCreate()會因爲畫面與元件還未inflate完成而報錯

所以先開啓TwoFragment.kt,按ctrl+o,找到並點選onViewCreated()
直接打code也可以

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        btn_twoChange.setOnClickListener {
            tv_two.text = "Changed!!"
        }
    }

我們將畫面新增了一個btn_twoChange button,按下後會把TwoFragment改變爲Changed!!
但切換fragment後,還是會顯示回TwoFragment
這是因爲每次切換fragment其實都是replace掉之前的fragment
再產生新的fragment

之後還需多研究fragment...

先來將專案改寫另一種使用navigation的方式看看吧

Navigation

首先在專案app,點右鍵新增一個android resource file
resource type選Navigation,其它如圖

按OK後,可能會出現如圖

意思是須要加入navigation library,按OK,andriod studio會自動在gradle app添加(或自行添加)

然後在activity.xml中,將原來的容器FrameLayout改爲fragment
這裡注意android:name="androidx.navigation.fragment.NavHostFragment"是固定用法

<fragment
        android:id="@+id/navHostFragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline"
        app:navGraph="@navigation/navigation">
    </fragment>

app:navGraph="@navigation/navigation"設定導航圖,也就是剛剛新增的navigation.xml

<?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" android:id="@+id/navigation">

</navigation>

接着就到navigation.xml開啓design頁面,呈現視覺化的fragment管理頁面

提示按下綠色+以新增fragment

app一開始的畫面就選fragment_one吧

有個小房子以及start字樣提示此fragment爲起始頁,xml也有寫
app:startDestination=
並且爲此頁面增加了一個<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"
    android:id="@+id/navigation"
    app:startDestination="@id/oneFragment">

    <fragment
        android:id="@+id/oneFragment"
        android:name="com.example.fragmentnavigation.OneFragment"
        android:label="fragment_one"
        tools:layout="@layout/fragment_one" />
</navigation>

需要哪些fragment,都加入頁面中

點選某一頁面時,會出現邊框,拖拉右側圓點會出現箭頭
意思就是要從此頁面到目的頁面

這個箭頭叫做action,會自動獲得id,例如從oneFragment到twoFragment,就是action_oneFragment_to_twoFragment,如下

<fragment
        android:id="@+id/oneFragment"
        android:name="com.example.fragmentnavigation.OneFragment"
        android:label="fragment_one"
        tools:layout="@layout/fragment_one" >
        <action
            android:id="@+id/action_oneFragment_to_twoFragment"
            app:destination="@id/twoFragment" />
    </fragment>
    <fragment
        android:id="@+id/twoFragment"
        android:name="com.example.fragmentnavigation.TwoFragment"
        android:label="fragment_two"
        tools:layout="@layout/fragment_two" />

到這原本在MainActivity.kt中button點擊所寫的supportFragmentManager就不適用了
要改用findNavController()

        val navController = this.findNavController(R.id.navHostFragment)
        
        btn_one.setOnClickListener {
            navController.navigate(R.id.twoFragment)
        }

        btn_two.setOnClickListener {
            navController.navigate(R.id.action_oneFragment_to_twoFragment)
        }

這裡測試二種方式
button_one的navController.navigate動作類似supportFragmentManager,也可以直接導航到目的fragment
button_two的navController.navigate則是將action作爲參數放入,而action主要還有動畫與popUpTo的屬性,popUpTo應該是用於多fragment時,管理back鍵要回到哪一個頁面,關於navigation的還有很多

本篇我們僅先試試動畫的部分

<action
            android:id="@+id/action_oneFragment_to_twoFragment"
            app:destination="@id/twoFragment"
            app:enterAnim="@android:anim/slide_in_left" />