Android | 玩轉AppBarLayout，設定scrollFlags滑動屬性詳解

龍旋之谷發表於2021-03-15
AndroidAPP

CoordinatorLayout與AppBarLayout的配合使用，在之前的文章中我們也經常使用，主要是專門用來打造各種炫酷的效果。

有童鞋看了之前的文章反饋對AppBarLayout中的scrollFlags屬性的設定不是很明白，這篇文章我們具體來講講這個屬性的用法效果。

我們先簡單瞭解一下AppBarLayout：

AppBarLayout繼承自LinearLayout，佈局方向為垂直方向。所以你可以把它當成垂直佈局的LinearLayout來使用。AppBarLayout是在LinearLayou上加了一些材料設計的概念，它可以讓你定製當某個可滾動View的滾動手勢發生變化時，其內部的子View實現何種動作。

這裡說得其內部的子View實現任何動作，就是可以通過scrollFlags屬性進行設定達到想要的效果。

那麼app:layout_scrollFlags可以設定哪些動作呢？

下面我們通過XML佈局檔案程式碼和對應的效果圖進行解析：

1、scroll

子View會跟隨滾動事件一起發生移動而滾出或滾進螢幕。注意兩點：第一點，如果使用了其他值，必定要使用這個值才能起作用；第二點：如果在這個子View前面的任何其他子View沒有設定這個值，那麼這個子View的設定將失去作用。

佈局檔案：


<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_toolbar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll"
            app:title="@string/app_name" />

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

對應效果圖：

在這裡插入圖片描述

2、enterAlways

和scroll相比較，其實就是向下滾動時優先順序問題，scroll首先滑動的是列表，列表的資料全部滾動完畢，才開始toolbar滑動。而scroll | enterAlways首先滑動的是toolbar ，然後再去滑動其他的view。只是優先順序先後的問題。

佈局檔案：程式碼型別，只是改變屬性值，這裡就不贅述了

......................
 <android.support.v7.widget.Toolbar
            android:id="@+id/tb_toolbar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="@string/app_name" />
 ......................

對應效果圖：

在這裡插入圖片描述

3、enterAlwaysCollapsed

enterAlwaysCollapsed是enterAlways的附加標誌，這裡涉及到子View的高度和最小高度，向下滾動時，子View先向下滾動最小高度值，然後Scrolling View開始滾動，到達邊界時，子View再向下滾動，直至顯示完全。

佈局檔案：程式碼型別，只是改變屬性值，這裡就不贅述了


............................
 <android.support.v7.widget.Toolbar
            android:id="@+id/tb_toolbar"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:minHeight="50dp"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:title="@string/app_name" />
.............................

對應效果圖：

在這裡插入圖片描述

4、exitUntilCollapsed

這裡也涉及到最小高度。發生向上滾動事件時，子View向上滾動直至最小高度，然後Scrolling View開始滾動。也就是，子View不會完全退出螢幕。

佈局檔案：程式碼型別，只是改變屬性值，這裡就不贅述了


...................................
<android.support.v7.widget.Toolbar
            android:id="@+id/tb_toolbar"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:minHeight="50dp"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="@string/app_name" />
 ....................................

對應效果圖：

在這裡插入圖片描述
5、snap

子View滾動比例的吸附效果。也就是說子View不會存在區域性顯示的情況，滾動到子View的部分高度，當我們鬆開手指時，子View要麼向上全部滾出螢幕，要麼向下全部滾進螢幕。

佈局檔案：程式碼型別，只是改變屬性值，這裡就不贅述了

......................
 <android.support.v7.widget.Toolbar
            android:id="@+id/tb_toolbar"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|snap"
            app:title="@string/app_name" />
......................

對應效果圖：

在這裡插入圖片描述
6、snapMargins

snapMargins是必須配合snap一起使用的額外的flag。如果設定的話，這個View將會被snap到它的頂部外邊距和它的底部外邊距的位置，而不是這個View自身的上下邊緣。

佈局檔案：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/tb_toolbar"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_marginStart="10dp"
            android:layout_marginTop="200dp"
            android:layout_marginEnd="10dp"
            android:layout_marginBottom="10dp"
            android:background="@color/colorAccent"
            app:layout_scrollFlags="scroll|snap|snapMargins"
            app:title="@string/app_name" />

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

對應的效果圖：

在這裡插入圖片描述
可以看到Margin生效了，滑動必須超過Toolbar的高度以及上下Margin就會繼續滑動，否則就恢復。

上面的內容就介紹完了，程式碼基本都在文章裡，就不放demo了。

到這裡就結束啦！

相關文章