前言

馬上就國慶了颅痊，提前祝大家國慶快樂殖熟，中秋快樂，不知道小伙伴們準(zhǔn)備去哪里玩（看）呢（人）斑响？

有沒有小伙伴能看出來這是哪里菱属？

Material design系列也寫了6篇了，今天一次性把最后的寫完吧舰罚，免得自己國慶出去玩心里總有事壓著纽门，玩的也不愉快！

CoordinatorLayout

首先我們來看一下官方文檔對這個(gè)布局的介紹

CoordinatorLayout is intended for two primary use cases:
As a top-level application decor or chrome layout
As a container for a specific interaction with one or more child views

實(shí)際上CoordinatorLayout是一個(gè)更強(qiáng)大的FrameLayout营罢，從文檔上來看就是2點(diǎn)

• 作為最上層的View
• 作為一個(gè) 容器與一個(gè)或者多個(gè)子View進(jìn)行交互

比如我們之前說Snackbar彈出的時(shí)候FloatingActionButton隨之彈起

最外層是FrameLayout

最外層是CoordinatorLayout

我們只是把xml里面最外層的布局從FrameLayout換成了CoordinatorLayout就能達(dá)到這個(gè)效果赏陵， 為什么呢？
這就要涉及到CoordinatorLayout的使用核心Behavior了饲漾，Behavior就是執(zhí)行你定制的動作蝙搔，而我們的FloatingActionButton默認(rèn)是有一個(gè)Behavior的，所以才能達(dá)到隨著Snackbar彈出而彈起的功能考传。

FloatingActionButton源碼中的靜態(tài)內(nèi)部類

當(dāng)然了吃型，如果你想實(shí)現(xiàn)自己的效果的話，就需要自定義Behavior了僚楞，這里給大家推薦幾篇文章勤晚，自定義behavior寫的很棒http://blog.csdn.net/huachao1001/article/details/51554608

http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0824/6565.html

Toolbar

ToolBar是Android 5.0推出的一個(gè)新的導(dǎo)航控件用于取代之前的ActionBar，它具備高度的可定制性泉褐、靈活性赐写、具有Material Design風(fēng)格等優(yōu)點(diǎn)

1. 要用到toolbar，所以我們要把a(bǔ)ctionbar去掉膜赃，找到我們的styles文件挺邀，然后把parent里面的主題改為NoActionBar

2. 在代碼中添加我們的toolbar

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"/>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

3. 在代碼中設(shè)置toolbar

做到這一步，我們就已經(jīng)用toolbar代替actionbar了。

Toolbar的一些屬性

• android:background：修改背景色悠夯，比如這里背景顏色我設(shè)為橙色

• app:title：設(shè)置標(biāo)題文字癌淮，這里要注意，前面是app沦补，不是android

• app:titleTextColor：修改標(biāo)題文字的顏色

• app:titleTextAppearance：修改標(biāo)題文字的大小

• app:subtitle：設(shè)置子標(biāo)題的文字

• app:subtitleTextColor：修改子標(biāo)題文字的顏色

• app:subtitleTextAppearance：修改子標(biāo)題文字的大小

• app:navigationIcon：添加導(dǎo)航的圖標(biāo)

• app:logo：設(shè)置logo圖標(biāo)

添加右側(cè)菜單列表

1. 首先在res/menu目錄下的xml文件中定義的夕膀，要添加幾個(gè)動作虚倒，則在<menu>節(jié)點(diǎn)下添加幾個(gè)item。

<menu xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/add"
        app:showAsAction="always"
        android:icon="@drawable/add"
        android:title="add">
    </item>

    <item
        android:id="@+id/message"
        app:showAsAction="never"
        android:icon="@drawable/message"
        android:title="message">
    </item>

    <item
        android:id="@+id/setting"
        app:showAsAction="ifRoom"
        android:icon="@drawable/setting"
        android:title="setting">
    </item>
</menu>

這里跟大家說一下app:showAsAction這個(gè)屬性产舞，app:showAsAction是用來指定這個(gè)動作是放置在操作欄上魂奥，還是溢出菜單中。

• ifRoom

  • 如果操作欄有空間放置易猫，則放置在操作欄上耻煤，否則放置到溢出菜單中

• always

  • 總是放置在操作欄上

• never

  • 總是放置在溢出菜單中

2.在Activity中重寫onCreateOptionsMenu顯示菜單

3.重寫onOptionsItemSelected給菜單設(shè)置點(diǎn)擊事件

AppBarLayout

這個(gè)布局里面給我們提供了一個(gè)屬性

• 在xml文件中我們這樣寫

  • app:layout_scrollFlags

• 在代碼中我們這樣寫

  • setScrollFlags（）

對應(yīng)的幾個(gè)值

• srcoll

  • 這個(gè)View將會響應(yīng)Scroll事件

• enterAlways

  • 下拉的時(shí)候，這個(gè)View也會跟著滑出准颓。

• enterAlwaysCollapsed

  • 另一種enterAlways哈蝇，但是只顯示折疊后的高度。

• exitUntilCollapsed

  • 上拉的時(shí)候攘已，這個(gè)View會跟著滑動直到折疊炮赦。

• snap

  • 在Scroll滑動事件結(jié)束以前 ，如果這個(gè)View部分可見样勃，那么這個(gè)View會停在最接近當(dāng)前View的位置

由于這里還沒有說到CollapsingToolbarLayout吠勘，所以只能先說scroll，enterAlways和snap這三個(gè)峡眶，給大家看看效果剧防。

• 首先是scroll

scroll

RecyclerView往上滑動的時(shí)候，toolbar跟著上移幌陕，等RecyclerView滑倒頂部的時(shí)候诵姜，toolbar才開始往下滑動

• 然后是scroll+enterAlways

scroll+enterAlways

RecyclerView往上滑動的時(shí)候，toolbar跟著上移搏熄，但是只要RecyclerView往下移動了，toolbar馬上開始往下滑動暇赤，然后RecyclerView才開始繼續(xù)滑動

• 最后是scroll+snap

scroll+snap

大家可以看到心例，前面基本與單獨(dú)設(shè)置scroll沒什么區(qū)別，但是到了后面鞋囊，我特意把toolbar留了一點(diǎn)點(diǎn)止后，這個(gè)時(shí)候，snap的屬性就出來了，他會自動判斷是全部顯示還是隱藏译株。

xml代碼是這樣的

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <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/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|snap"/>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rcv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout

CollapsingToolbarLayout作用是提供了一個(gè)可以折疊的Toolbar瓜喇，它繼承FrameLayout，給它設(shè)置layout_scrollFlags歉糜，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView乘寒、Toolbar)在響應(yīng)layout_behavior事件時(shí)作出相應(yīng)的scrollFlags滾動事件(移除屏幕或固定在屏幕頂端)。
有了CollapsingToolbarLayout之后匪补，我們再來說一下app:layout_scrollFlags其中的2個(gè)屬性

• enterAlwaysCollapsed

  • 假設(shè)你定義了一個(gè)最小高度（minHeight）同時(shí)enterAlways也定義了伞辛，那么view將在到達(dá)這個(gè)最小高度的時(shí)候開始顯示，并且從這個(gè)時(shí)候開始慢慢展開夯缺，當(dāng)滾動到頂部的時(shí)候展開完蚤氏。

• exitUntilCollapsed

  • 當(dāng)你定義了一個(gè)minHeight，此布局將在滾動到達(dá)這個(gè)最小高度的時(shí)候折疊踊兜。

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            app:layout_scrollFlags="scroll"
            android:layout_height="match_parent">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rcv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>

• 首先是scroll

scroll

• 然后是scroll+enterAlways+enterAlwaysCollapsed

scroll+enterAlways+enterAlwaysCollapsed

• 最后是scroll+exitUntilCollapsed

scroll+exitUntilCollapsed

**********這里要注意一下**********

與AppBarLayout組合的滾動布局（Recyclerview竿滨、NestedScrollView等）需要設(shè)置app:layout_behavior="@string/appbar_scrolling_view_behavior"（上面代碼中NestedScrollView控件所設(shè)置的）。沒有設(shè)置的話捏境，AppBarLayout將不會響應(yīng)滾動布局的滾動事件于游。

• app:contentScrim：設(shè)置折疊時(shí)工具欄布局的顏色

• statusBarScrim：設(shè)置折疊時(shí)狀態(tài)欄的顏色，不過這里我們要先把狀態(tài)欄透明

1.在相應(yīng)的Activity中調(diào)用執(zhí)行這段代碼典蝌。

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {//5.0及以上
            View decorView = getWindow().getDecorView();
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
                    | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
            decorView.setSystemUiVisibility(option);
            getWindow().setStatusBarColor(Color.TRANSPARENT);
        } else if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {//4.4到5.0
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);
        }

2.給CollapsingToolbarLayout和其上的布局都加一條android:fitsSystemWindows="true"即可曙砂。

layout_collapseMode，該屬性有2個(gè)值

• pin：有該標(biāo)志位的View在頁面滾動的過程中會一直停留在頂部骏掀，比如Toolbar可以被固定在頂部

• parallax：有該標(biāo)志位的View表示能和頁面同時(shí)滾動鸠澈。與該標(biāo)志位相關(guān)聯(lián)的一個(gè)屬性是：layout_collapseParallaxMultiplier，該屬性是視差因子截驮，表示該View與頁面的滾動速度存在差值笑陈，造成一種相對滾動的效果。

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="fitXY"
                app:layout_collapseMode="parallax"
                android:src="@drawable/pic"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rcv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>

總結(jié)

Material design系列的文章到此結(jié)束了涵妥，正好國慶也快到了，給自己好好放個(gè)假坡锡，出去玩一趟蓬网！今天寫的比較多，如果有什么遺漏或者錯(cuò)誤希望大家指出鹉勒，我會及時(shí)更正的帆锋！
祝大家國慶快樂，中秋快樂啊禽额，如果覺得文章寫的不錯(cuò)锯厢，忍不住要給我送盒月餅我也是不介意的皮官，23333~~~

以上純屬于個(gè)人平時(shí)工作和學(xué)習(xí)的一些總結(jié)分享，如果有什么錯(cuò)誤歡迎隨時(shí)指出实辑，大家可以討論一起進(jìn)步捺氢。