CoordinatorLayout

官方文檔

CoordinatorLayout 是一個加強型的FrameLayout.

CoordinatorLayout 主要用于兩種場景:

作為activity最外層布局

作為協調一個或多個具有特定交互的子view的父布局

子view之間的特定協調動作，通過app:layout_behavior指定，如，Google內部實現的@string/appbar_scrolling_view_behavior； 亦可以通過自定義實現特定的behavior效果（TODO： 單獨作為另外一篇文章）。

<android.support.v4.widget.NestedScrollViewandroid:id="@+id/nest_view"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"> 復制代碼

AppBarLayout

符合material design的加強版的垂直方向的LinearLayout，嚴重依賴于CoordinatorLayout；內部內置了響應動作，用于定義當某個可滑動的View（如：ScrollView ,ListView ,RecyclerView 等）發生滑動時，其他子view應該如何響應。（app:layout_scrollFlags）

<android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="200dp"android:minHeight="?attr/actionBarSize"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:title="behaviour"app:layout_scrollFlags="scroll|exitUntilCollapsed|enterAlways|snap"></android.support.v7.widget.Toolbar></android.support.design.widget.AppBarLayout> 復制代碼

1.appbarLayout幾個方法

addOnOffsetChangedListener 當AppbarLayout 的偏移發生改變的時候回調，也就是子View滑動。

getTotalScrollRange 返回AppbarLayout 所有子View的滑動范圍

removeOnOffsetChangedListener 移除監聽器

setExpanded (boolean expanded, boolean animate)設置AppbarLayout 是展開狀態還是折疊狀態，animate 參數控制切換到新的狀態時是否需要動畫

setExpanded (boolean expanded) 設置AppbarLayout 是展開狀態還是折疊狀態,默認有動畫

AppBarLayout的ScrollFlg

注:滑動的NestedScrollView，簡稱 "滑動view"，設置了scorllFlag的子view，簡稱 "響應view"

1.scorll

app:layout_scrollFlags="scroll"

響應view相當于滑動view 的一部分，一起滑動。

2.enterAlways

app:layout_scrollFlags="scroll|enterAlways"

結合scroll一起使用。當滑動view 向下滑動時，響應view截斷滑動view的滑動事件，待響應view自身全部顯示完后，再把滑動事件還給滑動view； 當用戶向下滑動是scrollView時，關注點不在滑動view本身，此時出現響應view的內容，符合material design設計理念

3.enterAlwaysCollapsed

... android:layout_height="200dp" android:minHeight="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" ... 復制代碼

結合scroll和enterAlways一起使用。可理解為enterAlways的更靈活的版本；可通過android:minHeight="?attr/actionBarSize"設置最小高度，當滑動view 向下滑動時，響應view截斷滑動view的滑動事件，待響應view自身最小高度顯示完后，再把滑動事件還給滑動view

4.snap

... android:layout_height="200dp" android:minHeight="?attr/actionBarSize" app:layout_scrollFlags="scroll|enterAlways|snap" ... 復制代碼

結合scroll一起使用。可理解為"四舍五入"的效果；當停止滑動時，響應view如果已顯示了一大部分，則自動彈性滑動顯示剩余的部分；若顯示的部分很少，則自動收起隱藏

5.exitUntilCollapsed

... android:layout_height="200dp" android:minHeight="?attr/actionBarSize" app:layout_scrollFlags="scroll|exitUntilCollapsed" ... 復制代碼

結合scroll一起使用。可理解為enterAlways的相反的效果；可通過android:minHeight="?attr/actionBarSize"設置最小高度，當滑動view 向上滑動時，響應view截斷滑動view的滑動事件，待響應view縮到自身最小高度顯示完后，再把滑動事件還給滑動view

CollapsingToolbarLayout

折疊式標題欄，豐富toolbar的效果，必須作為appbarLayout的直接子布局

1.parallax

有視覺效果的滾動：app:layout_collapseMode="parallax"

2.pin

子view固定：app:layout_collapseMode="pin"

<android.support.design.widget.AppBarLayoutandroid:id="@+id/appbar"android:fitsSystemWindows="true"android:layout_width="match_parent"android:layout_height="250dp"><!--豐富效果的toolbar--><!--app:contentScrim 折疊后的背景色，即toolbar顏色--><!--app:statusBarScrim 折疊后的statusBar背景色，--><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapse_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:contentScrim="@color/colorPrimary"app:expandedTitleGravity="center|bottom"app:expandedTitleTextAppearance="@style/PersonDetail.TitleExpandTheme"app:collapsedTitleGravity="start"app:collapsedTitleTextAppearance="@style/PersonDetail.TitleCollapsedTheme"app:layout_scrollFlags="scroll|exitUntilCollapsed"><!--app:layout_collapseMode="parallax" 折疊過程產生一點偏移--><!--android:fitsSystemWindows="true",伸到statusBar，但需要新建style將statusBar顏色改為透明--><!--一直到最外層都需要調用android:fitsSystemWindows="true"--><ImageViewandroid:id="@+id/person_portrait"android:layout_width="match_parent"android:layout_height="match_parent"android:fitsSystemWindows="true"app:layout_collapseMode="parallax"/><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"app:title="app"app:layout_collapseMode="pin"></android.support.v7.widget.Toolbar></android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout> 復制代碼

3.設置標題

Java 中設置

// 設置標題CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapse_layout);collapsingToolbarLayout.setTitle("This is Tom");復制代碼

xml設置 app:title="John"

4.contentScrim

app:contentScrim：當CollapsingToolbarLayout滑動到一個確定的閥值時將顯示或者隱藏內容紗布，可以通過setContentScrim(Drawable)來設置紗布的圖片。（可以時圖片也可以是顏色）

5.statusScrim

當CollapsingToolbarLayout滑動到一個確定的閥值時，狀態欄顯示或隱藏紗布，你可以通過 app:statusBarScrim或者setStatusBarScrim(Drawable)來設置紗布圖片。（可以時圖片也可以是 顏色）

6. app:expandedTitleXXX和app:collapsedTitleXXX

expandedTitleXXX：設置展開時的文字風格布局； app:collapsedTitleXXX：設置收縮時的文字風格布局

... app:expandedTitleGravity="center|bottom" app:expandedTitleTextAppearance="@style/PersonDetail.TitleExpandTheme" app:collapsedTitleGravity="start" app:collapsedTitleTextAppearance="@style/PersonDetail.TitleCollapsedTheme" ... 復制代碼<!--折疊時為黑色，靠右--> <style name="PersonDetail.TitleCollapsedTheme" parent="TextAppearance.Widget.AppCompat.Toolbar.Title"><item name="android:textColor">#000</item> </style><!--展開時為白色，居中向下--> <style name="PersonDetail.TitleExpandTheme" parent="TextAppearance.Widget.AppCompat.Toolbar.Title"><item name="android:textColor">#eee</item> </style> 復制代碼

參考鏈接

Material.io

Material Design之 AppbarLayout

CoordinatorLayout的使用如此簡單

總結

以上是生活随笔為你收集整理的Material Design之AppBarLayout总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。