簡(jiǎn)介
Coordinator 美[ko?'?:d?n?e?t?] 協(xié)調(diào)
CoordinatorLayout是支持包"com.Android.support:design"里很重要的一個(gè)控件媒抠，繼承于FrameLayout尔店，它提供了兩個(gè)主要用途：
- 作為APP的頂層布局；
- 協(xié)調(diào)子控件的相互作用晾剖；
使用
一. 收縮ToolBar
- 效果展示
- 布局代碼
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="zhj.tablayoutdemo.MainActivity">
<android.support.design.widget.AppBarLayout
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/mToolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
<android.support.design.widget.TabLayout
android:id="@+id/tab_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#EF8D11"
app:tabGravity="fill"
app:tabIndicatorColor="#f00"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#FFFFFF"
app:tabTextColor="#FFFFFF"
>
</android.support.design.widget.TabLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
>
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
布局中的viewpager、tablayout、toolbar的使用可以參考以下文章。
Material Design學(xué)習(xí)：TabLayout+Viewpager制作一個(gè)標(biāo)簽頁(yè)
Material Design學(xué)習(xí)：ToolBar 開(kāi)發(fā)使用簡(jiǎn)介
注意事項(xiàng)
- CoordinatorLayout作為頂層視圖雁芙；
- AppBarLayout包裹toolbar和tablayout；
AppBarLayout 是繼承LinerLayout實(shí)現(xiàn)的一個(gè)ViewGroup容器組件,
默認(rèn)的AppBarLayout是垂直方向的, 可以管理其中的控件在內(nèi)容滾動(dòng)時(shí)的行為揭厚。
我們可以通過(guò)設(shè)置layout_scrollFlags參數(shù)却特，來(lái)控制AppBarLayout中控件的行為。
- 設(shè)置Toolbar的滾動(dòng)標(biāo)志
app:layout_scrollFlags="scroll|enterAlways|snap"
layout_scrollFlags參數(shù)
- scroll： 和其他控件滑動(dòng)聯(lián)動(dòng)的基礎(chǔ)筛圆，下面的其他屬性值，先要設(shè)置了scroll后才有效果椿浓！
- enterAlways：當(dāng)屏幕下滑時(shí)太援，設(shè)置了這個(gè)行為的控件(比如toolbar)就會(huì)立馬滑回屏幕，類(lèi)似于快速返回的效果扳碍，而且不管下面的滑動(dòng)組件(比如ScrollView是否正在滑動(dòng)) 提岔。
- enterAlwaysCollapsed：是enterAlways的附加選項(xiàng)，一般跟enterAlways一起使用笋敞〖蠲桑控件首先是enterAlways效果，但只能滑動(dòng)minHeight的距離夯巷。直到下面的滑動(dòng)組件（比如ScrollView完全展示時(shí)）赛惩，控件才能繼續(xù)向下滑動(dòng)。
- exitUntilCollapsed：向上滑動(dòng)的時(shí)候這個(gè)控件會(huì)收縮趁餐，但最多只能收縮到控件設(shè)定的minHeight喷兼，實(shí)際能滾動(dòng)的距離為（layout_height-minHeight）。
- snap：這個(gè)屬性讓控件變得有彈性,如果控件（比如toolbar）顯示了75%的高度后雷，就會(huì)顯示出來(lái)季惯，如果只有25%顯示，就會(huì)隱藏臀突。
給ViewPager設(shè)置行為勉抓，實(shí)現(xiàn)與AppBarLayout聯(lián)動(dòng)。
app:layout_behavior="@string/appbar_scrolling_view_behavior"
CoordinatorLayout不能和很多控件一起使用候学，比如要是內(nèi)容部分放ListView,就算設(shè)置了layout_behavior也沒(méi)用藕筋，取而代之使用RecyclerView或者NestedScrollView。
NestedScrollView就像scrollView,不過(guò)相比之下他更兼容新老版本的控件盒齿，更好的與后面的控件包括CoordinatorLayout配合使用.
二. 滾動(dòng)折疊CollapsingToolbarLayout
collapsing 美[k?'l?ps??] 折疊
CollapsingToolbarLayout作用是提供了一個(gè)可以折疊的Toolbar念逞，它繼承自FrameLayout困食。
給它設(shè)置layout_scrollFlags，可以控制它包裹的控件(如：ImageView翎承、Toolbar)在響應(yīng)layout_behavior事件時(shí)作出相應(yīng)的scrollFlags滾動(dòng)事件硕盹。
- 效果展示
- 布局代碼
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="zhj.tablayoutdemo.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_tool_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleGravity="center"
app:contentScrim="@color/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<ImageView
android:layout_width="match_parent"
android:layout_height="250dp"
android:scaleType="centerCrop"
android:src="@mipmap/pic"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.8"/>
<android.support.v7.widget.Toolbar
android:id="@+id/mToolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="@+id/tab_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#EF8D11"
app:tabGravity="fill"
app:tabIndicatorColor="#f00"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#FFFFFF"
app:tabTextColor="#FFFFFF"
>
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/vp_main"
android:layout_width="match_parent"
android:layout_height="wrap_content"
>
</android.support.v4.view.ViewPager>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
Google官方文檔翻譯
CollapsingToolbarLayout包含以下功能：
- 折疊Title（Collapsing title）：當(dāng)布局內(nèi)容全部顯示出來(lái)時(shí)，title是最大的叨咖，但是隨著View逐步移出屏幕頂部瘩例，title變得越來(lái)越小。你可以通過(guò)調(diào)用setTitle函數(shù)來(lái)設(shè)置title甸各。
- 內(nèi)容紗布（Content scrim）：根據(jù)滾動(dòng)的位置是否到達(dá)一個(gè)閥值垛贤，來(lái)決定是否對(duì)View“蓋上紗布”∪で悖可以通過(guò)setContentScrim(Drawable)來(lái)設(shè)置紗布的圖片.
- 狀態(tài)欄紗布（Status bar scrim)：根據(jù)滾動(dòng)位置是否到達(dá)一個(gè)閥值決定是否對(duì)狀態(tài)欄“蓋上紗布”聘惦，你可以通過(guò)setStatusBarScrim(Drawable)來(lái)設(shè)置紗布圖片，但是只能在LOLLIPOP設(shè)備上面有作用儒恋。
- 視差滾動(dòng)子View(Parallax scrolling children):子View可以選擇在當(dāng)前的布局當(dāng)時(shí)是否以“視差”的方式來(lái)跟隨滾動(dòng)善绎。（PS:其實(shí)就是讓這個(gè)View的滾動(dòng)的速度比其他正常滾動(dòng)的View速度稍微慢一點(diǎn)）。將布局參數(shù)app:layout_collapseMode設(shè)為parallax
- 將子View位置固定(Pinned position children)：子View可以選擇是否在全局空間上固定位置诫尽，這對(duì)于Toolbar來(lái)說(shuō)非常有用禀酱，因?yàn)楫?dāng)布局在移動(dòng)時(shí)，可以將Toolbar固定位置而不受移動(dòng)的影響牧嫉。 將app:layout_collapseMode設(shè)為pin剂跟。
| CollapsingToolbarLayout屬性 | 含義 |
| -------- | ----- | ---- |
|app:title|設(shè)置標(biāo)題|
|app:collapsedTitleGravity="center"|設(shè)置標(biāo)題位置|
|app:contentScrim |設(shè)置折疊時(shí)toolbar的顏色，默認(rèn)是colorPrimary的色值|
|app:statusBarScrim | 設(shè)置折疊時(shí)狀態(tài)欄的顏色 酣藻，默認(rèn)是colorPrimaryDark的色值|
|app:layout_collapseParallaxMultiplier|設(shè)置視差|
|app:layout_collapseMode="parallax"| 視差模式曹洽，在折疊的時(shí)候會(huì)有個(gè)視差折疊的效果|
|app:layout_collapseMode="pin"|固定模式，在折疊的時(shí)候最后固定在頂端 |
步驟詳解
- 編寫(xiě) CollapsingToolbarLayout的兩個(gè)子視圖臊恋，一個(gè)是Imageview衣洁，一個(gè)Toolbar
- 為 CollapsingToolbarLayout 指定屬性
app:layout_scrollFlags="scroll|exitUntilCollapsed" - 為ImageView 指定屬性，聲明它是可以折疊的
app:layout_collapseMode="parallax" - 為 toobar指定屬性抖仅，聲明它是固定的
app:layout_collapseMode="pin" - 為 CollapsingToolbarLayout 所在的父布局（view)指定屬性坊夫，以聲明它適配當(dāng)前窗體
android:fitsSystemWindows="true"
這里是項(xiàng)目地址
參考
http://blog.csdn.net/huachao1001/article/details/51558835
http://blog.csdn.net/rosechan/article/details/51587058
http://blog.csdn.net/github_35180164/article/details/51870301
