在 Material Design 中，CollapsingToolbarLayout 是一个非常常见的布局控件，它可以实现顶部折叠的效果。但是，在使用 CollapsingToolbarLayout 时，我们可能会遇到布局重叠的问题，尤其是在使用 RecyclerView 填充内容时更常见。本文将介绍如何解决这个问题。
问题描述
当使用 CollapsingToolbarLayout 和 RecyclerView 组合时，出现了布局重叠的问题。具体表现为：当 RecyclerView 滚动到顶部时，Toolbar 和 RecyclerView 的内容重叠在一起，导致界面混乱。
原因分析
这个问题的原因是由于当 RecyclerView 滚动时，CollapsingToolbarLayout 不会自动更新其位置，导致其和 RecyclerView 的内容重叠在一起。
解决方案
方案一：使用 NestedScrollView
NestedScrollView 是一个专门用于解决布局嵌套问题的控件。我们可以使用 NestedScrollView 来包含我们的 RecyclerView，然后将 NestedScrollView 放在 CollapsingToolbarLayout 上面。这样，当 RecyclerView 滚动时，NestedScrollView 会通知 CollapsingToolbarLayout 更新自己的位置，从而解决了布局重叠的问题。
-- -------------------- ---- -------
---------------------------------------------------- ----------------------------------------------------------
-----------------------------------
-------------------------------------
-----------------------------------------------------------
------------------------------------
-----------------------------------
------------------------------------
---------------------------------------------------
---- ------ ---
-------------------------------------------------------------
--------------------------------------
-----------------------------------
------------------------------------
-------------------------------------------------------------
------------------------------------------
-----------------------------------
------------------------------------ --
----------------------------------------
------------------------------------------------------方案二：在代码中更新 CollapsingToolbarLayout 的位置
如果你不想使用 NestedScrollView，还可以在代码中手动更新 CollapsingToolbarLayout 的位置。在 RecyclerView 的滑动监听中，我们可以调用 CollapsingToolbarLayout 的 setTopAndBottomOffset() 方法来更新其位置。
-- -------------------- ---- -------
-------------------
------------------------------------------ ----------------------------- -
---------
------ ---- ------------------- -- --- -------- --- -------- --- ----------- --- ----------- -
------------------------------
--------------------------------- ---------------------------------------------------- - ---------
----------------------------------------
-
---总结
当我们在使用 CollapsingToolbarLayout 和 RecyclerView 组合时，可能会遇到布局重叠的问题。为了解决这个问题，我们可以使用 NestedScrollView 或者在代码中手动更新 CollapsingToolbarLayout 的位置。这些解决方案能够帮助我们让界面更加美观，提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e65c695b1f8cacd60cb38