来自arch的新导航组件,带有嵌套导航图

Ser*_*huk 24 android android-navigation android-architecture-components android-jetpack

我有一个案例,希望通过arch导航组件实现它.例如,我有2个导航图(主要和嵌套).我可以从嵌套中调用主图吗?如何?

dev*_*cca 38

关键是要获得在右图NavController中导航的权利.我们以此场景为例:

MainActivity
|- MainNavHost
   |- NavBarFragment
   |  |- NestedNavHost
   |  |  |-NestedContentFragment1
   |  |  |-NestedContentFragment2
   |  |
   |  |- BottomNavigationView
   |
   |- LoginFragment
Run Code Online (Sandbox Code Playgroud)

主图和嵌套图是在单独的xml文件中:据我所知,这是必需的,因为导航针对不同的布局区域,因此它们需要两个不同的NavHosts.每个人Navhost都需要通过id引用其图形,这要求它们位于不同的资源文件中.

关键是要在特定的图形中导航,我们必须得到对正确图形所有者的引用:为了做到这一点,在调用时Navigation.findNavController(view),view参数是至关重要的.

文件说

NavHostFragments在其视图子树的根目录下注册其导航控制器,以便任何后代可以通过Navigation帮助程序类的方法获取控制器实例

所以,例如,如果在NavBarFragment我们内部写

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    navController = Navigation.findNavController(view)
}
Run Code Online (Sandbox Code Playgroud)

这里view父母NestedNavHost(即嵌套NavHostFragment),没有后代,意思就是findNavController将在树搜索的上游和将返回MainNavHostNavController.

相反,我们写

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    val fragmentContainer = view.findViewById<View>(R.id.nestedNavHostFragment)
    navController = Navigation.findNavController(fragmentContainer)
}
Run Code Online (Sandbox Code Playgroud)

在布局中标签nestedNavHostFragment内的id fragment,我们得到正确的引用NestedNavHost,因为我们现在传递的视图findNavController属于NestedNavHost's子树.

同样,如果您需要从a NavController内部获取对main的引用NestedContentFragment,这是我们可以做的:

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    // we can get the innermost NavController using this view,
    // because we are inside its subtree:
    nestedNavController = Navigation.findNavController(view)

    // we can find the outer NavController passing the owning Activity
    // and the id of a view associated to that NavController,
    // for example the NavHostFragment id:
    mainNavController = Navigation.findNavController(activity!!, R.id.mainNavHostFragment)
}
Run Code Online (Sandbox Code Playgroud)

  • 终于弄清楚了......这很棘手,甚至在谷歌的开发者网站上也没有其他地方的文档。Google 给出的“嵌套导航”示例在同一 xml 中具有嵌套导航,并且您无法在 BottomNavFragment 中引用它。您必须有两个 xml 图。我发现它不太协调,一些导航源自嵌套片段内部,但要“以模态方式呈现”,因此您必须从父图“导航”它。 (2认同)

use*_*158 11

实际上,您可以使用全局操作从嵌套导航图目标导航到主导航图目标。

在主导航图中创建从嵌套导航图到所需目的地的全局操作(在下图中突出显示)

例子:

导航图

<navigation android:id="@+id/main_nav_graph"
     ... >
     <fragment android:id="@+id/fragStart" .../>
     <fragment .../>
     <fragment .../>

     <navigation  android:id="@+id/nested_nav_graph">
           ...

     <!-- Global Action -->
     <action
         android:id="@+id/action_global_start"
         app:destination="@id/fragStart" />
     </navigation>

</navigation>
Run Code Online (Sandbox Code Playgroud)

导航到主图目的地使用

findNavController().navigate(R.id.action_global_start)
Run Code Online (Sandbox Code Playgroud)

  • 刚刚回到这个问题,我想强调这并不是原始问题的解决方案。图形的嵌套位于视图级别,而不是导航级别,因此您需要 2 个 NavHost 来实现 OP 结构。您不能将图表嵌套在另一个图表中,您需要 2 个独立的图表,每个图表彼此都不知道,因此您无法将它们与全局操作链接起来。 (3认同)

Thr*_*ian 7

我使用 devrocca 提供的信息创建了一个答案。这是从头开始的完整答案,如果有人需要,我没有跳过任何内容。

导航的主要片段

这是导航的主要片段。相机是没有任何嵌套图的直接目的地,仪表板有它自己的嵌套图,但它被添加到相同的后台相机片段中。Home 有 3 个片段,带有它自己的导航主机

MainActivity
|- MainNavHost
   |- HomeNavHostFragment
   |  |- NestedNavHost
   |     |-HomeFragment1
   |     |-HomeFragment2
   |     |-HomeFragment3
   |  
   |- nav_graph_dashboard 
   |
   |- CameraFragment
Run Code Online (Sandbox Code Playgroud)

这是导航文件

主导航 nav_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/nav_graph"
        app:startDestination="@id/main_dest">

    <!-- MainFragment-->
    <fragment
            android:id="@+id/main_dest"
            android:name="com.smarttoolfactory.tutorial1_3navigation_nestednavhost.blankfragment.MainFragment"
            android:label="MainFragment"
            tools:layout="@layout/fragment_main">

        <!-- Camera -->
        <action
                android:id="@+id/action_main_dest_to_cameraFragment"
                app:destination="@id/cameraFragment" />

        <!-- Home NavGraph -->
        <action
                android:id="@+id/action_main_dest_to_nav_graph_home"
                app:destination="@id/nav_graph_home" />

        <!-- Dashboard  NavGraph-->
        <action
                android:id="@+id/action_main_dest_to_nav_graph_dashboard"
                app:destination="@id/nav_graph_dashboard" />

    </fragment>

    <!-- Camera -->
    <fragment
            android:id="@+id/cameraFragment"
            android:name="com.smarttoolfactory.tutorial1_3navigation_nestednavhost.blankfragment.CameraFragment"
            android:label="CameraFragment" />


    <!-- Home-->
    <include app:graph="@navigation/nav_graph_home" />

    <!-- Dashboard-->
    <include app:graph="@navigation/nav_graph_dashboard" />


    <!-- Global Action Start -->
    <action
            android:id="@+id/action_global_start"
            app:destination="@id/main_dest"
            app:popUpTo="@id/main_dest"
            app:popUpToInclusive="true" />


</navigation>
Run Code Online (Sandbox Code Playgroud)

仪表板嵌套导航图

<?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/nav_graph_dashboard"
        app:startDestination="@id/dashboard_dest">

    <fragment
            android:id="@+id/dashboard_dest"
            android:name="com.smarttoolfactory.tutorial1_3navigation_nestednavhost.blankfragment.DashboardFragment1"
            android:label="DashboardFragment1"
            tools:layout="@layout/fragment_dashboard1">
        <action
                android:id="@+id/action_dashboardFragment1_to_dashboardFragment2"
                app:destination="@id/dashboardFragment2" />
    </fragment>

    <fragment
            android:id="@+id/dashboardFragment2"
            android:name="com.smarttoolfactory.tutorial1_3navigation_nestednavhost.blankfragment.DashboardFragment2"
            android:label="DashboardFragment2"
            tools:layout="@layout/fragment_dashboard2">
    </fragment>

</navigation>
Run Code Online (Sandbox Code Playgroud)

以及带有自己的 NavHost nav_graph_home 的嵌套导航图

<?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/nav_graph_home"
        app:startDestination="@id/home_dest">

    <fragment
            android:id="@+id/home_dest"
            android:name="com.smarttoolfactory.tutorial1_3navigation_nestednavhost.blankfragment.HomeNavHostFragment"
            android:label="HomeHost"
            tools:layout="@layout/fragment_home_navhost" />

    <fragment
            android:id="@+id/homeFragment1"
            android:name="com.smarttoolfactory.tutorial1_3navigation_nestednavhost.blankfragment.HomeFragment1"
            android:label="HomeFragment1"
            tools:layout="@layout/fragment_home1">
        <action
                android:id="@+id/action_homeFragment1_to_homeFragment2"
                app:destination="@id/homeFragment2" />
    </fragment>

    <fragment
            android:id="@+id/homeFragment2"
            android:name="com.smarttoolfactory.tutorial1_3navigation_nestednavhost.blankfragment.HomeFragment2"
            android:label="HomeFragment2"
            tools:layout="@layout/fragment_home2">
        <action
                android:id="@+id/action_homeFragment2_to_homeFragment3"
                app:destination="@id/homeFragment3" />
    </fragment>

    <fragment
            android:id="@+id/homeFragment3"
            android:name="com.smarttoolfactory.tutorial1_3navigation_nestednavhost.blankfragment.HomeFragment3"
            android:label="HomeFragment3"
            tools:layout="@layout/fragment_home3" />

</navigation>
Run Code Online (Sandbox Code Playgroud)

布局,我只添加必要的布局,其他是带有按钮的简单布局,我添加了示例项目的链接,其中包含其他导航组件示例。

MainActivity


<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.coordinatorlayout.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">


        <com.google.android.material.appbar.AppBarLayout
                android:id="@+id/appbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:popupTheme="@style/ThemeOverlay.AppCompat.ActionBar" />

        </com.google.android.material.appbar.AppBarLayout>

        <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <androidx.fragment.app.FragmentContainerView
                    android:id="@+id/main_nav_host_fragment"
                    android:name="androidx.navigation.fragment.NavHostFragment"
                    android:layout_width="0dp"
                    android:layout_height="0dp"
                    app:layout_constraintLeft_toLeftOf="parent"
                    app:layout_constraintRight_toRightOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent"

                    app:defaultNavHost="true"
                    app:navGraph="@navigation/nav_graph"/>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </androidx.coordinatorlayout.widget.CoordinatorLayout>

</layout>
Run Code Online (Sandbox Code Playgroud)

主片段,这是图像中显示的第一个片段,用作主导航的开始

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/parentLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <Button
                android:id="@+id/btnDestCam"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Destination Camera"
                app:layout_constraintBottom_toTopOf="@+id/btnNavGraphHome"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintLeft_toRightOf="parent"
                app:layout_constraintRight_toLeftOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        <Button
                android:id="@+id/btnNavGraphHome"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Nested NavHost Graph Home"
                app:layout_constraintBottom_toTopOf="@+id/btnNavGraphDashboard"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintLeft_toRightOf="parent"
                app:layout_constraintRight_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/btnDestCam" />

        <Button
                android:id="@+id/btnNavGraphDashboard"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Nested Graph Dashboard"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintHorizontal_bias="0.5"
                app:layout_constraintLeft_toRightOf="parent"
                app:layout_constraintRight_toLeftOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/btnNavGraphHome" />


    </androidx.constraintlayout.widget.ConstraintLayout>


</layout>
Run Code Online (Sandbox Code Playgroud)

包含NavHostFragment用于主页导航的内部布局

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <androidx.fragment.app.FragmentContainerView
                android:id="@+id/nested_nav_host_fragment"
                android:name="androidx.navigation.fragment.NavHostFragment"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"

                app:defaultNavHost="false"
                app:navGraph="@navigation/nav_graph_home" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>
Run Code Online (Sandbox Code Playgroud)

MainActivity 用于检查主导航返回堆栈,这里重要的是

supportFragmentManager 返回堆栈在您导航时不会更新,即使对于主导航也是 childFragmentManager,即使您只有一个

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Get NavHostFragment
        val navHostFragment =
            supportFragmentManager.findFragmentById(R.id.main_nav_host_fragment)

        // ChildFragmentManager of NavHostFragment
        val navHostChildFragmentManager = navHostFragment?.childFragmentManager

        navHostChildFragmentManager?.addOnBackStackChangedListener {

            val backStackEntryCount = navHostChildFragmentManager.backStackEntryCount
            val fragments = navHostChildFragmentManager.fragments
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

包含主页导航主机的片段

class HomeNavHostFragment : BaseDataBindingFragment<FragmentHomeNavhostBinding>() {
    override fun getLayoutRes(): Int = R.layout.fragment_home_navhost

    private var navController: NavController? = null

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

        val nestedNavHostFragment =
            childFragmentManager.findFragmentById(R.id.nested_nav_host_fragment) as? NavHostFragment
        navController = nestedNavHostFragment?.navController

        navController?.navigate(R.id.homeFragment1)

        listenBackStack()
    }

    private fun listenBackStack() {

        // Get NavHostFragment
        val navHostFragment =
            childFragmentManager.findFragmentById(R.id.nested_nav_host_fragment)

        // ChildFragmentManager of the current NavHostFragment
        val navHostChildFragmentManager = navHostFragment?.childFragmentManager

        navHostChildFragmentManager?.addOnBackStackChangedListener {

            val backStackEntryCount = navHostChildFragmentManager!!.backStackEntryCount
            val fragments = navHostChildFragmentManager!!.fragments

            Toast.makeText(
                requireContext(),
                "HomeNavHost backStackEntryCount: $backStackEntryCount, fragments: $fragments",
                Toast.LENGTH_SHORT
            ).show()
        }


        val callback = object : OnBackPressedCallback(true) {
            override fun handleOnBackPressed() {

                val backStackEntryCount = navHostChildFragmentManager!!.backStackEntryCount

                Toast.makeText(
                    requireContext(),
                    "HomeNavHost backStackEntryCount: $backStackEntryCount",
                    Toast.LENGTH_SHORT
                ).show()


        if (backStackEntryCount == 1) {
                OnBackPressedCallback@ this.isEnabled = false
                requireActivity().onBackPressed()
            } else {
                navController?.navigateUp()
            }
        }
        }

        requireActivity().onBackPressedDispatcher.addCallback(viewLifecycleOwner, callback)

    }
}
Run Code Online (Sandbox Code Playgroud)

有一件事我不知道它是否在图形或代码中使用嵌套的 NavHostFragment 进行了改进

如果您设置 nav_graph_home 的起始目的地HomeFragment1而不是HomeNavHostFragment它作为仪表板工作,它会忽略嵌套的 NavHost 并添加到主要的碎片堆栈。

因为你在内部 NavHostFragment findNavController() 在任何家庭片段中返回内部

class HomeFragment3 : BaseDataBindingFragment<FragmentHome3Binding>() {
    override fun getLayoutRes(): Int = R.layout.fragment_home3

    private var count = 0

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

        dataBinding.btnIncrease.setOnClickListener {
            dataBinding.tvTitle.text = "Count: ${count++}"
        }


        val mainNavController =
            Navigation.findNavController(requireActivity(), R.id.main_nav_host_fragment)

        dataBinding.btnGoToStart.setOnClickListener {

            // Using destination belong to main_nav_host with nested navHost causes app to crash
//            findNavController().navigate(R.id.action_global_start)

            mainNavController.navigate(R.id.action_global_start)/**/
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

您也可以使用全局操作,但它不是必需的,因为如果您不使用OnBackPressed.

如果您有兴趣,可以链接完整示例和其他导航组件示例。