Android弹性空间重叠内容AppBar滚动：固定横向按钮栏实现求助

这个需求我之前做类似项目时碰到过，核心是利用CoordinatorLayout的Behavior机制来实现横向栏的固定效果，下面是具体的实现步骤和代码：

一、调整布局结构 #

首先要把横向按钮栏从NestedScrollView里移出来，作为CoordinatorLayout的直接子View——这样才能让它脱离NestedScrollView的滚动体系，被Behavior独立控制位置。调整后的布局大致如下：

<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">

    <!-- 顶部AppBar -->
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.MaterialComponents.Dark.ActionBar">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <!-- 如果有折叠标题栏等其他AppBar内容，可在此添加 -->
    </com.google.android.material.appbar.AppBarLayout>

    <!-- 横向按钮栏：作为CoordinatorLayout直接子View，绑定自定义Behavior -->
    <HorizontalScrollView
        android:id="@+id/horizontal_btn_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        app:layout_behavior=".PinHorizontalBarBehavior">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:padding="8dp">

            <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮1"/>
            <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮2"/>
            <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按钮3"/>
            <!-- 更多按钮... -->
        </LinearLayout>
    </HorizontalScrollView>

    <!-- 滚动内容区 -->
    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- 注意：这里要给内容设置顶部padding，避免被固定的横向栏遮挡 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:paddingTop="56dp"> <!-- 数值和横向栏高度一致，比如56dp -->

            <!-- 页面主体内容，比如文本、列表等 -->
            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="这里是页面内容..."
                android:padding="16dp"/>
            <!-- 更多内容... -->
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

二、编写自定义Behavior #

核心逻辑都在这个Behavior里，它会监听AppBarLayout和NestedScrollView的滚动事件，动态调整横向栏的位置，实现“跟随滚动-到达位置后固定”的效果：

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import androidx.coordinatorlayout.widget.CoordinatorLayout;
import com.google.android.material.appbar.AppBarLayout;

public class PinHorizontalBarBehavior extends CoordinatorLayout.Behavior<View> {

    public PinHorizontalBarBehavior(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    // 声明该Behavior依赖AppBarLayout
    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return dependency instanceof AppBarLayout;
    }

    // 监听AppBarLayout的滚动变化，调整横向栏位置
    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        AppBarLayout appBar = (AppBarLayout) dependency;
        // 计算横向栏的目标Y坐标：跟随AppBar滚动，直到AppBar折叠到只剩Toolbar时，固定在Toolbar下方
        float targetY = Math.max(appBar.getBottom(), child.getTop() + appBar.getTop());
        child.setY(targetY);
        return true;
    }

    // 监听NestedScrollView的垂直滚动事件
    @Override
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int axes, int type) {
        return axes == View.SCROLL_AXIS_VERTICAL;
    }

    @Override
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed, int type, int[] consumed) {
        AppBarLayout appBar = findAppBarLayout(coordinatorLayout);
        if (appBar == null) return;

        // 当AppBar完全折叠时，强制横向栏固定在Toolbar底部
        if (appBar.getTop() <= -appBar.getTotalScrollRange()) {
            child.setY(appBar.getBottom());
        } else {
            // 未完全折叠时，继续跟随AppBar滚动
            float targetY = Math.max(appBar.getBottom(), child.getTop() + appBar.getTop());
            child.setY(targetY);
        }
    }

    // 从CoordinatorLayout中找到AppBarLayout实例
    private AppBarLayout findAppBarLayout(CoordinatorLayout parent) {
        for (int i = 0; i < parent.getChildCount(); i++) {
            View child = parent.getChildAt(i);
            if (child instanceof AppBarLayout) {
                return (AppBarLayout) child;
            }
        }
        return null;
    }
}

三、注意事项 #

• AndroidX兼容：如果你的项目还在用support库，记得把代码里的AndroidX类替换成对应的support类（比如android.support.design.widget.CoordinatorLayout）。
• 遮挡问题：NestedScrollView内容的paddingTop必须和横向栏的高度一致，不然页面顶部内容会被固定的横向栏挡住。
• 流畅性优化：如果滚动时横向栏有卡顿，可以尝试给横向栏添加android:translationZ属性，让它在内容上方显示，避免层级绘制问题。

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