CoordinatorLayout

官方文檔

CoordinatorLayout 是一個(gè)加強(qiáng)型的FrameLayout.

CoordinatorLayout 主要用于兩種場(chǎng)景:

作為activity最外層布局

作為協(xié)調(diào)一個(gè)或多個(gè)具有特定交互的子view的父布局

子view之間的特定協(xié)調(diào)動(dòng)作，通過(guò)app:layout_behavior指定，如，Google內(nèi)部實(shí)現(xiàn)的@string/appbar_scrolling_view_behavior； 亦可以通過(guò)自定義實(shí)現(xiàn)特定的behavior效果（TODO： 單獨(dú)作為另外一篇文章）。

<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"> 復(fù)制代碼

AppBarLayout

符合material design的加強(qiáng)版的垂直方向的LinearLayout，嚴(yán)重依賴于CoordinatorLayout；內(nèi)部?jī)?nèi)置了響應(yīng)動(dòng)作，用于定義當(dāng)某個(gè)可滑動(dòng)的View（如：ScrollView ,ListView ,RecyclerView 等）發(fā)生滑動(dòng)時(shí)，其他子view應(yīng)該如何響應(yīng)。（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> 復(fù)制代碼

1.appbarLayout幾個(gè)方法

addOnOffsetChangedListener 當(dāng)AppbarLayout 的偏移發(fā)生改變的時(shí)候回調(diào)，也就是子View滑動(dòng)。

getTotalScrollRange 返回AppbarLayout 所有子View的滑動(dòng)范圍

removeOnOffsetChangedListener 移除監(jiān)聽器

setExpanded (boolean expanded, boolean animate)設(shè)置AppbarLayout 是展開狀態(tài)還是折疊狀態(tài)，animate 參數(shù)控制切換到新的狀態(tài)時(shí)是否需要?jiǎng)赢?/p>

setExpanded (boolean expanded) 設(shè)置AppbarLayout 是展開狀態(tài)還是折疊狀態(tài),默認(rèn)有動(dòng)畫

AppBarLayout的ScrollFlg

注:滑動(dòng)的NestedScrollView，簡(jiǎn)稱 "滑動(dòng)view"，設(shè)置了scorllFlag的子view，簡(jiǎn)稱 "響應(yīng)view"

1.scorll

app:layout_scrollFlags="scroll"

響應(yīng)view相當(dāng)于滑動(dòng)view 的一部分，一起滑動(dòng)。

2.enterAlways

app:layout_scrollFlags="scroll|enterAlways"

結(jié)合scroll一起使用。當(dāng)滑動(dòng)view 向下滑動(dòng)時(shí)，響應(yīng)view截?cái)嗷瑒?dòng)view的滑動(dòng)事件，待響應(yīng)view自身全部顯示完后，再把滑動(dòng)事件還給滑動(dòng)view； 當(dāng)用戶向下滑動(dòng)是scrollView時(shí)，關(guān)注點(diǎn)不在滑動(dòng)view本身，此時(shí)出現(xiàn)響應(yīng)view的內(nèi)容，符合material design設(shè)計(jì)理念

3.enterAlwaysCollapsed

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

結(jié)合scroll和enterAlways一起使用。可理解為enterAlways的更靈活的版本；可通過(guò)android:minHeight="?attr/actionBarSize"設(shè)置最小高度，當(dāng)滑動(dòng)view 向下滑動(dòng)時(shí)，響應(yīng)view截?cái)嗷瑒?dòng)view的滑動(dòng)事件，待響應(yīng)view自身最小高度顯示完后，再把滑動(dòng)事件還給滑動(dòng)view

4.snap

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

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

5.exitUntilCollapsed

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

結(jié)合scroll一起使用。可理解為enterAlways的相反的效果；可通過(guò)android:minHeight="?attr/actionBarSize"設(shè)置最小高度，當(dāng)滑動(dòng)view 向上滑動(dòng)時(shí)，響應(yīng)view截?cái)嗷瑒?dòng)view的滑動(dòng)事件，待響應(yīng)view縮到自身最小高度顯示完后，再把滑動(dòng)事件還給滑動(dòng)view

CollapsingToolbarLayout

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

1.parallax

有視覺效果的滾動(dòng)：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" 折疊過(guò)程產(chǎn)生一點(diǎn)偏移--><!--android:fitsSystemWindows="true",伸到statusBar，但需要新建style將statusBar顏色改為透明--><!--一直到最外層都需要調(diào)用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> 復(fù)制代碼

3.設(shè)置標(biāo)題

Java 中設(shè)置

// 設(shè)置標(biāo)題CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapse_layout);collapsingToolbarLayout.setTitle("This is Tom");復(fù)制代碼

xml設(shè)置 app:title="John"

4.contentScrim

app:contentScrim：當(dāng)CollapsingToolbarLayout滑動(dòng)到一個(gè)確定的閥值時(shí)將顯示或者隱藏內(nèi)容紗布，可以通過(guò)setContentScrim(Drawable)來(lái)設(shè)置紗布的圖片。（可以時(shí)圖片也可以是顏色）

5.statusScrim

當(dāng)CollapsingToolbarLayout滑動(dòng)到一個(gè)確定的閥值時(shí)，狀態(tài)欄顯示或隱藏紗布，你可以通過(guò) app:statusBarScrim或者setStatusBarScrim(Drawable)來(lái)設(shè)置紗布圖片。（可以時(shí)圖片也可以是 顏色）

6. app:expandedTitleXXX和app:collapsedTitleXXX

expandedTitleXXX：設(shè)置展開時(shí)的文字風(fēng)格布局； app:collapsedTitleXXX：設(shè)置收縮時(shí)的文字風(fēng)格布局

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

參考鏈接

Material.io

Material Design之 AppbarLayout

CoordinatorLayout的使用如此簡(jiǎn)單

總結(jié)

以上是生活随笔為你收集整理的Material Design之AppBarLayout总结的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。