Android Design Support Library

Google在2015的IO大会上，给我们带来了更加详细的Material Design设计规范，同时，也给我们带来了全新的Android Design Support Library，在这个support库里面，Google给我们提供了更加规范的MD设计风格的控件。最重要的是，Android Design Support Library的兼容性更广，直接可以向下兼容到Android 2.2。

使用Support Library非常简单，添加引用即可：

compile 'com.android.support:design:23.2.0' //可修改版本号为自己匹配

Design Support Library包含8个控件，具体如下：

下面分别详细介绍。
介绍这几个控件之前，我们先来看看Material Design主题的风格。

MD的Theme

md的主题有：

• @android:style/Theme.Material (dark version)
• @android:style/Theme.Material.Light (light version)
• @android:style/Theme.Material.Light.DarkActionBar

与之对应的Compat Theme:

• Theme.AppCompat
• Theme.AppCompat.Light
• Theme.AppCompat.Light.DarkActionBar

我们可以根据我们的app的风格，去定制Color Palette(调色板)，重点有以下几个属性：

<resources>    <!-- Base application theme. -->    <style name="AppBaseTheme" parent="Theme.AppCompat">        <!-- customize the color palette -->        <item name="colorPrimary">@color/material_blue_500</item>        <item name="colorPrimaryDark">@color/material_blue_700</item>        <item name="colorAccent">@color/material_green_A200</item>    </style></resources>

colorPrimary 对应ActionBar的颜色。
colorPrimaryDark对应状态栏的颜色
colorAccent 对应EditText编辑时、RadioButton选中、CheckBox等选中时的颜色。

注：对于5.0以下的设备，目前colorPrimaryDark无法去个性化状态栏的颜色；底部的navagationBar可能也不一样，更别说设置颜色了。

Snackbar

Snackbar提供了一个介于Toast和AlertDialog之间轻量级控件，它可以很方便的提供消息的提示和动作反馈。Snackbar和Toast比较相似，但是用途更加广泛，并且它是可以和用户进行交互的。Snackbar使用一个动画效果从屏幕的底部弹出来，过一段时间后也会自动消失。

Snackbar.make(snackBar, "Snackbar comes out", Snackbar.LENGTH_LONG)        .setAction("Action", new View.OnClickListener() {                  @Override                  public void onClick(View v) {                  Toast.makeText( MainActivity.this,"Toast comes out",Toast.LENGTH_SHORT).show();                  }        }).show();

这里调用Snackbar的make()方法来创建一个Snackbar对象，make()方法的第一个参数是Snackbar显示的基准元素，需要传入一个view，只要是当前界面布局的任意一个view都可以，Snackbar会使用这个view来自动查找最外层的布局，用于展示Snackbar。第二个参数就是Snackbar中显示的内容，第三个参数是Snackbar显示的时长。这些和Toast都是类似的。
接着这里又调用了一个setAction()方法来设置一个动作，从而让Snackbar不仅仅是一个提示，而是可以和用户进行交互的，这里Action可以设置多个。最后调用show()方法让Snackbar显示出来。

现在重新运行一下程序，效果如下图所示：

Google API Doc 官方说明：

TextInputLayout

TextInputLayout功能非常简单，就是用于用户在EditText中输入时hint的提示和错误的提示。
先来看看效果图吧：

从上图很明显的看出：
1、当EditText获得焦点时候，TextInputLayout会在左上角默认生成一个Label用来显示EditText中hint的内容，所以当用户输入时候hint内容会浮动到左上角，这极大便利了用户输入提交数据的体验。
2、当EditText中输入的内容不合法时，TextInputLayout便会在EditText的左下角用红色显示错误的提示信息。
下面来看看怎么用代码实现上面功能吧：
先看看布局文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin">    <Button        android:id="@+id/snackBar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="SnackBar"        android:layout_margin="10dp"/>    <android.support.design.widget.TextInputLayout        android:id="@+id/til_name"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="10dp">        <EditText            android:layout_width="match_parent"            android:layout_height="wrap_content" />    </android.support.design.widget.TextInputLayout>    <android.support.design.widget.TextInputLayout        android:id="@+id/til_password"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="10dp">        <EditText            android:layout_width="match_parent"            android:layout_height="wrap_content" />    </android.support.design.widget.TextInputLayout></LinearLayout>

在Java代码中实现：

    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        til_name = (TextInputLayout) findViewById(R.id.til_name);        til_password = (TextInputLayout) findViewById(R.id.til_password);        //设置Hint信息        til_name.setHint("Name");        til_password.setHint("Password");        //设置输入监听        til_name.getEditText().addTextChangedListener(new MyTextWatcher(til_name, "用户名长度不能小于6位"));        til_password.getEditText().addTextChangedListener(new MyTextWatcher(til_password, "密码长度不能小于6位"));    }    //自定义监听器    class MyTextWatcher implements TextWatcher {        private TextInputLayout mTextInputLayout;        private String errorInfo;        public MyTextWatcher(TextInputLayout textInputLayout, String errorInfo) {            this.mTextInputLayout = textInputLayout;            this.errorInfo = errorInfo;        }        @Override        public void beforeTextChanged(CharSequence s, int start, int count, int after) {        }        @Override        public void onTextChanged(CharSequence s, int start, int before, int count) {        }        @Override        public void afterTextChanged(Editable s) {            if (mTextInputLayout.getEditText().getText().toString().length() < 6) {                mTextInputLayout.setErrorEnabled(true);//打开错误提示                mTextInputLayout.setError(errorInfo);//设置错误提示信息            } else {                mTextInputLayout.setErrorEnabled(false);//关闭错误提示            }        }    }

其中，需要注意以下几点：
1、TextInputLayout布局中只能包含一个EditText子View，不能包含多个EditText。
2、TextInputLayout中有个方法getEditText();该方法返回的是它的子EditText对象，所以我们可通过mTextInputLayout.getEditText();来得到EditText对象，不需要findViewById找了。
3、设置错误提示信息时一定要先setErrorEnabled(true);再设置setError(…);因为TextView只在setErrorEnabled(true)方法中创建，必须创建好TextView才能往TextView上设置信息。而不需要设置时直接setErrorEnabled(false);即可，因为它自身会remove移除TextView。
4、TextInputLayout的颜色来自style中的colorAccent的颜色。

<item name="colorAccent">#FF4081</item>

Google API Doc 官方说明：

Floating Action Button

FloatingActionButton 是一个负责显示界面基本操作的圆形悬浮按钮。FAB继承自ImageView，你可以使用android:src或者ImageView的任意方法，比如setImageDrawable()来设置FloatingActionButton里面的图标。

    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_margin="10dp"        android:src="@drawable/good"/>

其他设置：
注意：使用以下属性时，需要在Layout中添加命名空间：xmlns:app=”http://schemas.android.com/apk/res-auto”
（1）悬浮操作按钮支持两种size（normal和mini），默认是normal，可以通过app:fabSize指定。
（2）FAB背景颜色默认取的是style中的colorAccent，可以通过app:backgroundTint来指定。
（3）FAB点击时颜色效果默认取的是theme中的colorControlHighlight，可以通过app:rippleColor来指定。
（4）和立体感相关有两个属性，elevation和pressedTranslationZ，前者用户设置正常显示的阴影大小；后者是点击时显示的阴影大小。

    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/good"        app:fabSize="mini"        app:backgroundTint="#ff0000ff"        app:rippleColor="#ff00ff00"        app:elevation="6dp"        app:pressedTranslationZ="12dp"/>

TabLayout

通过选项卡的方式切换View并不是MD中才有的新概念，但是Google却是第一次在support库中提供了完整的支持，而且，Design library的TabLayout 既实现了固定的选项卡 （View的宽度平均分配），也实现了可滚动的选项卡（View宽度不固定同时可以横向滚动）。选项卡可以在程序中动态添加：

    <android.support.design.widget.TabLayout        android:id="@+id/tabs"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:tabBackground="@color/colorPrimary"        app:tabTextColor="#ffffffff"        app:tabSelectedTextColor="#ffff0000"        app:tabIndicatorColor="#ffffff00"        app:tabIndicatorHeight="5dp"        app:tabMode="fixed"/>

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabs);tabLayout.addTab(tabLayout.newTab().setText("tab1"));tabLayout.addTab(tabLayout.newTab().setText("tab2"));tabLayout.addTab(tabLayout.newTab().setText("tab3"));

但实际开发中我们很少这样用，通常滑动布局都会和ViewPager配合起来使用，所以，我们需要ViewPager来帮忙：
布局文件：

    <android.support.design.widget.TabLayout        android:id="@+id/tabs"        android:layout_width="match_parent"        android:layout_height="wrap_content"        app:tabBackground="@color/colorPrimary"        app:tabTextColor="#ffffffff"        app:tabSelectedTextColor="#ffff0000"        app:tabIndicatorColor="#ffffff00"        app:tabIndicatorHeight="5dp"        app:tabMode="fixed"/>    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="wrap_content"/>

Java中设置ViewPager数据，并将ViewPager和TabLayout关联起来。

   private void setupViewPager() {        mInflater = LayoutInflater.from(this);        view1 = mInflater.inflate(R.layout.tab_main, null);        view2 = mInflater.inflate(R.layout.tab_main, null);        view3 = mInflater.inflate(R.layout.tab_main, null);        view4 = mInflater.inflate(R.layout.tab_main, null);        view5 = mInflater.inflate(R.layout.tab_main, null);        //添加页卡视图        mViewList.add(view1);        mViewList.add(view2);        mViewList.add(view3);        mViewList.add(view4);        mViewList.add(view5);        //添加页卡标题        mTitleList.add("No:1");        mTitleList.add("No:2");        mTitleList.add("No:3");        mTitleList.add("No:4");        mTitleList.add("No:5");        mTabLayout.setTabMode(TabLayout.MODE_FIXED);//设置tab模式，当前为系统默认模式        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(0)));        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(1)));        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(2)));        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(3)));        mTabLayout.addTab(mTabLayout.newTab().setText(mTitleList.get(4)));        MyPagerAdapter mAdapter = new MyPagerAdapter(mViewList, mTitleList);        mViewPager.setAdapter(mAdapter);//给ViewPager设置适配器        mTabLayout.setupWithViewPager(mViewPager);//将TabLayout和ViewPager关联起来。        mTabLayout.setTabsFromPagerAdapter(mAdapter);//给Tabs设置适配器    }

ViewPager的Adapter适配器：

class MyPagerAdapter extends PagerAdapter {    private List<View> mViewList;    private List<String> mTitleList;    public MyPagerAdapter(List<View> mViewList, List<String> mTitleList) {        this.mViewList = mViewList;        this.mTitleList = mTitleList;    }    @Override    public int getCount() {        return mViewList.size();//页卡数    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;//官方推荐写法    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        container.addView(mViewList.get(position));//添加页卡        return mViewList.get(position);    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(mViewList.get(position));//删除页卡    }    @Override    public CharSequence getPageTitle(int position) {        return mTitleList.get(position);//页卡标题    }}

NavigationView

NavigationView在MD设计中非常重要，之前Google也提出了使用DrawerLayout来实现导航抽屉。这次，在support library中，Google提供了NavigationView来实现导航菜单界面，所以，新的导航界面可以这样写了：

<android.support.v4.widget.DrawerLayout    android:id="@+id/dl_main_drawer"    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">    <!-- 你的内容布局-->    <include layout="@layout/content"/>    <android.support.design.widget.NavigationView        android:id="@+id/nv_main_navigation"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        app:headerLayout="@layout/navigation_header"        app:menu="@menu/drawer_view"/></android.support.v4.widget.DrawerLayout>

可以看到我们的最外层是DrawerLayout，里面一个content，一个作为drawer。我们的drawer为NavigationView。
其中NavigationView 中的 android:layout_gravity=”start” 属性来控制抽屉菜单从哪边滑出，一般 “start ”从左边滑出，“end”从右边滑出。
其中最重要的就是下面两个属性：
app:headerLayout
app:menu
通过这两个属性，我们可以非常方便的指定导航界面的头布局和菜单布局。

来看看headerLayout的布局文件（layout目录）和menu配置文件（menu目录）：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="200dp"    android:background="#ff0000ff"    android:gravity="center"    android:orientation="vertical"    android:padding="16dp"    android:theme="@style/ThemeOverlay.AppCompat.Dark">    <ImageView        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_marginTop="16dp"        android:background="@drawable/head"/>    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_marginTop="16dp"        android:gravity="center"        android:text="Watson"        android:textSize="20sp"/></LinearLayout>

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <group android:checkableBehavior="single">        <item            android:id="@+id/nav_home"            android:icon="@drawable/setting"            android:title="Home"/>        <item            android:id="@+id/nav_messages"            android:icon="@drawable/setting"            android:title="Messages"/>        <item            android:id="@+id/nav_friends"            android:icon="@drawable/setting"            android:title="Friends"/>        <item            android:id="@+id/nav_discussion"            android:icon="@drawable/setting"            android:title="Discussion"/>    </group>    <item android:title="Sub items">        <menu>            <item                android:icon="@drawable/star"                android:title="Sub item 1"/>            <item                android:icon="@drawable/star"                android:title="Sub item 2"/>        </menu>    </item></menu>

默认的颜色很多是从当前的主题中提取的，比如icon的stateColor，当然你也可以通过以下方法或属性修改部分样式：

• setItemBackgroundResource(int)：给menu设置背景资源，对应的属性app:itemBackground
• setItemIconTintList(ColorStateList)：给menu的icon设置颜色，对应的属性app:itemIconTint
• setItemTextColor(ColorStateList)：给menu的item设置字体颜色，对应的属性app:itemTextColor

你可以通过设置一个OnNavigationItemSelectedListener，使用其setNavigationItemSelectedListener()来获得元素被选中的回调事件。它为你提供被点击的 菜单元素 ，让你可以处理选择事件，改变复选框状态，加载新内容，关闭导航菜单，以及其他任何你想做的操作。例如这样：

private void setupDrawerContent(NavigationView navigationView) {        navigationView.setNavigationItemSelectedListener(                new NavigationView.OnNavigationItemSelectedListener() {                    @Override                    public boolean onNavigationItemSelected(MenuItem menuItem) {                        menuItem.setChecked(true);                        mDrawerLayout.closeDrawers();                        return true;                    }                });    }

同时，为了不遮住导航抽屉，我们选择隐藏ActionBar：
隐藏可以通过修改我们继承的主题为：Theme.AppCompat.Light.NoActionBar，当然也可以通过设置以下属性完成：

<item name="windowActionBar">false</item><item name="windowNoTitle">true</item>

我们这里选择前者：

<style name="AppBaseTheme" parent="Theme.AppCompat.Light.NoActionBar">        <!-- customize the color palette -->        <item name="colorPrimary">#673AB7</item>        <item name="colorPrimaryDark">#512DA8</item>        <item name="colorAccent">#FF4081</item></style>

<application     ...     android:theme="@style/AppTheme">     ...</application>

来看看运行效果

效果不错，不过存在一个问题，此时如果你点击Sub items里面的Sub item，发现它一直是选中状态，点击多个Sub item后会出现多个同时选中的情况。那怎么办呢？只能我们来手动切换了：

navigationView.setNavigationItemSelectedListener(                new NavigationView.OnNavigationItemSelectedListener() {                    private MenuItem mPreMenuItem;                    @Override                    public boolean onNavigationItemSelected(MenuItem menuItem) {                        if (mPreMenuItem != null) mPreMenuItem.setChecked(false);                        menuItem.setChecked(true);                        //关闭抽屉侧滑菜单                        mDrawerLayout.closeDrawers();                        mPreMenuItem = menuItem;                        return true;                    }                });

这里我们的导航菜单是通过手势滑动打开的，其实我们也可以通过函数实现：

/**打开抽屉侧滑菜单*/mDrawerLayout.openDrawer(GravityCompat.START);

Toolbar

众所周知，在使用ActionBar的时候，一堆的问题：位置固定在顶部不能改变，文字不能定制，图标的间距不能控制等等，由此暴露出了ActionBar的设计不够灵活。为此官方提供了ToolBar，并且提供了supprot library用于向下兼容。Toolbar之所以灵活，是因为它其实就是一个ViewGroup，我们在使用的时候和普通的组件一样，在布局文件中声明。下面来看看Toolbar的使用。
首先隐藏原本的ActionBar，实现方式见上面NavigationView一节。
接下来就是将Toolbar放入到布局文件：

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

最后可以将Toobar作为“ActionBar”来用，对Toolbar设置Nav Icon、Logo、Title 、Sub Title、Menu Items。
关于字体的样式，可以在布局文件设置属性app:titleTextAppearance、app:subtitleTextAppearance或者代码setTitleTextAppearance、setSubTitleTextAppearance设置。
至于Menu Item，依然支持在menu/menu_main.xml中去声明，然后复写onCreateOptionsMenu和onOptionsItemSelected即可。
也可以通过toolbar.setOnMenuItemClickListener实现点击MenuItem的回调。

toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {            @Override            public boolean onMenuItemClick(MenuItem item) {                if(item.getItemId() == ...) {                /**do something*/                return true;                }                return false;            }        });

Java代码实现：

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);toolbar.setTitle("这里是Title");toolbar.setSubtitle("这里是子标题");toolbar.setLogo(R.drawable.head); toolbar.setNavigationIcon(R.drawable.ic_menu);setSupportActionBar(toolbar);    @Override    public boolean onOptionsItemSelected(MenuItem item) {        /**监听Nav Icon的点击事件*/        if(item.getItemId() == android.R.id.home) {            Toast.makeText(MainActivity.this,"NavigationIcon clicked",Toast.LENGTH_SHORT).show();            return true;        }        return super.onOptionsItemSelected(item);    }

AppBarLayout

AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件，它是为了Material Design设计的App Bar，支持手势滑动操作。默认的AppBarLayout是垂直方向的，它的作用是把AppBarLayout包裹的内容都作为AppBar。
下面演示将Toolbar 和TabLayout的组合部分共同构成 AppBar的效果。

        <android.support.design.widget.AppBarLayout            android:id="@+id/appbar"            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="?android:attr/actionBarSize"                android:background="?attr/colorPrimary" />            <android.support.design.widget.TabLayout                android:id="@+id/tabs"                android:layout_width="match_parent"                android:layout_height="wrap_content"                app:tabBackground="?attr/colorPrimary"                app:tabIndicatorColor="#ffffff00"                app:tabIndicatorHeight="5dp"                app:tabMode="fixed"                app:tabSelectedTextColor="#ffff0000"                app:tabTextColor="#ffffffff" />        </android.support.design.widget.AppBarLayout>

注： AppBarLayout必须作为Toolbar的父布局容器
AppBarLayout是支持手势滑动效果的，不过要和CoordinatorLayout配合使用，接下来学习一下CoordinatorLayout组件怎么使用。

CoordinatorLayout

CoordinatorLayout是这次新添加的一个增强型的FrameLayout。在CoordinatorLayout中，我们可以在FrameLayout的基础上完成很多新的操作。它的作用主要是协调子view之间触摸事件的布局。
首先看一个例子，当你将FloatingActionButton作为一个子View添加进CoordinatorLayout并且将CoordinatorLayout传递给 Snackbar.make()，在3.0及其以上的设备上，Snackbar不会显示在悬浮按钮的上面，而是FloatingActionButton利用CoordinatorLayout提供的回调方法，在Snackbar以动画效果进入的时候自动向上移动让出位置，并且在Snackbar动画地消失的时候回到原来的位置，不需要额外的代码。

<android.support.design.widget.CoordinatorLayout            android:id="@+id/coordinatorLayout"            android:layout_width="match_parent"            android:layout_height="match_parent">              <android.support.design.widget.FloatingActionButton                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:src="@drawable/good"                    android:layout_gravity="center_horizontal"                    app:backgroundTint="#ff0000ff"                    app:elevation="6dp"                    app:fabSize="mini"                    app:pressedTranslationZ="12dp"                    app:rippleColor="#ff00ff00" />        </android.support.design.widget.CoordinatorLayout>

coordinatorLayout = (CoordinatorLayout) findViewById(R.id.coordinatorLayout);...@Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.snackBar:                Snackbar.make(coordinatorLayout, "Snackbar comes out", Snackbar.LENGTH_LONG)                        .setAction("Action", new View.OnClickListener() {                            @Override                            public void onClick(View v) {                                Toast.makeText( MainActivity.this,"Toast comes out",Toast.LENGTH_SHORT).show();                            }                        }).show();                break;            default:                break;        }    }

再来看看官方给出的例子：

<android.support.design.widget.CoordinatorLayout            android:layout_width="match_parent"            android:layout_height="200dp">            <android.support.v7.widget.RecyclerView                android:id="@+id/recyclerView"                android:layout_width="match_parent"                android:layout_height="match_parent"                app:layout_behavior="@string/appbar_scrolling_view_behavior" />            <android.support.design.widget.AppBarLayout                android:id="@+id/appbar"                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="?android:attr/actionBarSize"                    android:background="?attr/colorPrimary"                    app:layout_scrollFlags="scroll|enterAlways"/>                <android.support.design.widget.TabLayout                    android:id="@+id/tabs"                    android:layout_width="match_parent"                    android:layout_height="wrap_content"                    app:tabBackground="?attr/colorPrimary"                    app:tabIndicatorColor="#ffffff00"                    app:tabIndicatorHeight="5dp"                    app:tabMode="fixed"                    app:tabSelectedTextColor="#ffff0000"                    app:tabTextColor="#ffffffff"/>            </android.support.design.widget.AppBarLayout>        </android.support.design.widget.CoordinatorLayout>

从上面布局看到，CoordinatorLayout协调布局中包裹了两个布局，一个是RecyclerView，一个是AppBarLayout，并且：
1、给这个可滚动组件设置了layout_behavior
2、给另一个控件设置了layout_scrollFlags
为滚动的布局设置layout_behavior属性后，这个布局会自动移动到AppBarLayout以下（类似MarginTop）。而且，当设置了layout_behavior的控件滑动时，就会触发设置了layout_scrollFlags的控件发生状态的改变。

layout_behavior：coordinatorlayout可以协调子view之间的触动事件，每一个子view需要有各自的滑动处理方式。该属性就是用来指定处理自己滑动事件的Behavior对象。因此，该属性的值为自定义Behavior子类的全名(即包名+类名)。本例如下：

app:layout_behavior="@string/appbar_scrolling_view_behavior"...<string name="appbar_scrolling_view_behavior" translatable="false">android.support.design.widget.AppBarLayout$ScrollingViewBehavior</string>

layout_scrollFlags有如下几种选项：

• scroll: 所有想滚动出屏幕的view都需要设置这个flag， 没有设置这个flag的view将被固定在屏幕顶部。
• enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。
• enterAlwaysCollapsed：当你的视图已经设置minHeight属性又使用此标志时，你的视图只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。
• exitUntilCollapsed: 向上滚动时收缩View，但可以固定Toolbar一直在上面。

需要注意的是，后面两种模式基本只有在CollapsingToolbarLayout才有用，而前面两种模式基本是需要一起使用的，也就是说，这些flag的使用场景，基本已经固定了。
例如我们前面例子中的，也就是这种模式：

app:layout_scrollFlags="scroll|enterAlways"

我们上面的布局中 给Toolbar设置了app:layout_scrollFlags属性，因此，Toolbar是可以滚动出屏幕，且向下滚动又可以出现。
为了使得Toolbar可以滑动，我们必须还得有个条件，就是CoordinatorLayout布局下包裹一个具有滑动效果的组件，比如 RecyclerView，NestedScrollView(经过测试，ListView，ScrollView不支持)。并且给这些组件设置layout_behavior属性来告诉CoordinatorLayout，该组件是带有滑动行为的组件，然后CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Toolbar可以滑出屏幕了。

注：所有使用scrollFlags的view都必须定义在没有使用scrollFlags的view的前面，这样才能确保所有的view从顶部退出，留下固定的元素。

CollapsingToolbarLayout

CollapsingToolbarLayout作用是提供了一个可以折叠的Toolbar，它继承自FrameLayout，给它设置layout_scrollFlags，它可以控制包含在CollapsingToolbarLayout中的控件(如：ImageView、Toolbar)在响应layout_behavior事件时作出相应的scrollFlags滚动事件(移除屏幕或固定在屏幕顶端)。
使用CollapsingToolbarLayout：

<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="256dp"        android:fitsSystemWindows="true">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collapsing_toolbar_layout"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:contentScrim="#30469b"            app:expandedTitleMarginStart="48dp"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <ImageView                android:layout_width="match_parent"                android:layout_height="match_parent"                android:scaleType="centerCrop"                android:src="@drawable/ic_banner"                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" />        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical"        app:layout_behavior="@string/appbar_scrolling_view_behavior">        <android.support.v7.widget.RecyclerView            android:id="@+id/recyclerView"            android:layout_width="match_parent"            android:layout_height="match_parent"            android:scrollbars="none" />    </LinearLayout></android.support.design.widget.CoordinatorLayout>

我们在CollapsingToolbarLayout中设置了一个ImageView和一个Toolbar。并把这个CollapsingToolbarLayout放到AppBarLayout中作为一个整体。
（1）在CollapsingToolbarLayout中，设置了app:layout_scrollFlags=”scroll|exitUntilCollapsed”。关于layout_scrollFlags的值意义见上面。
其中还设置了一些属性，简要说明一下：
contentScrim – 设置当完全CollapsingToolbarLayout折叠(收缩)后的背景颜色。
expandedTitleMarginStart – 设置扩张时候(还没有收缩时)title向左填充的距离。
（2）在ImageView控件中，我们设置了：
layout_collapseMode (折叠模式) – 有两个值:

• pin - 设置为这个模式时，当CollapsingToolbarLayout完全收缩后，Toolbar还可以保留在屏幕上。
• parallax - 设置为这个模式时，在内容滚动时，CollapsingToolbarLayout中的View（比如ImageView)也可以同时滚动，实现视差滚动效果，通常和layout_collapseParallaxMultiplier(设置视差因子)搭配使用。

layout_collapseParallaxMultiplier(视差因子) - 设置视差滚动因子，值为：0~1。
（3）在Toolbar控件中，我们设置了layout_collapseMode(折叠模式)：为pin。
综上分析：当设置了layout_behavior的控件响应起了CollapsingToolbarLayout中的layout_scrollFlags事件时，ImageView会有视差效果的向上滚动移除屏幕，当开始折叠时CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就会变为我们设置好的背景色，Toolbar也一直会固定在最顶端。
效果如图：

Java代码：

        mToolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(mToolbar);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                onBackPressed();            }        });        /**使用CollapsingToolbarLayout必须把title设置到CollapsingToolbarLayout上，设置到Toolbar上则不会显示*/        mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);        mCollapsingToolbarLayout.setTitle("CollapsingToolbarLayout");        //通过CollapsingToolbarLayout修改字体颜色        mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//设置还没收缩时状态下字体颜色        mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.GREEN);//设置收缩后Toolbar上字体的颜色

注：使用CollapsingToolbarLayout时必须把title设置到CollapsingToolbarLayout上，设置到Toolbar上不会显示。

Demo下载地址