Navigation 详解三

三流编程

发布于 2018-09-11 16:28:14

7910

发布于 2018-09-11 16:28:14

配合 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>

效果完全一样。

参考：

Implement navigation with the Navigation Architecture Component

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018.09.07 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度