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

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

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了。

到這裡就結束啦!

相關文章