前言
在 Material Design 的设计风格中，AppBarLayout、CollapsingToolbarLayout 和 NestedScrollView 是常用的控件。AppBarLayout 提供了给用户导航的工具栏，而 CollapsingToolbarLayout 则可以让工具栏随着滚动的进度来进行折叠和展开，同时结合 NestedScrollView 可以实现更加复杂的布局效果。
本文主要讨论如何合理组合这三个控件，实现优美的交互效果，同时也希望能够提供一些实用的学习和指导意义。
AppBarLayout
AppBarLayout 可以看做是一个纵向的线性布局，其中可以放置 Toolbar、TabLayout 等控件。它的主要功能是提供给用户导航的工具栏，当用户向下滑动时，这个工具栏应该是一直保留在屏幕的顶部的。
-- -------------------- ---- -------
------------------------------------------------
-------------------------
-----------------------------------
-------------------------------------
---------------------------------------------------
-------------------------
-----------------------------------
-------------------------------------------
---------------------------------------
---------------------------------
----------------------------
--------------------------------------
-------------------------- --
--------------------------------------------------CollapsingToolbarLayout
CollapsingToolbarLayout 是一个可折叠的工具栏，它可以根据滚动的进度来展开或折叠工具栏。可以看做是对 AppBarLayout 的一个增强。
-- -------------------- ---- -------
-----------------------------------------------------------
------------------------------------
-----------------------------------
------------------------------------
--------------------------------------------------
-------------------------------------
-----------------------------------
---------------------------------
-----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
--------------------- ---------
----------
-----------------------------------
------------------------------------
------------------------------
-------------------------- --
-------------------------------------------------------------NestedScrollView
NestedScrollView 是一个支持嵌套滚动的 ScrollView，它可以和 AppBarLayout、CollapsingToolbarLayout 等控件配合使用，实现复杂的布局效果。它的 layout_behavior 属性必须设置为@string/appbar_scrolling_view_behavior，这样它才能被正确地滚动到顶部。
-- -------------------- ---- -------
--------------------------------------
------------------------------------
-----------------------------------
------------------------------------
-------------------------------------------------------------
-------------
-----------------------------------
------------------------------------
-------------------------------
---------
-----------------------------------
------------------------------------
---------------------- --
---------------
----------------------------------------合理组合
将以上三个控件合理地组合起来，可以实现更加丰富的交互效果。比如当用户向下滑动时，包含在 NestedScrollView 中的内容将一直被展示，但 AppBarLayout 和 CollapsingToolbarLayout 中的内容将逐渐折叠到指定高度。当 NestedScrollView 滚动到顶部时，AppBarLayout 和 CollapsingToolbarLayout 将再次完全显示出来。
我们可以通过设置 CollapsingToolbarLayout 的 layout_scrollFlags 属性来指定它在滚动时的行为。scroll 表示视图会跟随滚动事件一起发生滚动，而 exitUntilCollapsed 表示在 CollapsingToolbarLayout 完全折叠后，直到 NestedScrollView 发生完全滚动之前，CollapsingToolbarLayout 显示内容将保留在屏幕顶部。
完整的布局代码如下：
-- -------------------- ---- -------
----------------------------------------------------
-----------------------------------
-------------------------------------
------------------------------------------------
-------------------------
-----------------------------------
-------------------------------------
-----------------------------------------------------------
------------------------------------
-----------------------------------
------------------------------------
--------------------------------------------------
-------------------------------------
-----------------------------------
---------------------------------
-----------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
--------------------- ---------
----------
-----------------------------------
------------------------------------
------------------------------
-------------------------- --
-------------------------------------------------------------
---------------------------------------------------
-------------------------
-----------------------------------
-------------------------------------------
---------------------------------------
---------------------------------
----------------------------
--------------------------------------
-------------------------- --
--------------------------------------------------
--------------------------------------
------------------------------------
-----------------------------------
------------------------------------
-------------------------------------------------------------
-------------
-----------------------------------
------------------------------------
-------------------------------
---------
-----------------------------------
------------------------------------
---------------------- --
---------------
----------------------------------------
------------------------------------------------------总结
AppBarLayout、CollapsingToolbarLayout 和 NestedScrollView 是 Material Design 中常用的控件，在合理组合时可以实现优美的交互效果。通过设置 CollapsingToolbarLayout 的 layout_scrollFlags 属性和 NestedScrollView 的 layout_behavior 属性，可以指定它们的滚动行为。在实际开发中，可以根据具体的需求进行组合，并注意掌握各个属性的使用方法，以实现更加丰富的布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c5d8d095c405902ee38db1