? ? ? ?Google在2015的IO大會(huì)上，給我們帶來了更加詳細(xì)的Material Design設(shè)計(jì)規(guī)范，同時(shí)，也給我們帶來了全新的Android Design Support Library，在這個(gè)support庫里面，Google給我們提供了更加規(guī)范的MD設(shè)計(jì)風(fēng)格的控件。最重要的是，Android Design Support Library的兼容性更廣，直接可以向下兼容到Android 2.2。這不得不說是一個(gè)良心之作。接下來我們就來看下Android Support Design Library里面的一些控件的解釋和使用。

1、CoordinatorLayout

? ? ? ?CoordinatorLayout可以理解為一個(gè)協(xié)調(diào)布局，通常做為一個(gè)上層的ViewGroup，把CoordinatorLayout當(dāng)成一個(gè)通信的橋梁，來連接不同的子View。這些子View 的具體響應(yīng)動(dòng)作都是通過Behavior實(shí)現(xiàn)。CoordinatorLayout單獨(dú)使用沒啥效果，要配合直接子View對(duì)應(yīng)的Behavior來實(shí)現(xiàn)各種各樣的效果。

CoordinatorLayout布局屬性

CoordinatorLayout LayoutParams 屬性（在CoordinatorLayout的直接子View中可以設(shè)置的屬性）

2、AppBarLayout

? ? ? ?AppBarLayout是ViewGroup容器組件，繼承自LinerLayout，默認(rèn)是垂直方向的。AppBarLayout的作用是把AppBarLayout包裹的內(nèi)容都作為AppBar（Material Design設(shè)計(jì)的App Bar）。AppBarLayout單獨(dú)使用沒有啥特別的效果，要配合CoordinatorLayout實(shí)現(xiàn)滾動(dòng)收縮效果。

AppBarLayout布局屬性

AppBarLayout LayoutParams屬性

AppBarLayout LayoutParams屬性里面其中l(wèi)ayout_scrollFlags對(duì)應(yīng)的值有以下幾個(gè)情況：

• scroll: 所有想滾動(dòng)出屏幕的view都需要設(shè)置這個(gè)flag-沒有設(shè)置這個(gè)flag的view將被固定在屏幕頂部。
• enterAlways: 這個(gè)flag讓任意向下的滾動(dòng)都會(huì)導(dǎo)致該view變?yōu)榭梢?啟用快速“返回模式”。
• enterAlwaysCollapsed: 當(dāng)你的視圖已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時(shí)，你的視圖只能以最小高度進(jìn)入，只有當(dāng)滾動(dòng)視圖到達(dá)頂部時(shí)才擴(kuò)大到完整高度。
• exitUntilCollapsed: 滾動(dòng)退出屏幕，最后折疊在頂端。

? ? ? ?AppBarLayout單獨(dú)使用沒有啥特別的效果。一般會(huì)配合CoordinatorLayout來使用。在CoordinatorLayout布局下包裹一個(gè)實(shí)現(xiàn)了NestedScrollingChild可滑動(dòng)的類( RecyclerView，NestedScrollView)和AppBarLayout，來實(shí)現(xiàn)AppBarLayout里面某個(gè)子View的收縮和展開。

我們用一個(gè)實(shí)例來做簡單的介紹：CoordinatorLayout + RecyclerView(ViewPager里面放置的是RecyclerView) + AppBarLayout 實(shí)現(xiàn)AppBarLayout里面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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorActivity">

    <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"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:textColor="@android:color/white"
                android:gravity="center"
                android:text="自定義標(biāo)題"
                android:textSize="18sp" />

        </android.support.v7.widget.Toolbar>

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            style="@style/AppTheme.TabStyle"
            app:tabMode="scrollable"
            app:tabGravity="fill" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/page_collapsing"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout + RecyclerView(ViewPager里面放置的是RecyclerView) + AppBarLayout 實(shí)現(xiàn)AppBarLayout里面Toolbar的收縮和展開效果圖

AppBarLayout.gif

? ? ? ?雖然看到效果了，但是有時(shí)候也會(huì)很好奇，這個(gè)收縮和展開的里面倒是是咋個(gè)工作的。我們還是在上面的基礎(chǔ)上來說一說大概的流程。首先最外層是CoordinatorLayout布局，CoordinatorLayout里面有兩個(gè)子布局AppBarLayout + ViewPager。第一點(diǎn)：ViewPager指定了app:layout_behavior="@string/appbar_scrolling_view_behavior"這個(gè)是一定要指定的，這個(gè)behavior是用來指導(dǎo)ViewPager layout， 確定ViewPager在CoordinatorLayout里面位置的。第二點(diǎn)：ViewPager里面一定要有實(shí)現(xiàn)了NestedScrollView的布局，我們例子里面每個(gè)ViewPager都是一個(gè)RecyclerView。當(dāng)RecyclerView有滑動(dòng)事件的時(shí)候會(huì)通過NestedScrollView傳遞到CoordinatorLayout里面去。這個(gè)時(shí)候CoordinatorLayout拿到事件了那得指導(dǎo)AppBarLayout里面某個(gè)或者某些View來做相應(yīng)的展開和收縮處理了。這個(gè)就是第三點(diǎn)的內(nèi)容了。第三點(diǎn)：AppBarLayout默認(rèn)的behavior(AppBarLayout.Behavior)里面onNestedScroll函數(shù)來指導(dǎo)AppBarLayout里面指定View收縮和展開。第四點(diǎn)：咱們CoordinatorLayout里面不是又兩個(gè)子View么AppBarLayout是收縮和展開了，但是AppBarLayout收縮和展開的時(shí)候ViewPager不是也會(huì)相應(yīng)的上移和下移么。這一部分是哪里做到的呢，ViewPager不是設(shè)置了app:layout_behavior="@string/appbar_scrolling_view_behavior"么， 這個(gè)behavior(AppBarLayout.ScrollingViewBehavior)里面onDependentViewChanged()函數(shù)ViewPager會(huì)隨AppBarLayout上移和下移。

? ? ? ?針對(duì)AppBarLayout的收縮和展開，還實(shí)現(xiàn)了其他的一種效果，直接在AppBarLayout里面放了一個(gè)圖標(biāo)控件，效果圖如下：

Table.gif

3、CollapsingToolbarLayout

? ? ? ?CollapsingToolbarLayout是工具欄包裝器，用來實(shí)現(xiàn)“折疊效果”的工具欄。通常包含在AppBarLayout中使用。

CollapsingToolbarLayout布局屬性

CollapsingToolbarLayout Param 屬性，CollapsingToolbarLayout的直接子Ｖiew才能設(shè)置

CollapsingToolbarLayout的使用的得配合CoordinatorLayout + 實(shí)現(xiàn)了NestedScrollView的View + AppBarLayout + CollapsingToolbarLayout 實(shí)現(xiàn)CollapsingToolbarLayout收縮和展開

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="wrap_content"
                android:layout_height="250dp"
                android:scaleType="centerCrop"
                android:src="@drawable/bg_gaoan"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0"
                android:contentDescription="@null" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                app:title="@string/text_title"
                app:navigationIcon="@drawable/ic_arrow_back_white_24dp"
                app:titleTextColor="@android:color/holo_red_dark"
                app:layout_collapseMode="pin">
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/text_info"
            android:textSize="20sp" />
    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="end|bottom|right" />
</android.support.design.widget.CoordinatorLayout>

效果圖

CollapsingToolbarLayout.gif

4、TabLayout

? ? ? ?在開發(fā)中，我們常常需要ViewPager結(jié)合Fragment一起使用。這個(gè)時(shí)候通常會(huì)有一個(gè)Tab欄來顯示當(dāng)前切換到了那個(gè)Fragment。這個(gè)Tab欄的布局就是是用TabLayout來實(shí)現(xiàn)的。

TabLayout布局屬性

app:tabGravity屬性只有在tabMode設(shè)置為fixed的情況下有效．比如當(dāng)tab個(gè)數(shù)比較少時(shí)，讓tab現(xiàn)實(shí)在TabLayout的中間．

TabLayout.gif

5、TextInputLayout

? ? ? ?TextInputLayout用于輔助顯示提示信息(也包括錯(cuò)誤信息)， 要和EditText(或EditText的子類）結(jié)合使用，并且只能包含一個(gè)EditText(或EditText的子類）。有一點(diǎn)要特別注意如果你在TextInputLayout里面準(zhǔn)備使用EditText的話推薦使用TextInputEditText替換．因?yàn)門extInputEditText相對(duì)于EditText修復(fù)了一個(gè)bug（當(dāng)鍵盤彈出布局被頂上去的時(shí)候TextInputEditText表現(xiàn)更好點(diǎn)）。

TextInputLayout布局屬性

TextInputLayout.gif

6、NavigationView

? ? ? ?NavigationView是導(dǎo)航視圖,一般會(huì)配合DrawerLayout來使用做抽屜菜單．

NavigationView布局屬性

NavigationView.gif

7、FloatingActionButton

? ? ? ?懸浮按鈕。一般用來配合CoordinatorLayout使用，實(shí)現(xiàn)跟隨某個(gè)（AppBarLayout）移動(dòng)。

FloatingActionButton布局屬性

8、Snackbar

? ? ? ?Snackbar提供了一個(gè)介于Toast和AlertDialog之間輕量級(jí)控件，它可以很方便的提供消息的提示和動(dòng)作反饋。Snackbar源碼分析

Snackbar.gif

本文中所有實(shí)例下載地址鏈接