本文主要介紹一下如何使用CoordinatorLayout

先看看官方是怎麼介紹Material Design的

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

通過上面的這段英文相信大家對Material Design或多或少都有一定的認識了吧！大概的意思也就是google努力的幫你設計出一套很好視圖設計規范，你按這個規范來咯~~~

我覺得我們需要關注的控件也就下面4個吧~

SnackBar：一個類似於Toast的控件，下文會提及 FloatingActionButton：懸浮按鈕 CoordinatorLayout：也就是本篇博文的豬腳咯~~ Tablayout:本篇不聊

講了這麼多廢話，那麼我們正式進入今天的主題吧！

CoordinatorLayout 實現了多種Material Design中提到的滾動效果。目前這個框架提供了幾種不用寫動畫代碼就能工作的方法，這些效果包括：

當snackbar顯示的時候，浮動按鈕上移，給snackbar留出位置：效果如下

擴展或者縮小Toolbar或者頭部，讓主內容區域有更多的空間：效果如下

控制哪個view應該擴展還是收縮，以及其顯示大小比例，包括視差滾動效果動畫。

自行引入Design Support Library，不清楚請自行網補

首先，我們看第一種效果

布局代碼

嘻嘻，今天豬腳終於亮相了，首先我們使用了CoordinatorLayout作為根布局，CoordinatorLayout可以用來配合浮動操作按鈕的 layout_anchor 和 layout_gravity屬性創造出浮動效果，只要使用CoordinatorLayout作為基本布局，將自動產生向上移動的動畫。浮動操作按鈕有一個 默認的 behavior來檢測Snackbar的添加並讓其在Snackbar之上呈現上移與Snackbar等高的動畫。

咳咳，這個我相信大家都能懂，那麼我們來說說FloatingActionButton這個控件。

當我們的項目需要一個圓形的Button， 你可能會想到用自定義Shape的方式去做，但那樣文本的顯示不好居中，這時估計就想到用自定義控件去解決了。以上都是廢話，google給我們提供了FloatingActionButton可以輕松的創建圓形Button,而且更牛x的是FloatingActionButton具有更絢麗的效果。
FloatingActionButton繼承自ImageView,所以你懂的，ImageView的屬性我們闊以直接拿來用咯，so。。如果我們需要整個圓形的ImageView也當然闊以直接用這個咯~~

FloatingActionButton的屬性主要有

app:backgroundTint是指定默認的背景顏色 app:rippleColor是指定點擊時的背景顏色 app:borderWidth border的寬度 app:fabSize是指FloatingActionButton的大小，可選normal|mini app:elevation 可以看出該空間有一個海拔的高度 app:pressedTranslationZ 哈，按下去時的z軸的偏移

傳說中的一圖勝千言

卡卡的 湊合看吧！！

第二種效果 Toolbar的擴展與收縮

先看效果吧

布局如下

首先你必須保證用toolbar替代actionbar，至於toolbar的具體使用，也不是本篇的重點，不清楚的童鞋闊以自行網補(話說這博客到底有木有干貨~~啥都要網補)

接下來，我們必須使用一個容器布局：AppBarLayout來讓Toolbar響應滾動事件。請注意：AppBarLayout必須是CoordinatorLayout的直接子View。

然後，我們需要定義AppBarLayout與滾動視圖之間的聯系。在RecyclerView或者任意支持嵌套滾動的view（比如NestedScrollView）上添加app:layout_behavior。support library包含了一個特殊的字符串資源@string/appbar_scrolling_view_behavior（此處是反射），它和AppBarLayout.ScrollingViewBehavior相匹配，用來通知AppBarLayout 這個特殊的view何時發生了滾動事件。

這個behavior需要設置在觸發事件（滾動）的view之上。（注意上面提到的嵌套滾動~~~~比如我們常用的scrollView、listview都是屬於不支持嵌套滾動的）

當CoordinatorLayout發現RecyclerView中定義了這個屬性，它會搜索自己所包含的其他view，看看是否有view與這個behavior相關聯。AppBarLayout.ScrollingViewBehavior描述了RecyclerView與AppBarLayout之間的依賴關系。RecyclerView的任意滾動事件都將觸發AppBarLayout或者AppBarLayout裡面view的改變。

細心的你不知道是否已經發現~額 toolbar有

app:layout_scrollFlags="scroll|enterAlways"

這樣一條屬性。app:layout_scrollFlags，什麼玩意兒，聽我慢慢道來。前面我們提到RecyclerView的任意滾動事件都將觸發AppBarLayout或者AppBarLayout裡面view的改變。那麼，AppBarLayout裡面的子View到底以怎麼樣的方式進行滾動呢？此時這個屬性就起作用了！！！
那麼我們看看這個屬性的屬性值都用哪些

scroll 誰要滾出屏幕，誰就設置這個值 enterAlways 其他向上滑動時，可以立即顯示出來 exitUntilCollapsed 將關閉滾動直到它被折疊起來(有 minHeight) 並且一直保持這樣 enterAlwaysCollapsed 定義了 View 是如何回到屏幕的，當你的 view 已經聲明了一個最小高度(minHeight) 並且你使用了這個標志，你的 View 只有在回到這個最小的高度的時候才會展開，只有當 view 已經到達頂部之後它才會重新展開全部高度。

第三種，折疊效果

先上圖！

布局如下

可以看到，我們將image和toolbar使用CollapsingToolbarLayout包裹起來了
通常，我們我們都是設置Toolbar的title，而現在，我們需要把title設置在CollapsingToolBarLayout上，而不是Toolbar。

CollapsingToolbarLayout collapsingToolbar =
              (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
      collapsingToolbar.setTitle("Title");

該控件的的子view必須要有Toolbar，他的作用就是提供一個可折疊的標題欄。通常情況下，該控件會和上面我們說的一些控件搭配使用，達到一種固定的效果。

我們先分析一下上面這段布局,最直觀的，可以看到有一個行為上的協作， 那肯定需要CoordinatorLayout這個控件，而且還會有一個滑動的效果，那肯定是AppBarLayout啦，當然，細心的朋友可能還會看出來，那個圖片和Toolbar會有一種視差的效果，而且整個banner部分是一種折疊的效果，這就需要CollapsingToolbarLayout這個控件了。
AppBarLayout通過CollapsingToolBarLayout把ImageView和Toolbar作為整個app的標題欄，而且表示滾動標識的app:layout_scrollFlags=”scroll|exitUntilCollapsed”也是賦值給了CollapsingToolbarLayout，mageView有一條屬性app:layout_collapseMode=”parallax”表示這個ImageView以視差的形式折疊(效果上看著貌似就是有點小偏移)。 Toolbar的app:layout_collapseMode=”pin”表示Toolbar在折疊的過程中會停靠頂部(pin的意思是釘住)。 這樣CollapsingToolBarLayout就沒有全部滾出界面。
如果你希望滾動的時候漸變的顏色跟隨的是圖片而不是藍色漸變，在java代碼中使用如下代碼

final CollapsingToolbarLayout ctl = (CollapsingToolbarLayout) findViewById(R.id.ctl);
        ctl.setTitle("Temperate_box");
...
Bitmap bmp = BitmapFactory.decodeResource(getResources(), R.drawable.banner);
        Palette.generateAsync(bmp, new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                Palette.Swatch swatch = palette.getDarkMutedSwatch();
                ctl.setContentScrimColor(swatch.getRgb());
            }
        });

ok,打完收工~~~~