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/zh-tw/n/184843.html