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了。
到這裡就結束啦!