在 Material Design 设计风格下，AppbarLayout 是非常重要的组件，它可以为应用提供一个美观的顶部导航栏，并且可以实现滚动隐藏、可移动等动态效果。但是在使用中，你可能会遇到一些困惑，例如可移动过程中会出现剩余空白的情况。接下来，我将会介绍如何解决这个问题。
前置知识
在开始解决这个问题之前，需要对以下知识有一定的了解：
- Material Design
- AppBarLayout 和 Toolbar
- CoordinatorLayout
因此，如果你对以上这些内容还不太熟悉，建议先去学习一下它们的基础知识。
问题分析
在使用 AppbarLayout 可移动效果时，会出现剩余空白的情况，如下图所示：
分析问题，我们可以发现，当 AppbarLayout 向上移动时，其内部包含的 Toolbar 也会向上移动，如果 AppbarLayout 移动到最顶部，其内部的 Toolbar 就会被顶出视图的顶部，此时就会留下一个空白区域。那么我们需要解决的问题就是如何在 AppbarLayout 移动到顶部时，让 Toolbar 能够正确地停留在视图的顶部。
解决方案
解决这个问题有多种方法，下面我将介绍两种比较常见的方法：
方法一：使用 app:layout_scrollFlags
通过设置 app:layout_scrollFlags 属性可以实现 AppbarLayout 的可移动和滚动隐藏效果，同时也可以解决上述问题。
具体做法是，在 AppbarLayout 的内部包含一个 Toolbar，并在 Toolbar 的布局文件中设置 app:layout_scrollFlags="scroll|enterAlways|snap" 属性，如下所示：
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
-------------------------------------
---------------------------------------------------
-----------------------------------
-------------------------------------------
----------------------------------------
------------------------------------------------ --
---- ---------- ---
--------------------------------------------------解释一下 app:layout_scrollFlags 属性的含义：
scroll表示当内容向上滚动时，AppbarLayout 会向上滚动；enterAlways表示无论手指向上滑动还是向下滑动，AppbarLayout 都会向上滑动，并且不会完全隐藏；snap表示当 AppbarLayout 停止滑动时，会自动向上或向下“弹”一下，直到完全显示或隐藏。
设置了这些属性之后，当 AppbarLayout 向上移动时，其内部的 Toolbar 就会与视图的顶部对齐，避免了空白区域的出现。
方法二：使用 marginTop
使用 marginTop 属性也可以解决这个问题，不过需要通过编写代码来完成。
方法是，在布局文件中使用 app:layout_scrollFlags="scroll|enterAlwaysCollapsed" 属性，如下所示：
-- -------------------- ---- -------
------------------------------------------------
-------------------------
-----------------------------------
------------------------------------
-----------------------------------------------------
---------------------------------------------------
-------------------------
-----------------------------------
-------------------------------------------
------------------------------------------
--------------------------------------------------然后在代码中，找到 Toolbar，并把其 marginTop 属性设置为状态栏的高度即可，如下所示：
-- -------------------- ---- ------- -- -------- --- --------------- - ------------------------------------- -- -- ------- ------- ------- - --------------------------- -- -- ------- - --------- -- ---------------------------- ------------ - ------------------------------ -------------------------- -------------------------- ---------------- -- --- --------------------------------------
设置完毕后，在 AppbarLayout 向上移动时，Toolbar 就会与状态栏紧密贴合，避免了空白区域的出现。
总结
本文介绍了两种解决 AppbarLayout 可移动过程中有剩余空白的问题的方法，分别是通过设置 app:layout_scrollFlags 属性和使用 marginTop 属性。这些解决方案都比较简单易懂，希望能对前端开发者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6594c64aeb4cecbf2d90b5c6