TabLayout未在Toolbar下方显示，布局异常求助：已放入CollapsingToolbar仍不可见

我完全懂你现在的困扰——本来想让TabLayout老老实实地待在Toolbar下面，结果折腾半天只能塞进CollapsingToolbar才能看见。其实问题大多出在CoordinatorLayout和AppBarLayout的层级结构没搭对，下面给你两种实用的解决方案，按需选择就行：

方案一：TabLayout固定在Toolbar下方（不随滚动折叠） #

这是最常用的布局方式，TabLayout和Toolbar同级，都放在AppBarLayout里，自然就能对齐在下方，而且不会被内容遮挡：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    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:background="@color/gray_background"
    android:fitsSystemWindows="true">

    <!-- AppBarLayout 作为 Toolbar 和 TabLayout 的容器 -->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <!-- 顶部的 Toolbar -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

        <!-- TabLayout 直接放在 Toolbar 下方，自动对齐 -->
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/white"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/white"
            app:tabTextColor="@color/light_gray" />

    </android.support.design.widget.AppBarLayout>

    <!-- 内容区域必须设置 behavior，否则会被 AppBarLayout 挡住 -->
    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

关键注意点： #

• 一定要给ViewPager加上app:layout_behavior="@string/appbar_scrolling_view_behavior"，这是让内容区域自动避开AppBarLayout的核心属性
• AppBarLayout用wrap_content高度，能自动适配Toolbar+TabLayout的总高度

方案二：TabLayout与CollapsingToolbar联动折叠 #

如果你需要折叠效果（比如顶部有大图，滚动后大图收起，TabLayout固定在顶部），可以把TabLayout放在CollapsingToolbarLayout外面、AppBarLayout里面：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 
    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:background="@color/gray_background"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:theme="@style/AppTheme.AppBarOverlay"
        android:fitsSystemWindows="true">

        <!-- 可折叠的头部容器 -->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <!-- 折叠区域的背景图（可选） -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/header_bg"
                app:layout_collapseMode="parallax" />

            <!-- Toolbar 固定在折叠后的顶部 -->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin" />

        </android.support.design.widget.CollapsingToolbarLayout>

        <!-- TabLayout 放在折叠容器外面，滚动后会固定在顶部 -->
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:tabIndicatorColor="@color/white"
            app:tabMode="fixed"
            app:tabSelectedTextColor="@color/white"
            app:tabTextColor="@color/light_gray" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

关键注意点： #

• CollapsingToolbarLayout设置app:layout_scrollFlags="scroll|exitUntilCollapsed"，实现滚动折叠效果
• Toolbar的app:layout_collapseMode="pin"让它折叠后固定在顶部
• TabLayout不在折叠容器内，所以滚动时不会跟着折叠，而是停留在AppBarLayout的底部（也就是顶部位置）

额外排查小技巧 #

1. 如果你用的是AndroidX，记得把所有android.support开头的控件换成com.google.android.material（比如com.google.android.material.tabs.TabLayout），避免兼容性问题
2. 检查AppBarLayout的高度设置，如果是固定高度，要确保TabLayout有足够的显示空间
3. 确认你的主题里没有给Toolbar设置额外的margin或padding，导致TabLayout位置偏移

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