在 Material Design 的开发中，AppBarLayout 是一个经常被使用的控件，它可以实现顶部导航栏和下拉刷新等功能。然而，在实际开发中，我们常常会遇到 AppBarLayout 抖动的问题，这会影响用户体验，因此，本文将分享一些解决思路，帮助开发者更好地解决这个问题。
问题描述
在使用 AppBarLayout 时，当滑动页面时，AppBarLayout 会出现抖动的现象，如下图所示：
这种抖动现象会给用户带来不好的体验，因此，我们需要解决这个问题。
问题原因
AppBarLayout 抖动的原因是因为它内部的子控件（如 Toolbar、TabLayout 等）的高度发生了变化，导致布局重新计算，从而引起了抖动。
具体来说，当 AppBarLayout 内部的子控件高度发生变化时，AppBarLayout 会重新计算自身的高度，并且会重新布局。这个过程会导致 AppBarLayout 的高度发生变化，从而引起抖动。
解决思路
针对上述问题，我们可以采取以下几种解决思路：
1. 设置 AppBarLayout 的高度为固定值
我们可以将 AppBarLayout 的高度设置为固定值，这样就不会因为子控件高度变化而导致抖动了。具体来说，我们可以在布局文件中设置 AppBarLayout 的高度为固定值，如下所示：
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp">
<!--子控件布局-->
</android.support.design.widget.AppBarLayout>这样，当子控件高度发生变化时，AppBarLayout 的高度仍然是不变的，从而避免了抖动现象。
2. 设置 AppBarLayout 的滑动标志位
我们可以通过设置 AppBarLayout 的滑动标志位来避免抖动。具体来说，我们可以在布局文件中设置 AppBarLayout 的滑动标志位为 scroll|exitUntilCollapsed，如下所示：
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!--子控件布局-->
</android.support.design.widget.AppBarLayout>这样，当子控件高度发生变化时，AppBarLayout 会在滑动到一定位置后才会重新计算自身高度，并且会保持在这个高度上，从而避免了抖动现象。
3. 使用 NestedScrollView 包裹子控件
我们可以使用 NestedScrollView 包裹 AppBarLayout 内部的子控件，从而避免了子控件高度变化而导致的抖动现象。具体来说，我们可以在布局文件中将 AppBarLayout 和 NestedScrollView 嵌套使用，如下所示：
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
-----------------------------------
-------------------------------------
------------
---------------------------------------------
-------------------------------------------
-----------------------------------
------------------------------------
-------------------------------------------------------------
------------
---------------------------------------------
--------------------------------------------------这样，当子控件高度发生变化时，NestedScrollView 会自动适应高度，从而避免了抖动现象。
示例代码
下面是使用第二种解决思路的示例代码：
-- -------------------- ---- -------
------------------------------------------------
-----------------------------------
-------------------------------------
-------------------------------------------
-----------------------------------
------------------------------------
---------------------------------------------------
----------------------------------
-----------------------------------
-------------------------------------------
-------------------------------------------
----------------------------------------------------
----------------------- ------------ --
---------------------------------------------
-------------------------------------------
-----------------------------------
------------------------------------
-------------------------------------------------------------
---------
-----------------------------------
------------------------------------
---------------------------------- --
---------------------------------------------
--------------------------------------------------总结
在 Material Design 的开发中，AppBarLayout 是一个非常常用的控件，但是它会出现抖动的问题，影响用户体验。本文分享了三种解决思路，可以帮助开发者更好地解决这个问题。在实际开发中，我们可以根据具体情况选择合适的解决思路，从而提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/662dfed1d3423812e4baaf31