CoordinatorLayout提供Behaviors接口,子View通過實現Behaviors接口來協調和其它View之間的顯示效果,可以這麼理解:
CoordinatorLayout讓其子View之間互相知道彼此的存在,任意一個子View的狀態變化會通過Behaviors通知其它子View,CoordinatorLayout就像一個橋樑,連接不同的View,並使用Behavior處理各個子View之間的通信
效果一:
xml:
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<androidx.appcompat.widget.Toolbar
android:id="@+id/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll"
app:navigationIcon="@android:drawable/ic_dialog_email"
app:title="Title" />
<!--Tab導航欄-->
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:tabMode="fixed" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
AppBarLayout下view 添加 app:layout_scrollFlags屬性
- scroll:讓該View可以滾動出屏幕
- enterAlways:不需要滾動到頂部,只要有向上滾動的事件就顯示該View
- enterAlwaysCollapsed:定義該View何時進入,如果你定義了一個最小高度minHeight,同時enterAlways也定義了,那麼該View將會在到達這個最小高度的時候開始慢慢顯示,直到滾動組件滾動到頂部時再完全展開
- exitUntilCollapsed:定義該View何時退出,如果你定義了一個最小高度minHeight,那麼這個View將在滾動到達這個最小高度時消失
如果不設置layout_scrollFlags屬性,那麼該View就會固定在屏幕上,enterAlwaysCollapsed和exitUntilCollapsed屬性主要是在搭配CollapsingToolbarLayout時使用的
注意:佈局的時候,AppBarLayout裏面滾動的View要放在固定的View上面
然後在CoordinatorLayout佈局裏放一個可以滾動的View,這裏使用ViewPager裏放置一個RecylerView,爲該ViewPager設置app:layout_behavior屬性,這裏可直接使用Android自帶的值
app:layout_behavior=”@string/appbar_scrolling_view_behavior”
設置該值的作用相當於告訴CoordinatorLayout,此View是一個滾動控件,如果該View滾動了,那麼設置了layout_scrollFlags屬性的控件就可以響應滾動事件了
想實現效果一,總結
使用CoordinatorLayout作爲根佈局
使用AppBarLayout包裹頭部View,並給需要滾動的View設置app:layout_scrollFlags屬性
給滑動組件設置app:layout_behavior屬性
效果二:
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".view.ScrollActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="180dp"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="88dp"
app:expandedTitleMarginStart="66dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!--拉開後顯示的背景圖片-->
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/wallet_bg"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="@+id/tb_toolbar"
android:layout_width="match_parent"
android:layout_height="50dp"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll"
app:navigationIcon="@android:drawable/ic_dialog_email"
app:title="Title" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
android:id="@+id/swipeRefresh"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
- title:設置Toolbar的標題,注意:如果在CollapsingToolbarLayout中指定了title屬性,那麼Toolbar中的title屬性將會變得無效
- expandedTitleMarginStart:設置下拉伸縮完成後,ToolBar標題文字左邊的margin距離
- expandedTitleMarginEnd:設置下拉伸縮完成後,Toolbar標題文字右邊的margin距離
- contentScrim:設置Toolbar摺疊到頂部後的背景
- layout_collapseMode:摺疊效果,有兩個值,pin代表從底部拉出,parallax代表從中間展開
想實現效果二,總結
首先我們設置一個固定的高度給AppBarLayout
然後給AppBarLayout的子View包裹了一層CollapsingToolbarLayout,並設置CollapsingToolbarLayout的滾動屬性爲scroll|exitUntilCollapsed
最後再爲CollapsingToolbarLayout裏的子View設置layout_collapseMode屬性,指定其展示效果