实现嵌套Fragment中TabLayout+ViewPager的Fragment可滚动

嘿，我瞅了下你的布局代码，发现问题出在AppBarLayout的结构和ViewPager的嵌套方式上——你把ViewPager直接放在了AppBarLayout里面，这就导致ViewPager的滚动被AppBarLayout的行为限制住了，而且外层RelativeLayout与CoordinatorLayout的搭配也没发挥出协调布局的作用。下面是修正后的完整布局，以及关键改动的说明：

<?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" 
    xmlns:card_view="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent">

    <RelativeLayout 
        android:id="@+id/marcas" 
        android:layout_width="match_parent" 
        android:layout_height="match_parent">

        <ImageView 
            android:id="@+id/fondo_usuario" 
            android:layout_width="match_parent" 
            android:layout_height="120dp" 
            android:scaleType="centerCrop" 
            app:srcCompat="@drawable/surf" />

        <de.hdodenhof.circleimageview.CircleImageView 
            android:id="@+id/profile_image" 
            android:layout_width="100dp" 
            android:layout_height="100dp" 
            android:layout_below="@id/fondo_usuario" 
            android:layout_centerInParent="true" 
            android:layout_marginLeft="5dp" 
            android:layout_marginTop="-60dp" 
            android:src="@drawable/ic_account_circle_black_24dp" 
            card_view:civ_border_color="#FF000000" 
            card_view:civ_border_width="2dp" />

        <TextView 
            android:id="@+id/username" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_below="@id/profile_image" 
            android:layout_marginTop="10dp" 
            android:text="Marc " 
            android:textAlignment="center" 
            android:textSize="24sp" 
            android:textStyle="bold" />

        <TextView 
            android:id="@+id/ubicacion" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_below="@id/username" 
            android:layout_marginTop="5dp" 
            android:text="Barcelona, Spain" 
            android:textAlignment="center" 
            android:textSize="18sp" 
            android:textStyle="bold" />

        <TextView 
            android:id="@+id/mates" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:layout_below="@id/fondo_usuario" 
            android:layout_marginLeft="25dp" 
            android:layout_marginTop="45dp" 
            android:text="100 mates" 
            android:textAlignment="center" 
            android:textSize="14sp" 
            android:textStyle="bold" />

        <ImageView 
            android:id="@+id/ambassador" 
            android:layout_width="30dp" 
            android:layout_height="30dp" 
            android:layout_below="@id/fondo_usuario" 
            android:layout_marginLeft="-40dp" 
            android:layout_marginTop="10dp" 
            android:layout_toRightOf="@id/profile_image" 
            card_view:srcCompat="@drawable/home_ambassador" />

        <LinearLayout 
            android:id="@+id/linearsports" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_below="@id/ubicacion" 
            android:layout_centerHorizontal="true" 
            android:layout_marginStart="20dp" 
            android:layout_marginTop="5dp" 
            android:layout_marginEnd="20dp" 
            android:layout_marginBottom="20dp" 
            android:foregroundGravity="clip_horizontal" 
            android:gravity="center_horizontal" 
            android:orientation="horizontal">

            <ImageView android:id="@+id/sp1" android:layout_width="30dp" android:layout_height="30dp" android:layout_margin="5dp" card_view:srcCompat="@drawable/home_ambassador" />
            <ImageView android:id="@+id/sp2" android:layout_width="30dp" android:layout_height="30dp" android:layout_margin="5dp" card_view:srcCompat="@drawable/home_ambassador" />
            <ImageView android:id="@+id/sp3" android:layout_width="30dp" android:layout_height="30dp" android:layout_margin="5dp" android:layout_marginLeft="-60dp" card_view:srcCompat="@drawable/home_ambassador" />
            <ImageView android:id="@+id/sp4" android:layout_width="30dp" android:layout_height="30dp" android:layout_margin="5dp" android:layout_marginLeft="-60dp" card_view:srcCompat="@drawable/home_ambassador" />
            <ImageView android:id="@+id/sp5" android:layout_width="30dp" android:layout_height="30dp" android:layout_margin="5dp" android:layout_marginLeft="-60dp" card_view:srcCompat="@drawable/home_ambassador" />
            <ImageView android:id="@+id/sp6" android:layout_width="30dp" android:layout_height="30dp" android:layout_margin="5dp" android:layout_marginLeft="-60dp" card_view:srcCompat="@drawable/home_ambassador" />
            <ImageView android:id="@+id/sp7" android:layout_width="30dp" android:layout_height="30dp" android:layout_margin="5dp" android:layout_marginLeft="-60dp" card_view:srcCompat="@drawable/home_ambassador" />
            <ImageView android:id="@+id/sp8" android:layout_width="30dp" android:layout_height="30dp" android:layout_margin="5dp" android:layout_marginLeft="-60dp" card_view:srcCompat="@drawable/home_ambassador" />

        </LinearLayout>

        <android.support.design.widget.AppBarLayout 
            android:id="@+id/appbar_layout_id" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content" 
            android:layout_below="@id/linearsports">

            <android.support.design.widget.TabLayout 
                android:id="@+id/tab_layout_id" 
                android:layout_width="match_parent" 
                android:layout_height="wrap_content" 
                app:tabGravity="fill" 
                app:tabMode="fixed" />

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

        <!-- 把ViewPager从AppBarLayout中移出，设置behavior和定位 -->
        <android.support.v4.view.ViewPager 
            android:id="@+id/viewpager_id" 
            android:layout_width="match_parent" 
            android:layout_height="match_parent"
            android:layout_below="@id/appbar_layout_id"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

关键改动说明： #

• 调整ViewPager的位置：把ViewPager从AppBarLayout中移出来，AppBarLayout只保留TabLayout——AppBarLayout的作用是管理顶部可滚动/折叠的组件，ViewPager作为内容容器应该和它同级，这样才能拥有独立的滚动空间。
• 添加滚动Behavior：给ViewPager设置app:layout_behavior="@string/appbar_scrolling_view_behavior"，这个属性让ViewPager和AppBarLayout联动，同时确保ViewPager内部的Fragment内容可以正常触发滚动事件。
• 修正布局层级冲突：移除了TabLayout上多余的android:layout_below="@id/linearsports"，因为AppBarLayout已经通过RelativeLayout的layout_below定位到了linearsports下方，TabLayout在AppBarLayout内不需要额外的RelativeLayout定位属性。
• 设置ViewPager高度为match_parent：原来的wrap_content会导致ViewPager高度无法自适应内容，改为match_parent后，ViewPager才能填充剩余空间，让内部Fragment的滚动区域足够大。

这样调整之后，ViewPager里的Fragment就能正常实现滚动效果了，同时TabLayout也能和ViewPager保持联动。

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