序言

在我們對NavigationView側滑,TextInputLayout輸入框,Snackbar彈出提示框,FloatingActionBar圓形button,TabLayout頂部導航欄及CoordinatorLayout有了一定的瞭解後,我們最後將對AppBarLayout,CollapsingToolbarLayout進行最後的分析,我們先看兩張效果圖,(因為暫時沒找到好的方法來錄製gif,先借用網上的圖)

AppBarLayout

AppBarLayout 是繼承LinerLayout實現的一個ViewGroup容器元件,預設的AppBarLayout是垂直方向的,它的作用是把AppBarLayout所包裹的內容都作為AppBar, 支援手勢滑動操作,可以管理其中的控制元件在內容滾動時的行為,如圖所示:

實現這樣效果的程式碼佈局如下:

1. <android.support.design.widget.AppBarLayout  
2.      android:id="@+id/appbar"
3.      android:layout_width="match_parent"
4.      android:layout_height="wrap_content"
5.      android:fitsSystemWindows="true">  
6.      <android.support.v7.widget.Toolbar  
7.           android:id="@+id/toolbar"
8.           android:layout_width="match_parent"
9.           android:layout_height="?attr/actionBarSize"
10.           android:background="?attr/colorPrimary"
11.           app:layout_scrollFlags="scroll|enterAlways" />  
12.       <android.support.design.widget.TabLayout  
13.           android:id="@+id/appbar_tab_layout"
14.           android:layout_width="match_parent"
15.           android:layout_height="wrap_content"
16.           app:tabTextColor="@android:color/white"             app:tabSelectedTextColor="@android:color/holo_red_light"
17.           app:tabGravity="fill" />  
18.   </android.support.design.widget.AppBarLayout>  

注意:這裡我們將Toolbar和TabLayout共同組成AppbarLayout的內容,並且AppbarLayout必須作為ToolBar的父佈局

CoordinatorLayout與AppbarLayout的結合使用

我們知道,AppBarLayout是支援我們的手勢滑動操作的,不過需要跟CoordinatorLayout一起搭配使用,我們先看兩張效果圖,然後再進行分析:

左側是我們初始化的程式碼,從上至下分別為Toolbar,TabLayout,ViewPager,底部為一個FloatingActionBar,我們現在來看一下xml檔案佈局的程式碼:

1. <?xml version="1.0" encoding="utf-8"?>  
2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
3.     xmlns:app="http://schemas.android.com/apk/res-auto"
4.     android:id="@+id/main_content"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent"
7.     >  
8.     <android.support.design.widget.AppBarLayout  
9.         android:id="@+id/appbar"
10.         android:layout_width="match_parent"
11.         android:layout_height="wrap_content"
12.         android:fitsSystemWindows="true">  
13.         <android.support.v7.widget.Toolbar  
14.             android:id="@+id/toolbar"
15.             android:layout_width="match_parent"
16.             android:layout_height="?attr/actionBarSize"
17.             android:background="?attr/colorPrimary"
18.             app:layout_scrollFlags="scroll|enterAlways" />  
19.         <android.support.design.widget.TabLayout  
20.             android:id="@+id/appbar_tab_layout"
21.             android:layout_width="match_parent"
22.             android:layout_height="wrap_content"
23.             app:tabTextColor="@android:color/white"
24.             app:tabSelectedTextColor="@android:color/holo_red_light"
25.             app:tabGravity="fill" />  
26.     </android.support.design.widget.AppBarLayout>  
27.     <!--可滑動的佈局內容,內部必須包含一個RecyclerView-->  
28.     <android.support.v4.view.ViewPager  
29.         android:id="@+id/appbar_viewpager"
30.         android:layout_width="match_parent"
31.         android:layout_height="match_parent"
32.         app:layout_behavior="@string/appbar_scrolling_view_behavior" />  
33.     <android.support.design.widget.FloatingActionButton  
34.         android:id="@+id/fab"
35.         android:layout_width="wrap_content"
36.         android:layout_height="wrap_content"
37.         android:layout_gravity="bottom|end"
38.         app:borderWidth="0dp"
39.         android:layout_margin="20dp"
40.         android:src="@drawable/floating_icon" />  
41. </android.support.design.widget.CoordinatorLayout>  

我們現在來分析一下整個佈局中CoordinatorLayout的作用:

1. 因為CoordinatorLayout是一個超級的FrameLayout,所以我們只要設定android:layout_gravity="bottom|end"這個屬性即可將FloatingActionBar放置在底部靠右的位置;

2. 如果我們想要在手指向上滑動的時候Toolbar隱藏,就需要給Toolbar設定一個屬性,app:layout_scrollFlags="scroll|enterAlways",來確定滾動出螢幕時候的動作,我們現在來解釋一些這些引數:

   • scroll: 所有想滾動出螢幕的view**都需要**設定這個flag， 沒有設定這個flag的view將被固定在螢幕頂部。例如，TabLayout 沒有設定這個值，將會停留在螢幕頂部。
   • enterAlways: 配合scroll使用,設定這個flag時，任意向下的滾動都會導致該view變為可見，當向上滑的時候Toolbar就隱藏，下滑的時候顯示，啟用快速“返回模式”。
   • enterAlwaysCollapsed: 這個flag定義的是何時進入（已經消失之後何時再次顯示）,配合scroll使用,當你的檢視已經設定minHeight屬性又使用此標誌時，那麼view將在到達這個最小高度的時候開始顯示，並且從這個時候開始慢慢展開，當滾動到頂部的時候完全展開。
   • exitUntilCollapsed: 這個flag是定義何時退出，當你定義了一個minHeight，這個view將在滾動到達這個最小高度的時候消失。
   • 注意:這些flag的模式一般是前兩個一起使用或者 scroll與enterAlwaysCollapsed 一起使用,而最後一個flag只有在CollapsingToolbarLayout中才有用,所以這些flag的使用場景,一般都是固定的;

3. 當然,為了使Toolbar可以滾動,還需要一個條件,就是CoordinatorLayout佈局下需要包裹一個可以滑動的佈局，比如 RecyclerView或者NestedScrollView(ListView及ScrollView不支援),CoordinatorLayout包含的子佈局中帶有滾動屬性的View需要設定app:layout_behavior屬性。示例中Viewpager設定了此屬性:app:layout_behavior="@string/appbar_scrolling_view_behavior",這樣一來AppBarLayout就能響應RecyclerView中的滾動事件,CoordinatorLayout在接受到滑動時會通知AppBarLayout 中可滑動的Toolbar可以滑出螢幕了;

總結:如果想讓Toolbar劃出螢幕,需要做到以下4點

1. CoordinatorLayout作為頂層的父佈局
2. 需要給Toolbar也就是想要劃出螢幕的view設定flag值,app:layout_scrollFlags=”scroll|enterAlways”
3. 需要給可滑動的元件設定一個layout_behavior的屬性,示例中為viewpager,app:layout_behavior="@string/appbar_scrolling_view_behavior"
4. 可滑動的元件目前經測試支援RecyclerView,NestedScrollView,示例中viewpager中包含的就是一個RecyclerView

CollapsingToolbarLayout–可摺疊的Toolbar

我們知道如果在某些詳情頁面,我們只是在AppbarLayout中使用了可隱藏/展示的Toolbar的話, 只能固定到螢幕頂端並且不能做出好的動畫效果,而且無法控制不同元素如何響應collapsing(摺疊)的細節，所以為了達到此目的，CollapsingToolbarLayout就應運而生.

CollapsingToolbarLayout一般都是需要包括一個Toolbar,這樣就可以實現一個可摺疊的Toolbar,一般都是作為AppbarLayout的子view使用,CollapsingToolbarLayout的子檢視類似於LinearLayout垂直方向排放。

CollapsingToobarLayout的屬性及用法:

1. Collapsing title：ToolBar的標題，CollapsingToolbarLayout和Toolbar在一起使用的時候，title會在展開的時候自動變得比較大，而在摺疊的時候讓字型變小過渡到預設值。注意，你必須在CollapsingToolbarLayout上呼叫setTitle()，而不是在Toolbar上進行設定。
2. Content scrim：ToolBar被摺疊到頂部固定時候的背景，你可以呼叫setContentScrim(Drawable)方法改變背景或者 在屬性中使用app:contentScrim=”?attr/colorPrimary”來改變背景。
3. Status bar scrim：狀態列的背景，呼叫方法setStatusBarScrim(Drawable)。
4. Parallax scrolling children：CollapsingToolbarLayout滑動時，子檢視的視覺因子，可以通過屬性app:layout_collapseParallaxMultiplier=”0.7”來改變。值的範圍[0.0,1.0]，值越大視差越大。
5. CollapseMode ：子檢視的摺疊模式，需要在子檢視設定; 
   
   • “pin”：固定模式，在摺疊的時候最後固定在頂端；
   • “parallax”：視差模式，在摺疊的時候會有個視差摺疊的效果。我們可以在佈局中使用屬性app:layout_collapseMode=”parallax”來改變。
6. layout_anchor : 這個是CoordinatorLayout提供的屬性,與layout_anchorGravity 一起使用,可以用來放置與其他檢視關聯在一起的懸浮檢視（如 FloatingActionButton）或者頭像

我們先來看看實現的效果圖:

我們現在看看佈局檔案的寫法:

1. <?xml version="1.0" encoding="utf-8"?>  
2. <android.support.design.widget.CoordinatorLayout  
3.     xmlns:android="http://schemas.android.com/apk/res/android"
4.     xmlns:tools="http://schemas.android.com/tools"
5.     android:layout_width="match_parent"
6.     android:layout_height="match_parent"
7.     xmlns:app="http://schemas.android.com/apk/res-auto"
8.     tools:context="suericze.coordinatoreps.CollapsingToobar.CollapsingToobarActivity">  
9.     <android.support.design.widget.AppBarLayout  
10.         android:id="@+id/appbar"
11.         android:layout_width="match_parent"
12.         android:layout_height="200dp">  
13.         <android.support.design.widget.CollapsingToolbarLayout  
14.             android:id="@+id/collapsing_collaps_toolbar"
15.             android:layout_width="match_parent"
16.             android:layout_height="match_parent"
17.             app:contentScrim="?attr/colorPrimary"
18.             app:expandedTitleMarginEnd="64dp"
19.             app:expandedTitleMarginStart="48dp"
20.             app:layout_scrollFlags="scroll|exitUntilCollapsed"
21.             app:statusBarScrim="?attr/colorPrimary"
22.             >  
23.             <ImageView  
24.                 android:id="@+id/image"
25.                 android:layout_width="match_parent"
26.                 android:layout_height="match_parent"
27.                 android:scaleType="fitXY"
28.                 android:src="@mipmap/example"
29.                 app:layout_collapseMode="parallax"
30.                 app:layout_collapseParallaxMultiplier="0.6" />  
31.             <android.support.v7.widget.Toolbar  
32.                 android:id="@+id/toolbar"
33.                 android:layout_width="match_parent"
34.                 android:layout_height="?attr/actionBarSize"
35.                 app:layout_collapseMode="pin"
36.                 app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>  
37.         </android.support.design.widget.CollapsingToolbarLayout>  
38.     </android.support.design.widget.AppBarLayout>  
39.     <android.support.v4.widget.NestedScrollView  
40.         android:layout_width="match_parent"
41.         android:layout_height="match_parent"
42.         app:layout_behavior="@string/appbar_scrolling_view_behavior">  
43.         <LinearLayout  
44.             android:layout_width="match_parent"
45.             android:layout_height="match_parent"
46.             android:orientation="vertical"
47.             android:paddingTop="24dp">  
48.              <include layout="@layout/card_view" />  
49.         </LinearLayout>  
50.     </android.support.v4.widget.NestedScrollView>  
51.     <android.support.design.widget.FloatingActionButton  
52.         android:layout_width="wrap_content"
53.         android:layout_height="wrap_content"
54.         android:src="@drawable/floating_icon"
55.         app:backgroundTintMode="multiply"
56.         app:layout_anchor="@id/appbar"
57.         android:layout_margin="20dp"
58.         app:layout_anchorGravity="bottom|end|right"/>  
59. </android.support.design.widget.CoordinatorLayout>  

注意:

1. 我們使用了下面的引數設定了FloatingActionButton的位置，兩個屬性共同作用使得浮動按鈕可以隨著手勢能摺疊消失和展現。

   app:layout_anchor=”@id/appbar” 
   app:layout_anchorGravity=”bottom|right|end”

2. AppBarLayout 的高度layout_height固定，不能 “wrap_content”，如果不固定的話動畫效果不友好

3. CollapsingToolbarLayout的子檢視設定layout_collapseMode屬性
4. 關聯懸浮檢視設定app:layout_anchor，app:layout_anchorGravity屬性

原始碼地址: GitHub 
OK,到這裡我們已經將Materil Design的常用控制元件介紹完畢,下次我們將對自定義的Behavior進行解析,我們將會實現更加酷炫好看的效果,願大家都有美好的一天…