如何实现点击App Bar菜单项时加载含Tab View的Fragment？

1. 创建带Tab View的Fragment并通过App Bar菜单项触发显示 #

我来一步步拆解这个需求，帮你落地实现：

• 第一步：构建带Tab的Fragment布局
  推荐用TabLayout搭配ViewPager2（官方现在更推荐ViewPager2替代旧版ViewPager）来实现Tab切换逻辑。示例布局代码如下：

  <!-- fragment_tabbed.xml -->
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical">
  
      <com.google.android.material.tabs.TabLayout
          android:id="@+id/tab_layout"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          app:tabMode="fixed"
          app:tabGravity="fill"/>
  
      <androidx.viewpager2.widget.ViewPager2
          android:id="@+id/view_pager"
          android:layout_width="match_parent"
          android:layout_height="match_parent"/>
  </LinearLayout>
  

• 第二步：实现TabbedFragment业务逻辑
  在Fragment类里关联TabLayout和ViewPager2，需要创建FragmentStateAdapter来管理每个Tab对应的子Fragment：

  class TabbedFragment : Fragment() {
      override fun onCreateView(
          inflater: LayoutInflater,
          container: ViewGroup?,
          savedInstanceState: Bundle?
      ): View? {
          return inflater.inflate(R.layout.fragment_tabbed, container, false)
      }
  
      override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
          super.onViewCreated(view, savedInstanceState)
          val viewPager = view.findViewById<ViewPager2>(R.id.view_pager)
          val tabLayout = view.findViewById<TabLayout>(R.id.tab_layout)
  
          // 初始化ViewPager的适配器
          viewPager.adapter = object : FragmentStateAdapter(this) {
              override fun getItemCount() = 2 // 这里按你的需求设置Tab数量
  
              override fun createFragment(position: Int): Fragment {
                  return when(position) {
                      0 -> FirstTabContentFragment()
                      1 -> SecondTabContentFragment()
                      else -> FirstTabContentFragment()
                  }
              }
          }
  
          // 关联TabLayout和ViewPager2，同步选中状态
          TabLayoutMediator(tabLayout, viewPager) { tab, position ->
              tab.text = when(position) {
                  0 -> "Tab 1"
                  1 -> "Tab 2"
                  else -> "Tab ${position+1}"
              }
          }.attach()
      }
  }
  

• 第三步：处理App Bar菜单项点击事件
  在承载Fragment的Activity中，先加载菜单资源，再在点击事件里完成Fragment替换：

  override fun onCreateOptionsMenu(menu: Menu): Boolean {
      menuInflater.inflate(R.menu.main_appbar_menu, menu)
      return true
  }
  
  override fun onOptionsItemSelected(item: MenuItem): Boolean {
      return when(item.itemId) {
          R.id.action_show_tabbed_fragment -> {
              // 替换Fragment到Activity的容器中
              supportFragmentManager.beginTransaction()
                  .replace(R.id.fragment_container, TabbedFragment())
                  .addToBackStack(null) // 可选，加入返回栈让用户能返回上一页
                  .commit()
              true
          }
          else -> super.onOptionsItemSelected(item)
      }
  }
  

  这里的R.id.fragment_container是你Activity布局中用来承载Fragment的容器（一般是FrameLayout）。

2. 点击“Misurazioni”菜单项显示带Tab布局的其他实现方式 #

当然有Fragment之外的方案，你可以根据场景灵活选择：

• 直接在Activity布局中切换显示/隐藏
  把带Tab的布局（TabLayout+ViewPager2）直接写在Activity的主布局里，初始设置android:visibility="gone"，点击菜单项时设置为visible，同时隐藏当前页面的其他布局。这种方式适合Tab布局和当前页面耦合度较高的场景，不需要额外管理Fragment生命周期。

• 使用ViewStub懒加载布局
  用ViewStub来延迟加载带Tab的布局，初始时不会占用布局资源，点击菜单项时再触发 inflate：

  <!-- Activity布局中添加ViewStub -->
  <ViewStub
      android:id="@+id/tabbed_layout_stub"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:layout="@layout/layout_tabbed"/>
  

  点击事件中的处理逻辑：

  val stub = findViewById<ViewStub>(R.id.tabbed_layout_stub)
  val tabbedView = stub.inflate()
  // 之后初始化TabLayout和ViewPager2的逻辑和之前一致
  

• 封装为BottomSheetDialogFragment（弹窗式展示）
  如果你的Tab布局是作为临时弹窗展示的，可以把它封装成BottomSheetDialogFragment，点击菜单项时弹出这个底部弹窗，无需替换Activity中的Fragment，适合临时查看数据的场景。

• 通过Jetpack Navigation实现导航
  如果你已经在用Jetpack Navigation组件，可以在导航图中添加带Tab的目的地（可以是Fragment或Activity），点击菜单项时直接调用findNavController().navigate(R.id.tabbed_destination)，这种方式更符合现代Android的导航规范，能自动管理页面堆栈。

内容的提问来源于stack exchange，提问作者Nicola Bernardi