ViewPager内容被AppBarLayout遮挡问题的解决方法咨询

嘿，刚接触CoordinatorLayout的时候我也踩过一模一样的坑！你遇到的ViewPager内容被AppBarLayout遮挡的问题，本质是滚动协调的布局逻辑没配置对，给你几个亲测有效的解决办法：

• 给NestedScrollView配置正确的滚动Behavior
  这是最关键也最优雅的解决方式，CoordinatorLayout自带了专门处理AppBarLayout联动的Behavior，只要给你的NestedScrollView加上这个属性，它会自动计算AppBarLayout的高度，让内部内容避开遮挡区域。在布局文件里给NestedScrollView添加：

  app:layout_behavior="@string/appbar_scrolling_view_behavior"
  

  这个属性会让NestedScrollView和AppBarLayout的折叠/展开状态联动，自动调整自身的位置，从根源上避免遮挡。

• 尽量避免NestedScrollView嵌套ViewPager（如果Fragment内容可滚动）
  如果你ViewPager里的Fragment本身是可滚动的（比如包含RecyclerView、ScrollView），那把ViewPager直接放在CoordinatorLayout下，去掉外层的NestedScrollView会更合理。同样给ViewPager加上上面提到的Behavior属性：

  <androidx.viewpager.widget.ViewPager
      android:id="@+id/viewPager"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
  

  这种方式更符合CoordinatorLayout的设计逻辑，既不会有滚动冲突，也能完美解决遮挡问题。

• 动态调整Padding作为备选方案
  如果上面的方法都没生效，可以试试手动根据AppBarLayout的滚动状态调整NestedScrollView或ViewPager的paddingTop。在代码里监听AppBar的偏移变化，实时计算需要的padding值：

  AppBarLayout appBarLayout = findViewById(R.id.appBarLayout);
  NestedScrollView nestedScrollView = findViewById(R.id.nestedScrollView);
  
  appBarLayout.addOnOffsetChangedListener((appBar, verticalOffset) -> {
      // 获取AppBar的总滚动高度，计算当前需要的padding
      int appBarTotalHeight = appBar.getTotalScrollRange();
      nestedScrollView.setPadding(0, appBarTotalHeight - Math.abs(verticalOffset), 0, 0);
  });
  

  这个方法比较“硬核”，但能确保内容始终不会被遮挡，适合一些特殊场景。

• 检查CollapsingToolbarLayout的滚动标志
  最后别忘了确认CollapsingToolbarLayout的app:layout_scrollFlags配置正确，常用的配置是scroll|exitUntilCollapsed，这样AppBarLayout才能正常折叠，下面的布局也能跟着正确调整：

  <com.google.android.material.appbar.CollapsingToolbarLayout
      ...
      app:layout_scrollFlags="scroll|exitUntilCollapsed">
  

参考布局示例 #

这里给你一个正确的CoordinatorLayout结构，你可以对照调整自己的布局：

<androidx.coordinatorlayout.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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"/>

            <!-- 这里可以添加折叠的头部内容，比如ImageView -->
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <!-- 方案1：直接使用ViewPager（推荐，当Fragment内容可滚动时） -->
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <!-- 方案2：嵌套NestedScrollView的情况 -->
    <!--
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </androidx.core.widget.NestedScrollView>
    -->

</androidx.coordinatorlayout.widget.CoordinatorLayout>

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