要使用MD風(fēng)格控件珊皿，首先需要在Gradle中加入Support Design Library芥被，例如：
compile 'com.android.support:design:24.1.1'

一、CoordinatorLayout

1、CoordinatorLayout + AppBarLayout
布局文件代碼如下：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    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:theme="@style/AppTheme.AppBarOverlay">

        <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|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:title="MdView" />

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

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

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

看一下效果：

CoordinatorLayout_1

scroll：需要滾動(dòng)出屏幕的view需要設(shè)置該flag， 沒(méi)有設(shè)置則view將被固定在屏幕頂部喳篇。
enterAlways: 使用該flag敞临，則向下的滾動(dòng)會(huì)使view變?yōu)榭梢?jiàn)狀態(tài)。

為T(mén)oolbar設(shè)置layout_scrollFlags屬性只是第一步麸澜，還需要在CoordinatorLayout 中提供一個(gè)可滾動(dòng)的View挺尿，我們使用ViewPager，并在里邊嵌套R(shí)ecyclerView炊邦。同時(shí)需要為ViewPager設(shè)置如下屬性：app:layout_behavior="@string/appbar_scrolling_view_behavior"

這里簡(jiǎn)單說(shuō)下Tablayout的用法：

 //設(shè)置TabLayout可滾動(dòng)编矾，保證Tab數(shù)量過(guò)多時(shí)也可正常顯示
        mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        //兩個(gè)參數(shù)分別對(duì)應(yīng)Tab未選中的文字顏色和選中的文字顏色
        mTabLayout.setTabTextColors(Color.WHITE, Color.RED);
        //綁定ViewPager
        mTabLayout.setupWithViewPager(mViewPager);
        //設(shè)置TabLayout的布局方式（GRAVITY_FILL、GRAVITY_CENTER）
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
        mTabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        //設(shè)置TabLayout的選擇監(jiān)聽(tīng)
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            //點(diǎn)擊Tab時(shí)回調(diào)
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                mViewPager.setCurrentItem(tab.getPosition());
            }
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }
            //重復(fù)點(diǎn)擊Tab時(shí)回調(diào)
            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                scrollToTop(mFragments.get(tab.getPosition()).getTypeList());
            }
        });

Tablayout選中與否的顏色也可以在xml文件中配置：

<android.support.design.widget.TabLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/c1" //tab指示條顏色
        app:tabSelectedTextColor="@color/c1" //選中的tab文字顏色
        app:tabTextColor="@color/c11" /> //tab文字默認(rèn)顏色

注意添加命名空間：

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

2馁害、CoordinatorLayout + AppBarLayout + 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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:id="@+id/detail_content"
    tools:context="com.othershe.mdview.DetailActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

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

            <ImageView
                android:id="@+id/detail_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="fitXY"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.7" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay" />

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

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

        <WebView
            android:id="@+id/webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

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

看一下效果：

CoordinatorLayout_2

exitUntilCollapsed: 滾動(dòng)退出屏幕吊骤，最后折疊在頂端

同時(shí)AppBarLayout的高度需要時(shí)第一個(gè)固定值缎岗，這樣CollapsingToolbarLayout就有了折疊的效果。

折疊后Toolbar可以固定在頂部是因?yàn)槭褂昧?code>app:layout_collapseMode="pin"屬性白粉，屬性值除了pin還有一個(gè)parallax：

pin：固定模式传泊，在折疊的時(shí)候最后固定在頂端
parallax：視差模式，在折疊時(shí)會(huì)有個(gè)視差折疊的效果

同時(shí)在ImageView中使用了app:layout_collapseMode="parallax"屬性鸭巴，來(lái)產(chǎn)生視差漸變的效果眷细，使用app:layout_collapseParallaxMultiplier="0.7"可以控制視差的變化，屬性值的范圍是[0.0, 1.0]鹃祖，值越大視察越大溪椎。

最后還需要在NestedScrollView中設(shè)置app:layout_behavior="@string/appbar_scrolling_view_behavior屬性。

3、CoordinatorLayout + FloatingActionButton
看一下布局文件代碼：

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    .......................
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_menu_share" />

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

FloatingActionButton的父View是CoordinatorLayout校读，在屏幕右下角顯示沼侣，在java代碼中我們可以這樣使用：

mFab.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(mCoordinatorLayout, "點(diǎn)我分享哦！", Snackbar.LENGTH_SHORT).show();
            }
        });

看效果：

CoordinatorLayout_3

在Snackbar展示的時(shí)候FloatingActionButton上移歉秫，隱藏時(shí)下移蛾洛。如果FloatingActionButton的父View是RelativeLayout或其它Container則FloatingActionButton不會(huì)上移而導(dǎo)致被Snackbar覆蓋。

在CoordinatorLayout_2的gif效果中雁芙，我們上滑時(shí)FloatingActionButton會(huì)折疊消失轧膘，其實(shí)只需要如下兩個(gè)屬性就可以

app:layout_anchor="@id/app_bar"
app:layout_anchorGravity="bottom|end"

第一個(gè)屬性使FloatingActionButton顯示在AppBarLayout的區(qū)域，第二個(gè)屬性確定顯示的具體位置兔甘。

二扶供、Toolbar

使用Toolbar首先要隱藏原有的ActionBar，我們可以增加一個(gè)主題

<style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

也可以擴(kuò)展原有的主題,

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

colorPrimary：對(duì)應(yīng)ActionBar的顏色裂明。
colorPrimaryDark：對(duì)應(yīng)狀態(tài)欄的顏色
colorAccent：對(duì)應(yīng)EditText編輯時(shí)、FloatingActionButton背景等顏色太援。

在布局文件中的用法可以參考上邊的代碼闽晦，之后在java代碼中得到Toolbar，通過(guò)setSupportActionBar(mToolbar);使Toolbar取代原本的ActionBar提岔。

接下來(lái)看一張圖：

Toolbar

標(biāo)出了一些Toolbar常用的擴(kuò)展方法仙蛉，這樣我們可以更好的根據(jù)需求定制我們的Toolbar了。具體的實(shí)踐可參考源碼碱蒙。

三荠瘪、NavigationView

先看一下效果：

NavigationView

其實(shí)NavigationView就是用來(lái)實(shí)現(xiàn)我們常見(jiàn)的側(cè)滑菜單的效果的。
在布局文件中的代碼：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <include
        layout="@layout/content_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/menu_drawer"
        app:headerLayout="@layout/nav_head_main" />

</android.support.v4.widget.DrawerLayout>

以DrawerLayout作為根布局赛惩，content_main作為主界面布局哀墓，最后是NavigationView，通過(guò)android:layout_gravity="start"設(shè)置為左側(cè)滑菜單喷兼，同理android:layout_gravity="end"代表右側(cè)滑菜單篮绰。
其中

app:menu="@menu/menu_drawer"
app:headerLayout="@layout/nav_head_main"

兩個(gè)屬性分別代表NavigationView的頂部header布局以及下邊的menu item布局，具體可以參考源代碼季惯。
準(zhǔn)備好了布局文件吠各，接下來(lái)就是初始化工作：

private void initNavigationView() {
        //初始化NavigationView頂部head的icon和name
        ImageView icon = (ImageView) mNavView.getHeaderView(0).findViewById(R.id.nav_head_icon);
        icon.setImageResource(R.mipmap.ic_launcher);
        TextView name = (TextView) mNavView.getHeaderView(0).findViewById(R.id.nav_head_name);
        name.setText("VipOthershe");
        //設(shè)置NavigationView對(duì)應(yīng)menu item的點(diǎn)擊事情
        mNavView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.nav_item1:
                        break;
                    case R.id.nav_item2:
                        break;
                    case R.id.nav_set:
                        break;
                    case R.id.menu_share:
                        break;
                    case R.id.nav_about:
                        break;
                }
                //隱藏NavigationView
                mDrawerLayout.closeDrawer(GravityCompat.START);
                return true;
            }
        });
    }

很簡(jiǎn)單，就是初始化NavigationView的頂部header和Menu Item勉抓。

接下來(lái)看一下如何將右滑菜單和Toolbar結(jié)合使用：

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, mDrawerLayout, mToolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        mDrawerLayout.addDrawerListener(toggle);
        //設(shè)置左上角顯示三道橫線
        toggle.syncState();

通過(guò)設(shè)置將兩者綁定在一起贾漏，同時(shí)Toolbar左上角顯示三道橫線，左上角可打開(kāi)左滑菜單藕筋。

還可以采用另外一種方式：

 //設(shè)置Toolbar左上角圖標(biāo)
        mToolbar.setNavigationIcon(R.mipmap.ic_launcher);
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mDrawerLayout.openDrawer(GravityCompat.START);
            }
        });

先設(shè)置Toolbar左上角圖標(biāo)纵散，并綁定事件，通過(guò)mDrawerLayout.openDrawer(GravityCompat.START);打開(kāi)左滑菜單。

以上兩個(gè)方法困食，分別對(duì)應(yīng)打開(kāi)和關(guān)閉左滑菜單：

mDrawerLayout.openDrawer(GravityCompat.START);
mDrawerLayout.closeDrawer(GravityCompat.START);

如果使用右滑菜單則將GravityCompat.START改成GravityCompat.END边翁，即可實(shí)現(xiàn)右滑菜單的開(kāi)關(guān)。

有需要的話可下載源碼：點(diǎn)我下載哦!