配合 Toolbar
在 BottomNavigationActivity 中添加 Toolbar,修改主题为 NoActionBar 的。
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_bottom_navigation)
val navHostFragment = nav_fragment as NavHostFragment
NavigationUI.setupWithNavController(navigation, navHostFragment.navController)
setSupportActionBar(toolbar)
NavigationUI.setupWithNavController(toolbar, navHostFragment.navController) // 关联 Toolbar 和 NavController
}
// 重写方法,按下 Toolbar 的返回键弹出一个 Fragment
override fun onSupportNavigateUp() =
findNavController(nav_fragment).navigateUp()
Toolbar 的 title 是 destination 的 label,start destination 没有返回箭头。
配合 NavigationView
原本 NavigationActivity 用的 layout 是 activity_navigation.xml,现在将其改成 activity__navigation_drawer.xml,内容为:
<!-- activity_navigation_drawer.xml -->
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="@layout/activity_navigation"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<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"
app:itemIconTint="#ff0000"
app:headerLayout="@layout/nav_header_nd"
app:menu="@menu/navigation_drawer" />
</android.support.v4.widget.DrawerLayout>
通过 include 引入原来的 activity_navigation.xml,menu/navigation_drawer.xml 为:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<group android:checkableBehavior="single">
<item
android:id="@id/nav_graph_first_fragment"
android:icon="@drawable/ic_home_black_24dp"
android:title="first" />
</group>
<item android:title="Communicate">
<menu>
<item
android:id="@id/nav_graph_second_fragment"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="second" />
</menu>
</item>
</menu>
和 BottomNavigationView 一样使用,id 和 destination 的 id 一致。
class NavigationActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_navigation_drawer)
withBottomNavigationView.onClick { startActivity<BottomNavigationActivity>() }
val navController = Navigation.findNavController(this, R.id.nav_fragment) // id 是 include 的 activity_navigation 里的 NavHostFragment 的 id
NavigationUI.setupWithNavController(nav_view, navController) // 关联
}
}
navigation_drawer.gif
监听
在 NavController 上 addOnNavigatedListener() 添加一个 OnNavigatedListener。
navController.addOnNavigatedListener { _, destination ->
// 切换到了哪个 destination,参数 destination 就是哪个
}
subgraph 和 include
在 design 视图上,按住 Shift 键选择多个 destination,右击选择 Move to Nested Graph > New Graph
navigation_nested.gif
看 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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/bottom_nav_graph"
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name="pot.ner347.androiddemo.navigation.HomeFragment"
android:label="fragment_home"
tools:layout="@layout/fragment_home" >
<action
android:id="@+id/action_homeFragment_to_notificationFragment"
app:destination="@id/navigation2" />
<action
android:id="@+id/action_homeFragment_to_dashboardFragment"
app:destination="@id/navigation2" />
</fragment>
<navigation android:id="@+id/navigation2"
app:startDestination="@id/dashboardFragment">
<fragment
android:id="@+id/notificationFragment"
android:name="pot.ner347.androiddemo.navigation.NotificationFragment"
android:label="fragment_notification"
tools:layout="@layout/fragment_notification" />
<fragment
android:id="@+id/dashboardFragment"
android:name="pot.ner347.androiddemo.navigation.DashboardFragment"
android:label="fragment_dashboard"
tools:layout="@layout/fragment_dashboard">
<action
android:id="@+id/action_dashboardFragment_to_notificationFragment"
app:destination="@id/notificationFragment" />
</fragment>
</navigation>
</navigation>
内部多了个 <navigation>
节点,startDestination 是 dashboardFragment,而 homeFragment 的两个 action 都指向了这个新的 navigation。修改 HomeFragment 的代码
homeToDashboard.onClick {
NavHostFragment.findNavController(this@HomeFragment)
.navigate(R.id.navigation2) // 用子 graph 的 id
}
homeToNotification.onClick {
Navigation.findNavController(view)
.navigate(R.id.action_homeFragment_to_notificationFragment)
// 还用原来的 action 的 id,名字最好改下
}
两个方法都到了 DashboardFragment,因为去的是 sub graph(navigation2),而 dashboardFragment 是 start destination。
除了嵌套外,还可以把 subgraph 单独移出来作为一个文件,然后原来地方使用 include 引入,比如创建 bottom_nav_sub_graph.xml:
<!-- bottom_nav_sub_graph.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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/navigation2"
app:startDestination="@id/dashboardFragment">
<fragment
android:id="@+id/notificationFragment"
android:name="pot.ner347.androiddemo.navigation.NotificationFragment"
android:label="fragment_notification"
tools:layout="@layout/fragment_notification" />
<fragment
android:id="@+id/dashboardFragment"
android:name="pot.ner347.androiddemo.navigation.DashboardFragment"
android:label="fragment_dashboard"
tools:layout="@layout/fragment_dashboard">
<action
android:id="@+id/action_dashboardFragment_to_notificationFragment"
app:destination="@id/notificationFragment" />
</fragment>
</navigation>
<!-- bottom_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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/bottom_nav_graph"
app:startDestination="@id/homeFragment">
<fragment
android:id="@+id/homeFragment"
android:name="pot.ner347.androiddemo.navigation.HomeFragment"
android:label="fragment_home"
tools:layout="@layout/fragment_home" >
<action
android:id="@+id/action_homeFragment_to_notificationFragment"
app:destination="@id/navigation2" />
<action
android:id="@+id/action_homeFragment_to_dashboardFragment"
app:destination="@id/navigation2" />
</fragment>
<include app:graph="@navigation/bottom_nav_sub_graph"/>
</navigation>
效果完全一样。