如何使用 AppBarLayout 实现 Material Design 中的滑动效果

在 Material Design 中，滑动效果是非常常见的交互方式。通过滑动页面，可以实现一些交互效果，比如隐藏/显示 Toolbar、改变元素的大小和位置等。而 AppBarLayout 是谷歌官方推荐的实现滑动效果的控件之一。

本文将详细介绍如何使用 AppBarLayout 实现 Material Design 中的滑动效果，包括滑动显示和隐藏 Toolbar，收缩 Header 和滑动渐变等效果，并提供相关的代码示例和指导意义。

什么是 AppBarLayout

AppBarLayout 是一个垂直方向的 LinearLayout，用于与 CoordinatorLayout 搭配使用，实现 Material Design 的滑动效果。它可以包含一个 Toolbar 和一个或多个可滑动的 View（比如 RecyclerView、NestedScrollView 等）。

AppBarLayout 可以对内部的 View 进行滑动监听，实现与 CoordinatorLayout 搭配使用的复杂滑动效果。当 AppBarLayout 中的 View 发生滑动时，AppBarLayout 会根据滑动的情况调整自身的位置和大小，达到一些特殊的效果。

如何使用 AppBarLayout 实现滑动显示和隐藏 Toolbar

在 Material Design 中，经常使用 Toolbar 来替代传统的 ActionBar。而滑动显示和隐藏 Toolbar 是一个常见的效果。比如在顶部上滑的时候隐藏 Toolbar，下滑的时候再显示出来。

通过使用 AppBarLayout，可以很容易地实现这个效果。只需要将 Toolbar 和可滑动的 View 放到 AppBarLayout 中，并将 Toolbar 的 app:layout_scrollFlags 属性设置为 scroll|enterAlways 即可。

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/appbar_height">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- Your content here -->

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

其中，app:layout_scrollFlags 属性指定了 Toolbar 的滚动模式，即 scroll|enterAlways。其中 scroll 表示当内容滚动时 Toolbar 也会跟着滚动，而 enterAlways 表示当AppBarLayout 滚出屏幕时，Toolbar 会重新显示出来。

如何使用 AppBarLayout 实现收缩 Header 效果

在一些应用中，顶部的 Header 可能比 Toolbar 还要高，如果想要在滑动的时候将其收缩起来，可以借助 AppBarLayout 实现。

首先，需要将 Header 和 Toolbar 放置到 AppBarLayout 中，并设置 Toolbar 的滑动模式为 scroll|enterAlways。然后在 Header 的根布局上设置 app:layout_scrollFlags 为 scroll|exitUntilCollapsed|snap。其中 scroll 和 exitUntilCollapsed 表示 Header 随着内容滑动而滑动，并在滑动到最小高度时停止滑动，而 snap 表示 Header 在滑动到最小高度时会快速收缩到最小高度。

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/appbar_height">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <!-- Your content here -->

        </android.support.v4.widget.NestedScrollView>

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:src="@drawable/header_image"
            android:scaleType="centerCrop" 
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"/>

    </android.support.design.widget.AppBarLayout>

</android.support.design.widget.CoordinatorLayout>

如何使用 AppBarLayout 实现滑动渐变效果

在 Material Design 中，页面滑动过程中可以添加渐变效果。比如在滑动到顶部时，Toolbar 从透明变为不透明。

通过 AppBarLayout，可以很容易地实现这个效果。只需要在 Toolbar 上设置一个 background 属性，并在AppBarLayout 中添加一个 View，用于实现延伸到顶部的效果。

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="@dimen/appbar_height">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:src="@drawable/header_image"
            android:scaleType="centerCrop" 
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways">

            <View
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:alpha="0"
                android:background="@color/colorPrimaryDark"/>

        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <!-- Your content here -->

    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

其中，Toolbar 上的 View 的 alpha 属性设置为 0，即默认是透明的。在 AppBarLayout 中添加 OnOffsetChangedListener，根据 AppBarLayout 的偏移量来改变 View 的透明度，实现渐变效果。

AppBarLayout appBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout);
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
final View toolbarView = toolbar.getChildAt(0);

appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
    @Override
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
        float percent = Math.abs(verticalOffset) * 1.0f / appBarLayout.getTotalScrollRange();
        toolbarView.setAlpha(percent);
    }
});

总结

本文详细介绍了如何使用 AppBarLayout 实现 Material Design 中的滑动效果，包括滑动显示和隐藏 Toolbar，收缩 Header 和滑动渐变等效果。AppBarLayout 可以说是实现 Material Design 中复杂滑动效果的重要控件之一。通过学习本文的内容，开发者可以掌握 AppBarLayout 的基本用法，为构建高质量的 Material Design 应用提供帮助。

完整代码请参考 GitHub。

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