Android竖屏用ViewPager2/TabLayout，横屏垂直TabLayout最优实现方案？

核心思路：用Android原生资源适配机制，零冗余方向判断 #

Android自带的屏幕方向布局适配是最原生、低维护成本的方案，完全不需要旋转视图或依赖TabHost这类老旧组件。

步骤1：分别创建横竖屏布局文件 #

• 竖屏布局（res/layout/activity_main.xml）：保留你已实现的结构，ViewPager2占满上方空间，底部放置水平TabLayout

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical">
  
      <androidx.viewpager2.widget.ViewPager2
          android:id="@+id/view_pager"
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:layout_weight="1"/>
  
      <com.google.android.material.tabs.TabLayout
          android:id="@+id/tab_layout"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:orientation="horizontal"/>
  </LinearLayout>
  

• 横屏布局（res/layout-land/activity_main.xml）：用水平LinearLayout拆分空间，左侧放垂直TabLayout，右侧ViewPager2占满剩余宽度

  <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="horizontal">
  
      <com.google.android.material.tabs.TabLayout
          android:id="@+id/tab_layout"
          android:layout_width="wrap_content"
          android:layout_height="match_parent"
          android:orientation="vertical"/>
  
      <androidx.viewpager2.widget.ViewPager2
          android:id="@+id/view_pager"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"/>
  </LinearLayout>
  

步骤2：统一逻辑代码，无需额外方向判断 #

因为两个布局的控件ID完全一致，系统会自动根据屏幕方向加载对应布局，你只需要写一次绑定逻辑即可：

// Kotlin示例
val tabLayout = findViewById<TabLayout>(R.id.tab_layout)
val viewPager = findViewById<ViewPager2>(R.id.view_pager)

// 设置ViewPager2适配器
viewPager.adapter = YourPagerAdapter(this)

// 关联TabLayout与ViewPager2
TabLayoutMediator(tabLayout, viewPager) { tab, position ->
    tab.text = "Tab ${position + 1}"
}.attach()

// Java示例
TabLayout tabLayout = findViewById(R.id.tab_layout);
ViewPager2 viewPager = findViewById(R.id.view_pager);

viewPager.setAdapter(new YourPagerAdapter(this));

new TabLayoutMediator(tabLayout, viewPager, (tab, position) -> {
    tab.setText("Tab " + (position + 1));
}).attach();

为什么不推荐旋转视图或TabHost？ #

• 旋转视图：会导致触摸事件偏移、布局测量异常，还需要额外处理旋转后的样式调整，徒增维护成本
• TabHost：属于过时组件，不兼容ViewPager2，Material Design的TabLayout已经完全覆盖其功能，扩展性和兼容性更好

细节优化：垂直TabLayout样式调整 #

如果需要优化垂直Tab的文字显示，可在横屏布局中给TabLayout添加自定义样式：

<style name="VerticalTabStyle" parent="Widget.MaterialComponents.TabLayout">
    <item name="tabTextAppearance">@style/VerticalTabText</item>
</style>

<style name="VerticalTabText" parent="TextAppearance.MaterialComponents.Tab">
    <item name="android:textSize">14sp</item>
    <!-- 若需要文字垂直显示，可添加旋转属性，默认横向文字也可正常使用 -->
    <!-- <item name="android:rotation">90</item> -->
</style>

然后在横屏布局的TabLayout中引用该样式即可。

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