使用NavigationUI更新UI組件

導航架構組件包括一個NavigationUI 類。此類包含使用頂部應用欄，導航抽屜和底部導航管理導航的靜態方法。

1、聽取導航事件

與the進行交互NavController 是在目的地之間導航的主要方法。該NavController 負責更換的內容NavHost 與新的目的地。在許多狀況下，UI元素 - 例如頂級應用欄或其餘持久性導航控件在BottomNavigationBar外部也是如此 - NavHost須要在目標之間導航時進行更新。

NavController提供了一個OnDestinationChangedListener當被稱爲接口NavController的當前目標 或它的參數改變。能夠經過該addOnDestinationChangedListener() 方法註冊新的偵聽器 ，以下面的示例所示。請注意，在調用時 addOnDestinationChangedListener()，若是當前目標存在，則會當即將其發送給您的偵聽器。

navController.addOnNavigatedListener(new NavController.OnNavigatedListener() {
 @Override
 public void onNavigated(@NonNull NavController navController,
 @NonNull NavDestination destination,
 @Nullable Bundle arguments) {
 textView.setText(destination.getLabel());
 }
});
複製代碼

NavigationUI用於OnDestinationChangedListener使這些常見的UI組件具備導航感知功能。但請注意，您也能夠單獨使用 OnDestinationChangedListener它來使任何自定義UI或業務邏輯瞭解導航事件。

2、 熱門應用欄

頂部應用欄在應用頂部 提供了一致的位置，用於顯示當前屏幕的信息和操做。

NavigationUI包含在用戶瀏覽應用時自動更新頂部應用欄中內容的方法。例如，NavigationUI使用導航圖中的目標標籤可使頂部應用欄的標題保持最新。

使用NavigationUI下面討論的頂級應用欄方法時，可使用{argName}標籤中的格式從提供給目標的參數中自動填充附加到目標的標籤。

NavigationUI 提供如下頂級應用欄類型的支持：

1.Toolbar 2.CollapsingToolbarLayout 3.ActionBar AppBarConfiguration

三 、AppBarConfiguration

NavigationUI使用AppBarConfiguration 對象來管理應用程序顯示區域左上角的「導航」按鈕的行爲。默認狀況下，當用戶位於導航圖的頂級目標位置時，導航按鈕將隱藏，並在任何其餘目標位置顯示爲「向上」按鈕。

要將導航圖的起始目的地用做惟一的頂級目的地，您能夠建立一個AppBarConfiguration對象並傳入相應的導航圖，以下所示：

val appBarConfiguration = AppBarConfiguration(navController.graph)） 
複製代碼

若是要自定義哪些目標被視爲頂級目標，則能夠將一組目標ID傳遞給構造函數，以下所示：

val appBarConfiguration = AppBarConfiguration(setOf(R.id.main, R.id.android)) 
複製代碼

4、建立工具欄

要建立工具欄NavigationUI，首先在主活動中定義欄，以下所示：

<LinearLayout>
 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar" />
 <fragment
 android:id="@+id/nav_host_fragment"
 ... />
 ...
</LinearLayout>
複製代碼

接下來，setupWithNavController() 從您的主要活動的onCreate()方法調用，以下所示：

override fun onCreate(savedInstanceState: Bundle?) {
 setContentView(R.layout.activity_main)
 ...
 val navController = findNavController(R.id.nav_host_fragment)
 val appBarConfiguration = AppBarConfiguration(navController.graph)
 findViewById<Toolbar>(R.id.toolbar)
 .setupWithNavController(navController, appBarConfiguration)
}   
複製代碼

注意：使用a時Toolbar，導航會自動處理「導航」按鈕的單擊事件，所以您無需覆蓋onSupportNavigateUp()。

包括CollapsingToolbarLayout

要CollapsingToolbarLayout在工具欄中添加a ，請先在主要活動中定義工具欄和周圍佈局，以下所示：

<LinearLayout>
 <android.support.design.widget.AppBarLayout
 android:layout_width="match_parent"
 android:layout_height="@dimen/tall_toolbar_height">
 <android.support.design.widget.CollapsingToolbarLayout
 android:id="@+id/collapsing_toolbar_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:contentScrim="?attr/colorPrimary"
 app:expandedTitleGravity="top"
 app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
 <android.support.v7.widget.Toolbar
 android:id="@+id/toolbar"
 android:layout_width="match_parent"
 android:layout_height="?attr/actionBarSize"
 app:layout_collapseMode="pin"/>
 </android.support.design.widget.CollapsingToolbarLayout>
 </android.support.design.widget.AppBarLayout>
 <fragment
 android:id="@+id/nav_host_fragment"
 ... />
 ...
</LinearLayout>
複製代碼

接下來，setupWithNavController() 從您的主要活動的onCreate方法調用，以下所示

override fun onCreate(savedInstanceState: Bundle?) {
 setContentView(R.layout.activity_main)
 ...
 val layout = findViewById<CollapsingToolbarLayout>(R.id.collapsing_toolbar_layout)
 val toolbar = findViewById<Toolbar>(R.id.toolbar)
 val navController = findNavController(R.id.nav_host_fragment)
 val appBarConfiguration = AppBarConfiguration(navController.graph)
 layout.setupWithNavController(toolbar, navController, appBarConfiguration)
}
複製代碼

5、行動吧

要使用默認操做欄包含導航支持，請setupActionBarWithNavController() 從主活動的onCreate()方法中調用 ，以下所示。請注意，您須要聲明您的AppBarConfiguration外部onCreate()，由於您在覆蓋時也使用它onSupportNavigateUp()：

private lateinit var appBarConfiguration: AppBarConfiguration
...
override fun onCreate(savedInstanceState: Bundle?) {
 ...
 val navController = findNavController(R.id.nav_host_fragment)
 appBarConfiguration = AppBarConfiguration(navController.graph)
 setupActionBarWithNavController(navController, appBarConfiguration)
}
複製代碼

接下來，覆蓋onSupportNavigateUp()以處理向上導航：

override fun onSupportNavigateUp(): Boolean {
 return navController.navigateUp(appBarConfiguration) || super.onSupportNavigateUp()
}
複製代碼

6、將目的地綁定到菜單項

NavigationUI還提供了將目標綁定到菜單驅動的UI組件的幫助程序。NavigationUI包含一個輔助方法，onNavDestinationSelected()它MenuItem與NavController託管關聯目標的方法 一塊兒使用 。若是id在的MenuItem比賽的id目標時，NavController能夠而後導航到目的地。

做爲一個例子，下面的XML片段定義一個菜單項，並具備共同的目的地id，details_page_fragment：

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:android="http://schemas.android.com/apk/res/android"
 ... >
 ...
 <fragment android:id="@+id/details_page_fragment"
 android:label="@string/details"
 android:name="com.example.android.myapp.DetailsFragment" />
</navigation>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
 ...
 <item
 android:id="@id/details_page_fragment"
 android:icon="@drawable/ic_details"
 android:title="@string/details" />
</menu>
複製代碼

onCreateOptionsMenu()例如，若是您的菜單是經過活動添加的，則能夠經過覆蓋onOptionsItemSelected()要呼叫的活動來將菜單項與目的地相關聯onNavDestinationSelected()，以下所示：

override fun onOptionsItemSelected(item: MenuItem): Boolean {
 val navController = findNavController(R.id.nav_host)
 return item.onNavDestinationSelected(navController) || super.onOptionsItemSelected(item)
}
複製代碼

如今，當用戶單擊details_page_fragment菜單項時，應用程序會自動導航到相應的目標位置id。

7、添加導航抽屜

導航抽屜是一個UI面板，顯示應用程序的主導航菜單。當用戶觸摸

應用欄中的抽屜圖標或用戶從屏幕的左邊緣滑動手指時，抽屜出現

抽屜圖標顯示在使用a的全部頂級目標上DrawerLayout。頂級目標是應用程序的根級目標。它們不會在應用欄中顯示「向上」按鈕。

要添加導航抽屜，請先將a聲明 DrawerLayout爲根視圖。在其中DrawerLayout，添加主UI內容的佈局和包含導航抽屜內容的另外一個視圖。

例如，如下佈局使用DrawerLayout帶有兩個子視圖：a NavHostFragment用於包含主要內容，a NavigationView 用於包含 導航抽屜的內容

<?xml version="1.0" encoding="utf-8"?>
<!-- Use DrawerLayout as root container for activity -->
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 android:id="@+id/drawer_layout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:fitsSystemWindows="true">
 <!-- Layout to contain contents of main body of screen (drawer will slide over this) -->
 <fragment
 android:name="androidx.navigation.fragment.NavHostFragment"
 android:id="@+id/nav_host_fragment"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:defaultNavHost="true"
 app:navGraph="@navigation/nav_graph" />
 <!-- Container for contents of drawer - use NavigationView to make configuration easier -->
 <android.support.design.widget.NavigationView
 android:id="@+id/nav_view"
 android:layout_width="wrap_content"
 android:layout_height="match_parent"
 android:layout_gravity="start"
 android:fitsSystemWindows="true" />
</android.support.v4.widget.DrawerLayout>
複製代碼

接下來，DrawerLayout 經過將其傳遞到導航圖，將其鏈接到AppBarConfiguration，以下所示：

AppBarConfiguration = new AppBarConfiguration.Builder(navController.getGraph())
.setDrawerLayout(drawerLayout)
.build();
複製代碼

注意：使用時NavigationUI，頂部應用欄幫助器會在當前目標更改時自動在抽屜圖標和「向上」圖標之間切換。你不須要使用 ActionBarDrawerToggle。

想學習更多Android知識，或者獲取相關資料請加入Android開發交流羣：1018342383。 有面試資源系統整理分享，Java語言進階和Kotlin語言與Android相關技術內核，APP開發框架知識， 360°Android App全方位性能優化。Android前沿技術，高級UI、Gradle、RxJava、小程序、Hybrid、 移動架構師專題項目實戰環節、React Native、等技術教程！架構師課程、NDK模塊開發、 Flutter等全方面的 Android高級實踐技術講解。還有在線答疑