如何解决 Material Design 下 AppbarLayout 可移动过程中有剩余空白的问题

在 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" 属性，如下所示：

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <com.google.android.material.appbar.MaterialToolbar
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways|snap" />

    <!-- 此处省略其他布局代码 -->

</com.google.android.material.appbar.AppBarLayout>

解释一下 app:layout_scrollFlags 属性的含义：

• scroll 表示当内容向上滚动时，AppbarLayout 会向上滚动；
• enterAlways 表示无论手指向上滑动还是向下滑动，AppbarLayout 都会向上滑动，并且不会完全隐藏；
• snap 表示当 AppbarLayout 停止滑动时，会自动向上或向下“弹”一下，直到完全显示或隐藏。

设置了这些属性之后，当 AppbarLayout 向上移动时，其内部的 Toolbar 就会与视图的顶部对齐，避免了空白区域的出现。

方法二：使用 marginTop

使用 marginTop 属性也可以解决这个问题，不过需要通过编写代码来完成。

方法是，在布局文件中使用 app:layout_scrollFlags="scroll|enterAlwaysCollapsed" 属性，如下所示：

<com.google.android.material.appbar.AppBarLayout
    android:id="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_scrollFlags="scroll|enterAlwaysCollapsed">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"/>

</com.google.android.material.appbar.AppBarLayout>

然后在代码中，找到 Toolbar，并把其 marginTop 属性设置为状态栏的高度即可，如下所示：

// 获取状态栏的高度
int statusBarHeight = CompatUtils.getStatusBarHeight(this);

// 找到 Toolbar
Toolbar toolbar = findViewById(R.id.toolbar);

// 设置 Toolbar 的 marginTop 属性
ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) toolbar.getLayoutParams();
layoutParams.setMargins(0, statusBarHeight, 0, 0);
toolbar.setLayoutParams(layoutParams);

设置完毕后，在 AppbarLayout 向上移动时，Toolbar 就会与状态栏紧密贴合，避免了空白区域的出现。

总结

本文介绍了两种解决 AppbarLayout 可移动过程中有剩余空白的问题的方法，分别是通过设置 app:layout_scrollFlags 属性和使用 marginTop 属性。这些解决方案都比较简单易懂，希望能对前端开发者们有所帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6594c64aeb4cecbf2d90b5c6