Android AppbarLayout: 实现流畅的界面切换和操作控制

一、介绍

Android AppbarLayout是Android设计库中的一个重要组件，它是Toolbar的父容器，能够方便地实现Material Design的UI风格，在App界面中提供流畅的界面切换和用户操作控制。本文就将从多个方面对AppbarLayout进行详细讲解和实战演示。

二、AppbarLayout的使用

在使用AppbarLayout之前需要引入design包，实现流畅的界面切换和操作控制不离不弃。下面是引入design包的方法:

   dependencies {
        compile 'com.android.support:design:25.1.0'
    }

AppbarLayout常见的使用方法是作为CoordinatorLayout的子布局来实现。

    
    <?xml version="1.0" encoding="utf-8"?>
    <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="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                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">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Demo" />

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

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

上述代码示例中，首先是引入了CoordinatorLayout和AppBarLayout，然后Toolbar作为AppBarLayout的子View添加进去，而NestedScrollView则是作为整个布局的内容。

三、AppbarLayout的关键概念

1. Scroll Flags

Scroll Flags是指AppBarLayout的滑动属性，用于控制其子View的滑动效果，常用的几个Flag包括：

scroll：表示随着滚动事件而滚动，一般设置在AppBarLayout的子View所在的View上，用于动态控制其出现和隐藏。
enterAlways：表示随意的进入，一般设置在Toolbar上，用于在下拉页面时使Toolbar始终保持显示状态。
enterAlwaysCollapsed：表示进入时折叠，一般与enterAlways联用，用于控制Toolbar的折叠效果。
exitUntilCollapsed：表示向上滑出直到折叠，同样与enterAlways联用，仅在enterAlwaysCollapsed设置过后才有意义。

2. Layout Behaviors

Layout Behaviors是指CardView等布局组件结合AppBarLayout实现动态效果。AppBarLayout本身作为布局容器，对其子View的布局位置进行了一定的限制，常用的布局行为包括:

AppBarLayout.ScrollingViewBehavior：用于实现联动效果，当AppBarLayout处于展开状态时，NestedScrollView随着内容滑动。
AppBarLayout.LayoutParams：用于控制子View的滑动效果，以及与布局行为组件的结合效果，例如CardView组件与AppBarLayout组件的展开、折叠或滑出。

四、AppbarLayout实战演示

1. AppbarLayout与NavigationView相结合实现Drawer效果

AppbarLayout在结合NavigationView使用时，可以实现Drawer效果，具体实现方法如下：

    
    <?xml version="1.0" encoding="utf-8"?>
    <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="wrap_content">

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

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

        <android.support.v4.widget.DrawerLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.design.widget.NavigationView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_gravity="start"/>

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

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Demo" />

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

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

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

上述代码示例中，使用CoordinatorLayout来充当滑动流畅的父元素，AppBarLayout与NavigationDrawer一同初始化。同时，Toolbar设置了enterAlways标志位，表示在任何时候都保持显示状态，并为它的MotionEvent提供了layout_scrollFlags滚动行为标志位，以便滚动时消失。

2. AppbarLayout的滑动事件监听

为了支持对AppBarLayout的滚动事件监听，我们需要实现AppBarLayout.OnOffsetChangedListener接口，并在onOffsetChanged函数中实现相应的判断逻辑。代码实现如下：

    
        appBar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (Math.abs(verticalOffset) == appBarLayout.getTotalScrollRange()) {
                    //当滑动到最顶端时
                    collapsingToolbarLayout.setTitle("Title");
                } else if (verticalOffset == 0) {
                    //完全展开时
                    collapsingToolbarLayout.setTitle("");
                } else {
                    collapsingToolbarLayout.setTitle("");
                }
            }
        });

上述代码实现中，通过AppBarLayout的addOnOffsetChangedListener函数对滑动事件进行监听，当滑动到最顶端时通过collapsingToolbarLayout.setTitle函数进行标题的设置。

3. AppbarLayout实现下拉刷新

AppbarLayout可以和SwipeRefreshLayout实现下拉刷新的效果，具体实现方法如下：

    
    <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsingToolbarLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:title="title">

                <android.support.v7.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:background="?attr/colorPrimary"
                    app:contentInsetStart="0dp"
                    app:layout_collapseMode="pin"
                    app:title="title" />

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

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

        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/swipe_refresh_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recyclerview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:clipToPadding="false"
                android:paddingTop="16dp"
                android:scrollbars="vertical" />

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

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

上述代码中，使用了SwipeRefreshLayout实现了下拉刷新效果，同时在布局文件中使用CoordinatorLayout与AppBarLayout实现了界面控制效果，并使用CollapsingToolbarLayout轻松实现了AppBarLayout下拉时的折叠效果。

五、总结

本文详细介绍了Android AppbarLayout的使用方法、关键概念以及实战演示。通过演示代码示例，帮助开发者快速掌握AppBarLayout的使用方法，并能够实现流畅的界面切换和用户操作控制。如果您还没有使用AppBarLayout，那么赶紧开始对它进行尝试吧！

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/184843.html