在 Material Design 设计中，AppbarLayout 和 CoordinatorLayout 是非常重要的组件，它们可以帮助我们实现复杂的滚动效果。本文将介绍如何使用这两个组件来实现自定义的滚动效果，并附上实例代码。
AppbarLayout 和 CoordinatorLayout 简介
在 Material Design 设计中，AppbarLayout 是一个可以展示标题、图标、按钮等控件的容器，通常用来实现页面的顶部导航栏。而 CoordinatorLayout 是一个可以监听所有子 View 的滚动事件，并根据事件的发生来控制子 View 的运动和位置的容器。
通过在 CoordinatorLayout 中嵌套 AppbarLayout，我们可以实现一些复杂的滑动效果，比如当用户向下滑动页面时，导航栏会逐渐变小并悬浮在页面顶部，当用户向上滑动页面时，导航栏又会回到原始大小并回到页面顶部。
实现自定义的滚动效果
在实现自定义滚动效果之前，我们需要先了解一下 AppbarLayout 和 CoordinatorLayout 中一些常用属性的含义。
app:layout_scrollFlags
设置子 View 在滚动过程中会发生哪些行为。常见的取值有：
scroll：启用子 View 的滑动事件，子 View 会随着滚动而滚动；enterAlways：子 View 会在滑动时进入即可，不用等到下拉到顶部；enterAlwaysCollapsed：与enterAlways类似，但是子 View 进入时会变得更小；exitUntilCollapsed：子 View 会在滑动到顶部之前一直保持现状，直到滑动到顶部时才开始消失。
layout_collapseMode
设置子 View 在收缩过程中的行为。常见的取值有：
pin：子 View 在收缩时会被钉在顶部；parallax：子 View 在收缩时会发生视差效果。
知道了这些属性之后，我们就可以开始实现自定义的滚动效果了。
效果一：向下滑动时导航栏逐渐变小并悬浮
我们需要先给 AppbarLayout 添加一个 scroll 标志，并且将 Toolbar 和 TabLayout 的 layout_collapseMode 设置为 pin，这样就可以让它们在收缩时被钉在顶部。
-- -------------------- ---- -------
-------------------------------------------
------------------------------
-----------------------------------
------------------------------------
---------------------------------------------------
----------------------------------
-------------------------
-----------------------------------
-------------------------------------------
-------------------------------
----------------------------------------
---------------------------
-----------------------------------
------------------------------------
-------------------------------
---------------------------------------------然后，我们需要监听 CoordinatorLayout 的滑动事件，并在滑动过程中修改 Toolbar 和 TabLayout 的大小和位置。
-- -------------------- ---- -------
----- ------------ ------------ - --------------------------------
------------------------------ ------ - -------------------------------- -------------------------------
---------------------- ----------------------- -
---------
------ ------- ------------------------------- ------- ------------ ---- --- ---------------- -
------- ------- - --------------------------- ---- -----------------
----- ------ - -------------------- - -----------------------------------
---------------------------- - ------- ----
---------------------------- - ------- ----
-------------------------------------------- - --------
------------------------------ - ------- ----
------------------------------ - ------- ----
------------------------------------------------ - --------
------ --------
-
---在这段代码中，我们通过计算 AppBarLayout 相对于其总滚动范围的偏移量来修改 Toolbar 和 TabLayout 的大小和位置。
效果二：向上滑动时导航栏回到原始大小并回到页面顶部
实现向上滑动时导航栏回到原始大小并回到页面顶部的效果很简单，只需要将 Toolbar 和 TabLayout 的 layout_scrollFlags 设置为 enterAlways，然后在监听 CoordinatorLayout 的滑动事件，并在滑动到顶部时将 AppbarLayout 的状态重置即可。
-- -------------------- ---- -------
----- ------------ ------------ - --------------------------------
------------------------------ ------ - -------------------------------- -------------------------------
---------------------- ----------------------- -
---------
------ ------- ------------------------------- ------- ------------ ---- --- ---------------- -
------- ------- - --------------------------- ---- -----------------
----- ------ - -------------------- - -----------------------------------
---------------------------- - ------- ----
---------------------------- - ------- ----
-------------------------------------------- - --------
------------------------------ - ------- ----
------------------------------ - ------- ----
------------------------------------------------ - --------
-- ------- -- -- -
-------------------------------
-
------ --------
-
---总结
在 Material Design 设计中，AppbarLayout 和 CoordinatorLayout 是非常强大的滚动容器，可以帮助我们实现各种复杂的滚动效果。本文介绍了如何使用这两个组件来实现自定义的滚动效果，并附上了实例代码。希望本文能对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/659366b4eb4cecbf2d8199b8