基于DrawerLayout实现类WhatsApp工具栏隐藏效果的滚动问题求助

我来帮你搞定这个滚动隐藏的效果！你当前的布局缺少了CoordinatorLayout和AppBarLayout的联动配置，这正是实现类似WhatsApp滚动时工具栏隐藏/显示的核心。下面是具体的改造方案：

核心思路 #

WhatsApp的滚动隐藏效果依赖于Android Design Support库中的CoordinatorLayout，它能协调子View之间的滚动交互。我们需要把Toolbar、TabLayout放到AppBarLayout中，再让ViewPager和AppBarLayout联动，这样滚动ViewPager里的内容时，就能触发Toolbar和TabLayout的滑入滑出动画。

修改后的完整布局代码 #

替换你原来的DrawerLayout内部结构，改成下面这样：

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 主内容区域：用CoordinatorLayout实现滚动联动 -->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!-- AppBarLayout：承载Toolbar和TabLayout，处理滚动动画 -->
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <!-- 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:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

            <!-- TabLayout：会跟着Toolbar一起滚动 -->
            <android.support.design.widget.TabLayout
                android:id="@+id/tabLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="?attr/colorPrimary"
                app:tabIndicatorColor="@android:color/white"
                app:tabMode="fixed"
                app:tabGravity="fill"/>

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

        <!-- ViewPager：必须设置behavior，让它和AppBarLayout联动 -->
        <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

    <!-- 保留你原来的NavigationView -->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/drawer_menu"/>

</android.support.v4.widget.DrawerLayout>

关键配置说明 #

• CoordinatorLayout：作为主容器，负责协调AppBarLayout和ViewPager之间的滚动事件传递。
• AppBarLayout：专门用来处理Toolbar、TabLayout这类顶部栏的滚动动画，它会监听ViewPager的滚动事件并触发子View的滑入滑出。
• Toolbar的app:layout_scrollFlags：
  • scroll：表示Toolbar会随着内容向下滚动而滑出屏幕。
  • enterAlways：表示向上滚动时，Toolbar会立即重新显示（不管内容是否滚到顶部），这和WhatsApp主界面的效果一致。
  • 如果你想要更贴近聊天界面的效果（只有滚到内容顶部才显示Toolbar），可以改成scroll|exitUntilCollapsed，同时给Toolbar设置android:minHeight="?attr/actionBarSize"，这样Toolbar会折叠到最小高度后不再隐藏。
• ViewPager的app:layout_behavior：这个属性是核心！它告诉CoordinatorLayout，ViewPager的滚动事件需要传递给AppBarLayout，从而触发顶部栏的动画。

额外注意事项 #

ViewPager里的每个Fragment，其内容必须是支持嵌套滚动的View：

• 如果用RecyclerView：确保开启嵌套滚动（API 21+默认开启，低版本可以手动设置android:nestedScrollingEnabled="true"）。
• 如果用ScrollView：替换成android.support.v4.widget.NestedScrollView，普通ScrollView无法传递滚动事件给CoordinatorLayout。

举个Fragment里RecyclerView的例子：

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:nestedScrollingEnabled="true"/>

这样改造后，你就能实现和WhatsApp一模一样的滚动隐藏效果啦！

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