CollapsingToolbarLayout多视图重叠 嵌套LinearLayout后滚动失效
问题根因
CollapsingToolbarLayout 继承自 FrameLayout,仅会识别直接子View上的折叠滚动相关配置,不会递归读取嵌套容器内部的布局参数。
你在中间增加垂直LinearLayout作为容器后:
- 滚动行为配置被加在LinearLayout上,CollapsingToolbarLayout无法正确识别容器内部子项的折叠逻辑
- 你给LinearLayout设置的
app:layout_collapseMode="pin"会让整个容器完全固定在初始位置,自然不会响应滚动 - 额外给LinearLayout加
layout_scrollFlags是无效配置,这个参数只有AppBarLayout的直接子View才会识别
正确实现方式
直接移除中间包裹的LinearLayout即可,不需要额外容器做垂直排列。利用CollapsingToolbarLayout的布局规则,通过layout_gravity就能实现Toolbar固定在顶部、自定义布局排在下方的效果,不会出现重叠问题。
修正后的布局代码:
<com.google.android.material.appbar.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" app:liftOnScroll="true"> <com.google.android.material.appbar.CollapsingToolbarLayout android:id="@+id/toolbar_layout" style="@style/Widget.SaltWatcher.App.Toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_scrollFlags="scroll|exitUntilCollapsed" app:titleEnabled="false" app:toolbarId="@id/toolbar"> <!-- 顶部固定Toolbar,pin模式保证折叠时始终留在顶部 --> <com.google.android.material.appbar.MaterialToolbar android:id="@+id/toolbar" style="@style/Widget.SaltWatcher.App.Toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:elevation="0dp" app:contentInsetStart="0dp" app:elevation="0dp" app:layout_collapseMode="pin" /> <!-- 自定义布局,bottom重力保证排在Toolbar下方,parallax模式实现视差滚动 --> <include android:id="@+id/values" layout="@layout/layout_values" android:layout_width="match_parent" android:layout_height="136dp" android:layout_gravity="bottom" android:scaleType="centerCrop" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.5" /> </com.google.android.material.appbar.CollapsingToolbarLayout> </com.google.android.material.appbar.AppBarLayout>
配置说明
app:layout_scrollFlags仅需要配置在AppBarLayout的直接子View(即CollapsingToolbarLayout)上,不需要给内部子View重复设置- Toolbar设置
app:layout_collapseMode="pin",折叠时会始终固定在AppBar顶部,不会随滚动隐藏 - 自定义布局设置
android:layout_gravity="bottom",会自动停靠在CollapsingToolbarLayout的底部区域,展开时刚好排在Toolbar下方,不会重叠 - 自定义布局设置
app:layout_collapseMode="parallax"配合app:layout_collapseParallaxMultiplier="0.5"(取值范围0~1,数值越大视差效果越明显),滚动时会有自然的视差折叠效果,完全符合exitUntilCollapsed的滚动预期
如果需要做更复杂的布局排列,必须保留嵌套容器的话,注意两点:
- 固定在顶部的Toolbar要作为CollapsingToolbarLayout的直接子View,不要放进嵌套容器里
- 嵌套容器作为CollapsingToolbarLayout的直接子View,只需要给容器设置
app:layout_collapseMode="parallax"即可,容器内部的子元素不需要加任何折叠相关配置,整个容器会作为整体参与视差滚动
内容的提问来源于stack exchange,提问作者DeKekem
相关产品推荐
相关产品推荐

