Material Design有個(gè)效果是可折疊式的標(biāo)題欄读处，效果是查看內(nèi)容下滑時(shí)標(biāo)題欄折疊起來(lái)糊治。
剛好項(xiàng)目中有這么一個(gè)需求，查一下資料看一下文檔罚舱，這個(gè)效果是怎么實(shí)現(xiàn)的吧井辜。

一：思路

使用的是CoordinatorLayout和AppbarLayout兩者結(jié)合，然后下面實(shí)現(xiàn)滾動(dòng)布局(RecyclerView, NestedScrollView等)
結(jié)合起來(lái)可以實(shí)現(xiàn)折疊式標(biāo)題欄的沉浸效果管闷。

二：CoordinatorLayout

CoordinatorLayout遵循Material 風(fēng)格粥脚，包含在 support Library中：

• 作為最上層的View
• 作為一個(gè) 容器與一個(gè)或者多個(gè)子View進(jìn)行交互
• CoordinatorLayout繼承自viewgroup,但是使用類似于framLayout,有層次結(jié)構(gòu),后面的布局會(huì)覆蓋在前面的布局之上,但跟app:layout_behavior屬性也有很大關(guān)系,只有CoordinatorLayout的直接子布局才能響應(yīng)。
• CoordinatorLayout和AppbarLayout結(jié)合才能產(chǎn)生這樣的效果包个，如果AppbarLayout不在CoordinatorLayout之中刷允，AppbarLayout的滑動(dòng)flag是不生效的。
• app:layout_behavior = "@string/appbar_scrolling_view_behavior"滾動(dòng)布局一定需要這一行代碼碧囊。

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=".MainActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/AppTheme"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll"
            app:title="Title">

        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

嵌套大致如上树灶。

三：AppBarLayout

AppBarLayout.PNG

• AppBarLayout:繼承自LineLayout,使用時(shí)其他屬性隨LineLayou,已經(jīng)響應(yīng)了CoordinatorLayout的layout_behavior屬性。
• AppBarLayout的直接子控件可以設(shè)置的屬性:layout_scrollFlags

• This view depends heavily on being used as a direct child within a CoordinatorLayout. If you use AppBarLayout within a different ViewGroup, most of it's functionality will not work.（表面AppBarLayout要和CoordinatorLayout結(jié)合）

  
  
  Flag.PNG

文檔給出的flag如圖呕臂，可與CoordinatorLayout結(jié)合使用破托。
SCROLL_FLAG_ENTER_ALWAYS：
W((entering) / (scrolling on screen))下拉的時(shí)候，這個(gè)View也會(huì)跟著滑出歧蒋。

SCROLL_FLAG_ENTER_ALWAYS_COLLAPSED：
另一種enterAlways土砂，但是只顯示折疊后的高度。

SCROLL_FLAG_EXIT_UNTIL_COLLAPSED：
((exiting) / (scrolling off screen))上拉的時(shí)候谜洽，這個(gè)View會(huì)跟著滑動(dòng)直到折疊萝映。

SCROLL_FLAG_SCROLL ：
當(dāng)前View將會(huì)響應(yīng)Scroll事件

SCROLL_FLAG_SNAP ：
在Scroll滑動(dòng)事件結(jié)束以前 ，如果這個(gè)View部分可見(jiàn)阐虚，那么這個(gè)View會(huì)停在最接近當(dāng)前View的位置

我們可以通過(guò)setScrollFlags(int)方法或者直接設(shè)定app:layout_scrollFlags=""來(lái)設(shè)定flag序臂。

四：實(shí)現(xiàn)

首先我們?nèi)∠粝到y(tǒng)自帶的ActionBar：

android:theme="@style/Theme.AppCompat.Light.NoActionBar"

然后自己使用Toolbar建立一個(gè)：

<android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:theme="@style/AppTheme"
            android:background="?attr/colorPrimary"
            app:title="Title">

在Activity中初始化

toolbar = findViewById(R.id.toolBar);
setSupportActionBar(toolbar);

這一步主要是如果你在activity中為actionbar添加了menu實(shí)現(xiàn)。
到這一步实束，我們稍微看一下界面現(xiàn)在是什么樣子的奥秆。

first

看起來(lái)是不是沒(méi)有啥，別急咸灿，別忘了我們還有滾動(dòng)布局沒(méi)有實(shí)現(xiàn)呢构订。
我們實(shí)現(xiàn)一下NestedScrollView（實(shí)際上直接嵌套就行了）。

1.gif

這個(gè)是scroll的flag的效果避矢，我們每個(gè)flag都實(shí)現(xiàn)一下試試悼瘾。

1.scroll

ChildView 伴隨著View的滾動(dòng)事件而滾出或滾進(jìn)屏幕:
使用這個(gè)要注意兩點(diǎn)：

• 如果使用了其他值囊榜，必定要使用這個(gè)值才能起作用；
• 如果在這個(gè)childView前面的任何其他ChildView沒(méi)有設(shè)置這個(gè)值亥宿， 那么這個(gè)ChildView的設(shè)置將失去作用卸勺。

使用說(shuō)明：
-當(dāng)NestedScrollView將要向下滑動(dòng)的時(shí)候， 優(yōu)先將AppBarLayout的childView滾出屏幕烫扼，然后ScrollView才開(kāi)始滑動(dòng)曙求；

• 當(dāng)NestedScrollView將要向上滑動(dòng)的時(shí)候，優(yōu)先動(dòng)的是自己映企，當(dāng)自己動(dòng)到頂部頭的時(shí)候圆到，再開(kāi)始觸發(fā)AppBarLayoout中的childView滑動(dòng)出來(lái)；

2.scroll | enterAlways

使用enterAlways卑吭，必須要帶上scroll,其他亦然。
使用說(shuō)明：

• 當(dāng)NestedScrollView將要向下滑動(dòng)的時(shí)候马绝， 優(yōu)先將AppBarLayout的childView滑動(dòng)出屏幕豆赏，然后NestedScrollView才開(kāi)始滑動(dòng)；

• 當(dāng)NestedScrollView將要向上滑動(dòng)的時(shí)候富稻，與單純的scroll不同掷邦，這里先動(dòng)的是AppBarLayout中的childView，當(dāng)childView完全進(jìn)入屏幕的時(shí)候椭赋，才開(kāi)始滑動(dòng) ScrollView抚岗；
  enterAlways決定的是向下滾動(dòng)時(shí)Scrolling View和ChildView之間的優(yōu)先級(jí)問(wèn)題。
  看看效果!

  
  
  2.gif

這里上滑的時(shí)候哪怔，childView是先進(jìn)入的宣蔚，優(yōu)先動(dòng)的是AppBarLayout中的childView。是沒(méi)有錯(cuò)的认境。

3.scroll | enterAlways | enterAlwaysCollapsed

enterAlwaysCollapsed 是enterAlways的附加值胚委，如果需要使用的話，必須三者一起使用叉信。
使用說(shuō)明：

• 當(dāng)NestedScrollView將要向下滑動(dòng)的時(shí)候亩冬， 優(yōu)先將AppBarLayout的childView滾出屏幕，然后NestedScrollView才開(kāi)始滾動(dòng)硼身；
• 與前面兩個(gè)不同的是硅急，向上滑動(dòng)的時(shí)候，優(yōu)先將childView動(dòng)到它的最小高度佳遂，完成之后Nestedscrollview才開(kāi)始自身的滾動(dòng)营袜，當(dāng)Nestedscrollview滾動(dòng)完成時(shí)，這個(gè)時(shí)候childView才會(huì)將自己高度完全滾動(dòng)進(jìn)入屏幕讶迁；

這里涉及到的是childView的最小高度值连茧，需要設(shè)置一下Toolbar才能看出效果核蘸。
設(shè)置完畢如圖。

4.PNG

這里設(shè)定之后我們看看效果

3.gif

使用上面三種組合啸驯，當(dāng)NestedScrollView要向下滑動(dòng)的時(shí)候沒(méi)有任何區(qū)別客扎；區(qū)別只是在于scrollview要向上滑動(dòng)的時(shí)候

4.scroll | exitUntilCollapsed

使用說(shuō)明：

• 當(dāng)NestedScrollview將要向下滑動(dòng)的時(shí)候，優(yōu)先將AppBarLayout中的childView滾動(dòng)至最小高度罚斗，然后scrollview才開(kāi)始滾動(dòng)徙鱼。
• 當(dāng)NestedScrollView將要向上滑動(dòng)的時(shí)候，優(yōu)先滾動(dòng)的是自己针姿，當(dāng)自己滾動(dòng)到頂部頭的時(shí)候袱吆，再開(kāi)始觸發(fā)滾動(dòng)AppBarLayoout中的childView；

這里也涉及到的是最小高度距淫，但與第三個(gè)不同的是绞绒，這里Toolbar始終是會(huì)保持出現(xiàn)的。就是說(shuō)ChildView不會(huì)完全退出屏幕榕暇。

4.gif

5.scroll | snap

snap可以與上面任何一個(gè)組合進(jìn)行使用蓬衡，使用它可以確保childView不會(huì)滑動(dòng)停止在中間的狀態(tài)，當(dāng)我們松開(kāi)手指的時(shí)候彤枢，要么完全顯示狰晚，要么完全隱藏。
snap簡(jiǎn)單理解缴啡，就是Child View滾動(dòng)比例的一個(gè)吸附效果壁晒，也就是說(shuō)，Child View不會(huì)存在局部顯示业栅。
效果如圖

5.gif

五：CollapsingToolbarLayout

接下來(lái)我們需要實(shí)現(xiàn)的是自己需要的效果秒咐，這里就需要引入CollapsingToolbarLayout了。

CollapsingToolbarLayout是用來(lái)對(duì)Toolbar進(jìn)行再次包裝的ViewGroup式镐，主要是用于實(shí)現(xiàn)折疊（其實(shí)就是看起來(lái)像伸縮~）的App Bar效果反镇。它需要放在AppBarLayout布局里面，并且作為AppBarLayout的直接子View娘汞。CollapsingToolbarLayout主要包括幾個(gè)功能
查看官網(wǎng)文檔：

5.PNG

打開(kāi)谷歌翻譯歹茶，然后參考自己意譯：

折疊標(biāo)題(Collapsing title):
當(dāng)布局完全可見(jiàn)時(shí)標(biāo)題更大但是隨著布局在屏幕上滾動(dòng)而折疊并變小。 您可以通過(guò)setTitle（CharSequence）設(shè)置要顯示的標(biāo)題你弦。 標(biāo)題外觀可以通過(guò)collapsedTextAppearance和expandedTextAppearance屬性進(jìn)行調(diào)整惊豺。

內(nèi)容紗布（Content scrim）：
當(dāng)滾動(dòng)位置達(dá)到某個(gè)閾值時(shí)，來(lái)對(duì)View“蓋上紗布”禽作∈粒可以通過(guò)setContentScrim(Drawable)來(lái)設(shè)置紗布的圖片. 默認(rèn)colorPrimary是contentScrim的色值

狀態(tài)欄紗布（Status bar scrim)：
當(dāng)滾動(dòng)位置達(dá)到某個(gè)閾值時(shí)，在狀態(tài)欄后面顯示或隱藏布旷偿。 您可以通過(guò)setStatusBarScrim（Drawable）更改圖片烹俗。 這僅適用于LOLLIPOP設(shè)備爆侣。默認(rèn)colorPrimaryDark是statusBarScrim的色值.

視差滾動(dòng)子View(Parallax scrolling children):
子視圖可以選擇在該布局中以視差方式滾動(dòng)。 請(qǐng)參閱COLLAPSE_MODE_PARALLAX和setParallaxMultiplier（float）幢妄。(讓這個(gè)View的滾動(dòng)的速度比其他正常滾動(dòng)的View速度稍微慢一點(diǎn))

將子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。

修改xml文件

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/AppTheme"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_collapseMode="pin"
                app:title="Title">
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

這里添加CollapsingToolbarLayout在ToolBar布局之上潮尝，并且AppBarLayout的flag一定是在子布局中榕吼，所以移動(dòng)到CollapsingToolbarLayout。Toolbar設(shè)置app:layout_collapseMode="pin"勉失。將子View位置固定(Pinned position children)

看看效果

6.gif

既然是CollapsingToolbarLayout是Layout羹蚣，那就表示可以添加其他控件啦，我們?cè)O(shè)定一個(gè)背景圖片乱凿，將ToolBar的background去除度宦，然后再layout下添加一個(gè)imageview。
這時(shí)候效果如圖

7.PNG

get!但是下面這個(gè)導(dǎo)航欄也是有點(diǎn)礙眼，能不能也設(shè)置掉呢嫂用。這個(gè)啊型凳，no problem！
我們透明化它嘱函！

View decorView = activity.getWindow().getDecorView();
        int option = View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
                | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
decorView.setSystemUiVisibility(option);
getWindow().setNavigationBarColor(Color.TRANSPARENT);

這里設(shè)置之后是有一個(gè)問(wèn)題的甘畅，如果你使用亮色主題，那么虛擬按鍵還是透明顏色的往弓，就會(huì)導(dǎo)致看不清疏唾。如果你背景深色的，那就當(dāng)我沒(méi)有說(shuō)吧函似。
這里我選取了一個(gè)折中的解決辦法槐脏，將虛擬按鍵半透明化，這個(gè)就需要在

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
        setContentView(R.layout.activity_main);

需要在setContentView之前進(jìn)行這
行代碼撇寞，效果如圖

7.gif

這里出現(xiàn)一個(gè)問(wèn)題顿天，就是菜單和狀態(tài)欄過(guò)于貼近堂氯，不知道你們發(fā)現(xiàn)了沒(méi)有。
這時(shí)候需要介紹一個(gè)屬性牌废，叫做：fitsSystemWindows

六：fitsSystemWindows

根據(jù)官方文檔咽白，如果某個(gè)View 的fitsSystemWindows 設(shè)為true，那么該View的padding屬性將由系統(tǒng)設(shè)置畔规，用戶在布局文件中設(shè)置的 padding會(huì)被忽略局扶。系統(tǒng)會(huì)為該View設(shè)置一個(gè)paddingTop，值為statusbar的高度叁扫。fitsSystemWindows默認(rèn)為false三妈。
使用說(shuō)明：

• 一般情況下，一個(gè)布局多個(gè)view設(shè)置多個(gè)fitsSystemWindow只有第一個(gè)會(huì)發(fā)生效果

• 只有在標(biāo)題欄透明化或界面為全屏顯示（View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN)時(shí)莫绣，此屬性才會(huì)起作用畴蒲，不然會(huì)由ContentView的父控件處理

第一次接觸fitsSystemWindows是在CoordinatorLayout控件。發(fā)現(xiàn)有很多詭異的地方对室。
fitsSystemWindows的表現(xiàn)和官方文檔描述的不一樣模燥。
有時(shí)CoordinatorLayout的子控件也會(huì)設(shè)置fitsSystemWindows屬性，而且子控件的fitsSystemWindows也會(huì)有作用掩宜。
這些令我很困惑蔫骂，查了些資料之后找到了原因：設(shè)置paddingTop只是fitsSystemWindows屬性的默認(rèn)行為，View可以對(duì)fitsSystemWindows進(jìn)行個(gè)性化

總結(jié)：CoordinatorLayout對(duì)fitsSystemWindows主要做了以下處理牺汤。
1.自己繪制statusbar背景辽旋。setStatusBarBackground函數(shù)可以設(shè)置statusbar背景￠艹伲或者 在布局文件中通過(guò)app:statusBarBackground設(shè)置补胚。

2. 如果CoordinatorLayout的子View沒(méi)有設(shè)置fitsSystemWindows，在layout時(shí)將子Viwe向下偏移statusbar的高度追迟，用來(lái)顯示CoordinatorLayout繪制的statusbar溶其。如果子view設(shè)置了fitsSystemWindows，子View會(huì)覆蓋CoordinatorLayout的statusbar敦间。setStatusBarBackground設(shè)置的狀態(tài)欄將被覆蓋瓶逃，不再起作用。具體邏輯可參考CoordinatorLayout的layoutChild 函數(shù)廓块。

3.調(diào)用dispatchApplyWindowInsets金闽，讓子view的behavior或子view接著處理fitsSystemWindows屬性。CoordinatorLayout的很多常用的子view如AppBarLayout也對(duì)fitsSystemWindows進(jìn)行了個(gè)性化處理剿骨。

設(shè)置了android:fitsSystemWindows=”true”屬性后針對(duì)透明的狀態(tài)欄會(huì)自動(dòng)添加一個(gè)值等于狀態(tài)欄高度的paddingTop代芜；針對(duì)透明的系統(tǒng)導(dǎo)航欄會(huì)自動(dòng)添加一個(gè)值等于導(dǎo)航欄高度的paddingBottom

那么就在布局中加入這個(gè)屬性

<?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=".MainActivity">
    <android.support.design.widget.AppBarLayout
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="200dp">
        <android.support.design.widget.CollapsingToolbarLayout
            app:statusBarScrim="@android:color/transparent"
            android:fitsSystemWindows="true"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/AppTheme"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:fitsSystemWindows="true"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/draw_bg"
                app:layout_collapseMode="parallax" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolBar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:title="Data Analytics">
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>


    <android.support.v4.widget.NestedScrollView
        android:layout_weight="1"
        android:id="@+id/scrollView"
        android:fitsSystemWindows="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior = "@string/appbar_scrolling_view_behavior">
            <TextView
                android:textSize="20sp"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/test_string"/>
    </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

8.gif

當(dāng)然這里又要說(shuō)底部的事情了钞速，這個(gè)虛擬按鍵會(huì)遮擋我們的view，這個(gè)有辦法嗎嫡秕？并沒(méi)有...（當(dāng)然可能是我太菜）
當(dāng)你設(shè)定虛擬按鍵為透明或者半透明之時(shí)渴语，他就會(huì)算進(jìn)所有的屏幕之中，就是說(shuō)昆咽。如果你不將其改變驾凶，它就不算在整個(gè)屏幕中，如果你改變了他掷酗，就會(huì)開(kāi)始計(jì)算调违。除非你固定NestedScrollView的高度，不然不論你使用match_parent或者wrap_content泻轰，都會(huì)使其占據(jù)剩余的屏幕技肩。
再講講Toolbar這個(gè)。

七.Toolbar

Toolbar的結(jié)構(gòu):
1.NavigationIcon
2.Logo
3.Title
4.subTitle
5.menu.
這個(gè)不說(shuō)浮声，想簡(jiǎn)單提一下的是Toolbar的主題顯示虚婿。
1.app:theme是toolbar的主題
2.app:popupTheme是彈出的menu的主題.
并且這兩個(gè)的顏色與主題有關(guān)：
如果使用的是Dark系列的主題,那么字體就是白色的.menu菜單背景是黑色
如果使用的是Light系列的主題,那么字體和圖標(biāo)就是黑色的.menu菜單背景是白色

<!-- ToolBar樣式 .-->
   <style name="toolbar_theme" parent="@style/ThemeOverlay.AppCompat.Light">
        <!--修改toolbar的Title顏色.正確-->
       <item name="android:textColorPrimary">@android:color/holo_red_dark</item>
       <!--錯(cuò)誤,網(wǎng)上有些資料是這樣的,然而這樣寫編譯都會(huì)報(bào)錯(cuò)-->
       <item name="textColorPrimary">@android:color/holo_red_dark</item>
       <!--修改toolbar的subtitle(小標(biāo)題)顏色.正確-->
       <item name="subtitleTextColor">@android:color/holo_red_dark</item>
        <!-修改Toolbar的menu折疊圖標(biāo)和NavigationIcon的顏色1-->
        <!-正確,這個(gè)要求Api大于21-->
        <item name="android:colorControlNormal">@android:color/holo_red_dark</item>
        <!--這個(gè)也正確,用這個(gè)吧-->
        <item name="colorControlNormal">@android:color/holo_red_dark</item>

   </style>

<!-- ToolBar菜單樣式.-->
    <style name="popup_theme" parent="@style/ThemeOverlay.AppCompat.Light">
      <!--設(shè)置背景-->
       <item name="android:background">@android:color/white</item>
       <!--設(shè)置字體顏色-->
      <item name="android:textColor">@android:color/holo_red_dark</item>
    </style>

如果這個(gè)下拉框遮蓋Toolbar可以直接在app:popupTheme的style里面設(shè)置overlapAnchor這個(gè)屬性.