前言
AppBarLayout 是 Android Material Design 中非常重要的组件之一。它通常用于实现 Material Design 风格的顶部导航栏，提供了丰富的布局和行为特性，可以满足大部分使用场景的需求。但是，对于初学者来说，AppBarLayout 的文档可能存在一定的难度，这篇文章旨在对其进行解读，并提供实际的使用指导。
核心概念
在深入进入 AppBarLayout 的细节之前，我们先了解一些 AppBarLayout 中的核心概念和术语：
- App bar：指代整个顶部导航栏区域，包括 ToolBar、TabLayout、SearchView 等。
- Scrolling view：指代可以垂直滚动的视图区域，例如 RecyclerView、ScrollView 等。
- Scroll flags：指代 AppBarLayout 中可以设置的一些滚动标记，用于控制 AppBarLayout 的行为特性。
下面我们从这些核心概念出发，逐一深入 AppBarLayout 中的细节。
布局结构
在使用 AppBarLayout 时，我们通常会将它作为布局的顶级元素，然后在其中嵌套其他视图元素，例如 ToolBar、TabLayout、滚动视图等。下面是一个典型的布局结构：
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------
-----------------------------------
-------------------------------------
-----------------------------------------------------------
-----------------------------------
------------------------------
----------
-----------------------------------
------------------------------------
--------------------------------
---------------------------------------------------
-----------------------------------
-------------------------------------------
------------------------------
-------------------------------------------------------------
--------------------------------------------------
------------------------------------------
-----------------------------------
--------------------------------------
------------------------------------------------------在这个布局中，我们使用了 CoordinatorLayout 作为 AppBarLayout 的父容器，因为 CoordinatorLayout 提供了一系列滚动相关的特性，可以帮助我们实现复杂的交互效果。
然后，我们在 AppBarLayout 中嵌套了一个 CollapsingToolbarLayout。CollapsingToolbarLayout 提供了一种可折叠的顶部导航栏效果，可以实现从一个完整的 Navigation Bar 切换为一个只有 Title 的 Navigation Bar，同时可以支持背景图随之变化，视觉效果非常惊艳。
在 CollapsingToolbarLayout 中，我们还通过 ImageView 和 MaterialToolbar 添加了一个背景图和一个 Title Bar。ImageView 的作用是将图片作为背景图展示，MaterialToolbar 承担了 Title Bar 的显示任务。
最后，我们将一个 RecyclerView 嵌套在 CoordinatorLayout 中，作为可滚动的内容视图。
这样，一个简单的 AppBarLayout 布局就完成了。
ScrollFlags
正如上文所提到的，AppBarLayout 中有一系列可以设置的 ScrollFlags，用于控制 AppBarLayout 的行为特性。这些 ScrollFlags 主要定义了 AppBarLayout 在滚动时应该如何改变自身的属性和行为。
我们可以在 AppBarLayout 的 immediate child view 中添加一些滚动标记，以控制它们在 AppBarLayout 滚动时的特定行为。这些滚动标记也被称为 “scrolling flags”，它们以二进制形式组合在一起。
下面是几个常用的滚动标记：
scroll
该标记可应用于所有 View 类型，并标识此 View 随着滚动操作将向上滚动离开屏幕，否则将向下滚动进入屏幕。
enterAlways、enterAlwaysCollapsed
当 Scrolling View 向下滚动时，标有 enterAlways 的 View 应该立即进入屏幕。另一方面，标有 enterAlwaysCollapsed 的 View 将进入时完全折叠（即仅显示其最小高度），并仅在之后显式滚动之后才扩展到完整高度。这主要用于工具栏上的视图，例如 TabLayout。
exitUntilCollapsed
当 Scrolling View 向上滚动时，标有此标记的 View 应该完全滚出屏幕，直到达到其最小高度为止。这主要用于标题或 Toolbar 上的视图。
snap
在 Scrolling View 停止滚动时，任何带有此标记的 View 应自动“捕捉”到其最接近的折叠状态。这可以确保在快速滚动 Scrolling View 时，AppBarLayout 与此 view 之间的任何位置不会卡住，在滚动停止时立即到达其最终状态。
示例代码
下面是一个简单的 AppBarLayout 示例代码，展示了如何将 CollapsingToolbarLayout 与 MaterialToolbar、ImageView 等组件结合起来，实现可折叠和可滚动的 Navigation Bar。
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------
-----------------------------------
-------------------------------------
-----------------------------------------------------------
--------------------------------
-----------------------------------
-----------------------------
----------------------------
----------------------------------
-------------------------------------------------------------
--------------------------
-----------------------------
---------------------------------------------------
-----------------------------------
---------------------------------------------------
----------
---------------------------
-----------------------------------
------------------------------------
------------------------------
--------------------------------
---------------------------------------------------
-------------------------
-----------------------------------
-------------------------------------------
----------------------------
--------------------------
--------------------------------------
----------------------- --------
-------------------------------
-------------------------------------------------------------
--------------------------------------------------
------------------------------------------
----------------------------
-----------------------------------
------------------------------------
-------------------------
--------------------------------------------------------------
------------------------------------------------------在这个示例代码中，我们首先创建了一个 CoordinatorLayout 作为顶层布局。然后，创建了一个 AppBarLayout 作为 CoordinatorLayout 的第一个子 View。
接着，在 AppBarLayout 中创建了一个 CollapsingToolbarLayout，其中包含了一个 ImageView 和一个 MaterialToolbar。ImageView 的作用是将图片作为背景图展示，同时也是 CollapsingToolbarLayout 可折叠的主体。MaterialToolbar 则是 AppBarLayout 的 Title Bar，我们在其中添加了一些菜单项和返回按钮等功能。
最后，我们将一个 RecyclerView 放置在 CoordinatorLayout 中，作为可滚动的内容视图。我们可以使用 app:layout_behavior="@string/appbar_scrolling_view_behavior" 属性指定 RecyclerView 与 AppBarLayout 的联动关系，以实现 AppBarLayout 的滚动效应。
结论
至此，我们已经对 Android Material Design 的 AppBarLayout 官方文档进行了详细的解读，并提供了实际的使用指导和示例代码。希望这篇文章能够帮助到正在学习和使用 AppBarLayout 的开发者，同时也能够推广 Material Design 风格的 UI 设计思想。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674ae5b3da05147dd02929e7