使用导航组件导航出 ViewPager 选项卡

Question

首先，澄清一下。在查看了许多其他相关问题之后，让我们从这不是什么开始：

• 这与底部导航无关
• 这不是关于使用导航组件操作 ViewPager (like this one)

这个问题是关于如何使用导航组件，当 Viewpager 是组件之一时。

情况是有 3 个选项卡：TabA、TabB 和 TabC 还有2个额外的片段：FragA、FragB

如何将它们全部连接起来，以便： ViewPagerAdapter 正在处理 TabA、TabB 和 TabC AND nav_praph 将处理从：

• TabA --> FragA
• TabB --> FragB
• TabC --> FragA（不是错字）

所需的 UI 行为 第一个选项：我能得到的最好的工作是在其中一个选项卡（例如 TabA）中定义 FragHost，然后导航到 FragA。问题是导航是在选项卡内完成的。这意味着用户仍然会看到顶部的选项卡，并且仍然可以滑动到其他选项卡。不是我想要的。 这是有效的图表，但不是我想要的（红色代表托管片段）

第二个选项：将 fragHost 移动到最顶部，并让它包含 ViewPager，以便它占据全屏。然后在 nagGraph 中提到

<navigation
    android:id="@+id/nav_graph"
    app:startDestination="@id/tab_a"
    >
    <fragment
      android:id="@+id/tab_a"
      android:name="com.myapp.home.views.TabA"
      android:layout="@layout/tab_a_layout"
      >

    <action
        android:id="@+id/action_tab_a_to_frag_a"
        app:destination="@+id/frag_a"
        />
  </fragment>

  <fragment
      android:id="@+id/frag_a"
      android:name="com.myapp.FragA"
      android:label="details"
      android:layout="@layout/frag_a"
      />

这导致IllegalStateException ... at androidx.fragment.app.FragmentStore.addFragment 一些调试，我看到它试图添加 TabA 两次。我假设 ViewPagerAdapter 和 Nav Component 都在使用 Fragment 管理器。

我如何进行正常导航，您可以在其中使用标签，但单击一个会带您进入标签顶部的另一种全屏体验？

Answer 1

发现我提到的第二个选项是正确的方法。 写在这里以防其他人有同样的问题。

确保您的 nav_graph 指向 ViewPager 的包含片段，而不是 ViewPager 持有的特定片段。 所以不是来自 TabA，而是来自托管 ViewPager 的 ContainerFragmentA

<navigation
    android:id="@+id/nav_graph"
    app:startDestination="@id/view_pager_hosting_frag"
    >
    <fragment
      android:id="@+id/view_pager_hosting_frag"
      android:name="com.myapp.home.views.ViewPagerHostingFrag"
      android:layout="@layout/view_pager_layout"
      >

    <action
        android:id="@+id/action_tab_a_to_frag_a"
        app:destination="@+id/frag_a"
        />
  </fragment>

  <fragment
      android:id="@+id/frag_a"
      android:name="com.myapp.FragA"
      android:label="details"
      android:layout="@layout/frag_a"
      />

然后您可以从任何选项卡中选择您想要的操作以转到正确的位置