3.3 使用Navigation

接下來，我們一起來學(xué)習(xí)如何使用Navigation。

3.3.1 創(chuàng)建Navigation Graph

新建一個(gè)Android項(xiàng)目后，依次選中res文件夾→New→Android Resource File，新建一個(gè)Navigation Graph文件。如圖3-1所示，將File name設(shè)置為“nav_graph”，Resource type設(shè)置為“Navigation”。

單擊“OK”按鈕，Navigation Graph就創(chuàng)建完成了。

所生成的nav_graph.xml文件與普通布局文件類似，也有Design和Text面板。在此，我們能在Destinations面板中，看見“No NavHostFragments found”的提示，如圖3-2所示。

需要注意的是，Navigation的使用需要依賴于相關(guān)支持庫，因此Android Studio可能會(huì)詢問你，是否自動(dòng)幫你添加相關(guān)依賴，單擊OK即可，如圖3-3所示。

當(dāng)然，你也可以在build.gradle文件中手動(dòng)添加依賴，示例如下。

3.3.2 添加NavHostFragment

NavHostFragment是一個(gè)特殊的Fragment，我們需要將其添加到Activity的布局文件中，作為其他Fragment的容器。

請(qǐng)注意，下面這一行代碼在告訴系統(tǒng)，這是一個(gè)特殊的Fragment。

將app:defaultNavHost屬性設(shè)置為true，則該Fragment會(huì)自動(dòng)處理系統(tǒng)返回鍵。即當(dāng)用戶按下手機(jī)的返回按鈕時(shí)，系統(tǒng)能自動(dòng)將當(dāng)前所展示的Fragment退出。

app:navGraph屬性用于設(shè)置該Fragment對(duì)應(yīng)的導(dǎo)航圖。

添加NavHostFragment之后，再回到導(dǎo)航圖上。此時(shí)，在Destinations面板中可以看見我們剛才設(shè)置的NavHostFragment，如圖3-4所示。

3.3.3 創(chuàng)建destination

依次單擊加號(hào)按鈕、“Create new destination”按鈕，創(chuàng)建一個(gè)destination，如圖3-5所示。

destination是“目的地”的意思，代表著你想去的頁面。它可以是Fragment或Activity，但最常見的是Fragment，因?yàn)镹avigation組件的作用是方便開發(fā)者在一個(gè)Activity中管理多個(gè)Fragment。在此，我們通過destination創(chuàng)建一個(gè)名為MainFragment的Fragment，如圖3-6所示。

接著，再次單擊加號(hào)按鈕，此時(shí)出現(xiàn)了我們剛才創(chuàng)建的MainFragment對(duì)應(yīng)的布局文件fragment_main，如圖3-7所示。單擊該文件。

面板中出現(xiàn)了一個(gè)mainFragment，如圖3-8所示。“Start”表示該MainFragment是起始Fragment，即NavHostFragment容器首先展示的Fragment。

單擊圖3-8左下方的Text面板，查看布局文件的內(nèi)容。

可以看到，在navigation標(biāo)簽下有一個(gè)startDestination屬性，該屬性指定起始destination為mainFragment。

運(yùn)行程序，可以看到一個(gè)空白的Fragment，即destination所指定的mainFragment，如圖3-9所示。

3.3.4 完成Fragment頁面切換

接下來看看Navigation如何幫助我們實(shí)現(xiàn)Fragment頁面的切換。

與創(chuàng)建MainFragment的方式類似，先創(chuàng)建一個(gè)SecondFragment。如圖3-10所示。

單擊mainFragment，用鼠標(biāo)選中其右側(cè)的圓圈，并拖拽至右邊的secondFragment，松開鼠標(biāo)，如圖3-11所示。

此時(shí)出現(xiàn)一個(gè)從mainFragment指向secondFragment的箭頭，如圖3-12所示。

切換到Text面板，查看布局文件。可以看到多了一個(gè)<action/>標(biāo)簽，app:destination屬性表示它的目的地是secondFragment。

3.3.5 使用NavControIIer完成導(dǎo)航

經(jīng)過以上步驟后，我們還需要通過NavController對(duì)象，在代碼中完成具體的頁面跳轉(zhuǎn)工作。

在MainFragment的布局文件中添加一個(gè)Button。

接著打開MainFragment，響應(yīng)這個(gè)按鈕的單擊事件，完成具體的頁面切換。需要注意的是，有兩種方式可以完成頁面的跳轉(zhuǎn)，代碼如下所示。

運(yùn)行應(yīng)用程序可以看到Fragment完成了切換，但切換沒有動(dòng)畫效果，顯得很生硬。Navigation組件考慮到了這一點(diǎn)，通過Android Studio，可以便捷地為頁面切換添加動(dòng)畫。

3.3.6 添加頁面切換動(dòng)畫效果

首先，在res/anim文件夾下加入常見的動(dòng)畫文件，如圖3-13所示。

接著，打開導(dǎo)航文件的Design面板，選中箭頭，并在右邊的Animations面板中為其設(shè)置動(dòng)畫文件，如圖3-14所示。

切換到Text面板，查看布局文件。可以看到它在<action/>標(biāo)簽中自動(dòng)為我們添加了動(dòng)畫的相關(guān)代碼。實(shí)際上，我們也可以直接在此編寫代碼，Design面板只是使用了可視化的方式以方便操作。

當(dāng)然，我們還可以通過NavOptions對(duì)象在Java或Kotlin代碼中，以代碼的方式為Fragment添加頁面切換動(dòng)畫，但導(dǎo)航圖是比較方便和直觀的方式。讀者若有興趣可以自己去嘗試，這里就不做過多的介紹了。

運(yùn)行應(yīng)用程序，此時(shí)切換頁面便可以看到動(dòng)畫效果。