Android:如何将可滚动视图置于两个固定视图间并实现滚动消失
解决CoordinatorLayout中滚动视图与固定组件的布局问题
问题核心原因
CoordinatorLayout中layout_scrollFlags的生效依赖于AppBarLayout的联动管理,如果带滚动标记的视图没有被包裹在AppBarLayout中,或者前置兄弟视图不在同一AppBarLayout层级内,滚动标记会直接失效,无法触发联动效果。
正确实现方案
通过AppBarLayout管理顶部固定Toolbar和可滚动视图,再将筛选芯片组锚定在AppBarLayout底部,最后让RecyclerView与AppBarLayout联动,即可实现需求效果。具体布局代码如下:
<?xml version="1.0" encoding="utf-8"?> <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"> <!-- 管理Toolbar和可滚动视图的容器 --> <com.google.android.material.appbar.AppBarLayout android:id="@+id/app_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true"> <!-- 固定顶部的Toolbar,无需设置scrollFlags --> <com.google.android.material.appbar.MaterialToolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:title="固定Toolbar"/> <!-- 可滚动视图,设置scrollFlags实现联动隐藏/显示 --> <LinearLayout android:layout_width="match_parent" android:layout_height="200dp" android:background="#eee" android:gravity="center" app:layout_scrollFlags="scroll|enterAlways"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="可滚动区域" android:textSize="18sp"/> </LinearLayout> </com.google.android.material.appbar.AppBarLayout> <!-- 固定筛选芯片组,锚定在AppBarLayout底部 --> <HorizontalScrollView android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#fff" app:layout_anchor="@id/app_bar" app:layout_anchorGravity="bottom"> <com.google.android.material.chip.ChipGroup android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="8dp" app:chipSpacingHorizontal="8dp"> <com.google.android.material.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="筛选选项1"/> <com.google.android.material.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="筛选选项2"/> <com.google.android.material.chip.Chip android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="筛选选项3"/> </com.google.android.material.chip.ChipGroup> </HorizontalScrollView> <!-- 内容列表,设置behavior与AppBarLayout联动 --> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior"/> </androidx.coordinatorlayout.widget.CoordinatorLayout>
关键配置说明
- AppBarLayout包裹规则:所有需要参与滚动联动的视图(Toolbar除外,它固定)必须放在AppBarLayout内,这样
layout_scrollFlags才能被CoordinatorLayout识别。 - scrollFlags参数选择:
scroll:表示该视图会随RecyclerView滚动而被滑出屏幕。enterAlways:表示RecyclerView向下滚动时,该视图会立即显示回来,适合需要快速回显的场景。- 如果需要保留部分视图可见,可搭配*
exitUntilCollapsed*,同时给可滚动视图设置android:minHeight。
- 芯片组锚定:通过
app:layout_anchor="@id/app_bar"和app:layout_anchorGravity="bottom",让芯片组始终固定在AppBarLayout的底部,不会随滚动移动。 - RecyclerView的behavior:必须设置
app:layout_behavior="@string/appbar_scrolling_view_behavior",确保滚动事件能传递给AppBarLayout,触发联动效果。
内容的提问来源于stack exchange,提问作者Mirian Fonkam
相关产品推荐
相关产品推荐

