在使用 Material Design 中的 AppBarLayout 组件进行页面开发时，有时会遇到 AppBarLayout 内部的滚动与其它组件的滚动发生冲突的问题。本文将介绍如何解决这种问题，帮助开发者更好地使用该组件。
问题描述
当我们在 AppBarLayout 内部使用 RecyclerView、NestedScrollView 等可以滚动的组件时，可能会出现以下问题：
- 当组件滚动到顶部时，继续向下滑动就会导致 AppBarLayout 一同向下滑动，导致页面布局混乱；
- 当组件滚动到底部时，继续向上滑动也会导致 AppBarLayout 一同向上滑动，同样导致页面布局混乱。
这种情况下，我们需要对 AppBarLayout 进行一些设置，以确保其内部的滚动与其它组件的滚动不会互相影响。
解决方案
1. 使用 NestedScrollView
当我们使用 RecyclerView 时，可以将其嵌套到 NestedScrollView 中，这样就可以使用 NestedScrollView 的 Scrolling View Behavior 来控制 AppBarLayout 的滚动。
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------
-----------------------------------
------------------------------------
---------------------------------------------------------------------
-
---- ------- ------ ---
--------------------------------------------------
--------------------------------------
-----------------------------------
------------------------------------
-------------------------------------------------------------
---- ------------ ------ ---
----------------------------------------
------------------------------------------------------2. 禁止 AppBarLayout 滚动
通过在 AppBarLayout 中添加以下代码，可以禁止其滚动，确保其内部的滚动不会影响到页面布局：
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
------------------------------------
-------------------------------------------------
----------------------------------------------------
-
---- ------- ------ ---
--------------------------------------------------其中，scrollFlags 属性表示滚动标记，enterAlwaysCollapsed 会在 AppBarLayout 进入 Toolbar 的区域时保持固定高度。
3. 使用 CoordinatorLayout.Behavior
通过实现一个 CoordinatorLayout.Behavior 接口，可以自定义 AppBarLayout 的滚动方式。例如，可以设置 AppBarLayout 滚到一定位置后才开始滚动，使其滚动时不会影响到其它组件。
-- -------------------- ---- -------
------ ----- ---------- ------- --------------------- -
------- ------- ---------- - ------ -- ----
------ ------------ -
-
------ ------------------ -------- ------------ ------ -
-------------- -------
-
---------
------ ------- ------------------------------- ------- ------------ ---- --- ---------------- -
------- ----------- - --------------------------- ---- -----------------
-- ------
-- ------------- -
---------- - --------------- - --
-
------ ------------
-
---------
------ ------- ---------------------------- ----------------- ------------------ -------- ------------ ------ -------- ---- ------------------ -------- ---- ------- --- ----- --- ----- -
------ -------------------------------------------- ------ ------------------ ------- ----- ----- -- ---- -- --------------------------------
-
---------
------ ---- ----------------------------------- ------------------ ------------ ------ ---- ------- --- --- --- --- ----- --------- --- ----- -
------------------------------------------ ------ ------- --- --- --------- ------
-- --- - - -- ------------ - -- ---- -- ------------ ----
-------------------- -- -- ------------
- ---- -- --- - - -- ----------- - -- ---- -- ------------ ----
---------------------- -- -- ------------
-
-
-- -- ------------
------- ---- ------------------------- ------------- -
---------- - -----
------------------------------ ------
-
-- -- ------------
------- ---- --------------------------- ------------- -
---------- - ------
------------------------------- ------
-
-在 AppBarLayout 中添加以下代码，即可使用该自定义 Behavior：
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
------------------------------------
--------------------------------------------
-
---- ------- ------ ---
--------------------------------------------------总结
本文介绍了如何解决 Material Design AppBarLayout 内部滚动与其它组件滚动冲突的问题。通过使用 NestedScrollView、禁止 AppBarLayout 滚动或自定义 CoordinatorLayout.Behavior，能够避免该问题带来的页面布局混乱，并更好地应用该组件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ad01f968c7c53b067393d