如何将TabLayout设置在ViewPager2下方并正常显示？

问题原因分析 #

当把ViewPager2放在TabLayout上方时，ViewPager2的android:layout_height="0dp"+android:layout_weight="1"本应占据除TabLayout外的剩余空间，但实际TabLayout不显示，大概率是LinearLayout权重计算异常或代码绑定逻辑存在隐性冲突导致。

解决方案 #

方案1：修正LinearLayout的权重配置 #

明确指定LinearLayout的weightSum属性，避免系统自动计算权重时出现偏差：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:weightSum="1"> <!-- 明确总权重值 -->

    <androidx.viewpager2.widget.ViewPager2
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/view_pager"
        android:layout_weight="1"/>

    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/main_tabLayout"/>

</LinearLayout>

方案2：改用ConstraintLayout（更稳定的布局方式） #

LinearLayout的权重机制在部分场景下易出现计算问题，改用ConstraintLayout可精准控制组件位置：

<androidx.constraintlayout.widget.ConstraintLayout 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">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/main_tabLayout"/>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/main_tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view_pager"/>

</androidx.constraintlayout.widget.ConstraintLayout>

方案3：检查TabLayout与ViewPager2的绑定代码 #

确保绑定逻辑无异常，标准绑定代码如下：

val tabLayout = findViewById<TabLayout>(R.id.main_tabLayout)
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}" // 自定义Tab文字
}.attach()

注意：不要在绑定逻辑中给TabLayout设置visibility或偏移类属性。

额外排查点 #

• 临时给TabLayout设置android:background="@color/red"，确认是否被其他视图覆盖。
• 检查TabLayout的文字颜色、背景色是否与父布局一致，避免因颜色重合导致视觉上“不显示”。

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