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

Question

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

• 这不是关于底部导航
• 这不是关于使用导航组件操作 ViewPager（就像这个）

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

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

我如何将它们全部连接起来，以便： ViewPagerAdapter 正在处理 TabA、TabB 和 TabC 并且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 的 containsint 片段，而不是指向 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"
      />

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