TabLayout嵌套Fragment布局异常：子Fragment覆盖标签栏求助

你的问题根源很清晰：

• 最初用FrameLayout作为fragment_forecast的根布局，而FrameLayout是层级堆叠布局，ViewPager和TabLayout会重叠在一起，导致子Fragment的内容直接覆盖Tab栏。
• 换成LinearLayout后底部内容截断，是因为你没给ViewPager设置正确的空间分配规则，导致它无法充分利用剩余可用高度。

下面给你两种可靠的解决方案：

方案一：使用LinearLayout（推荐） #

把fragment_forecast的根布局换成垂直方向的LinearLayout，并给ViewPager设置layout_weight="1"和layout_height="0dp"，让它自动填充TabLayout下方的剩余空间：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context="com.example.daza.soundmap.ForecastFragment">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/primaryLightColor"
        app:tabIndicatorColor="@color/secondaryColor"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/primaryTextColor"
        app:tabTextColor="@color/primaryTextColor" />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout>

原理说明： #

• LinearLayout垂直排列子View，TabLayout仅占自身所需的wrap_content高度。
• ViewPager设置0dp高度+weight=1，会强制它占据父布局中TabLayout以外的所有剩余空间，既不会覆盖Tab栏，也不会因为高度不足导致底部内容截断。

方案二：使用ConstraintLayout #

如果你更习惯用约束布局，也可以通过约束让ViewPager填充TabLayout下方到父布局底部的区域：

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="com.example.daza.soundmap.ForecastFragment">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@color/primaryLightColor"
        app:tabIndicatorColor="@color/secondaryColor"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/primaryTextColor"
        app:tabTextColor="@color/primaryTextColor"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintTop_toBottomOf="@id/tabs"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

原理说明： #

• TabLayout被约束在父布局顶部，仅占自身高度。
• ViewPager的顶部约束到TabLayout的底部，底部约束到父布局底部，设置0dp高度会自动填充这两个约束之间的空间，同样能解决覆盖和截断问题。

另外，你的子Fragment布局（fragment_day_forecast）是没问题的，RecyclerView设置match_parent会自适应ViewPager分配的高度，不需要修改。

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