Android Disign Support Library

最新推荐文章于 2021-05-25 17:49:02 发布

cao_fang_zi

最新推荐文章于 2021-05-25 17:49:02 发布

阅读量534

点赞数

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

参考的博客地址
http://www.cnblogs.com/likeandroid/p/4541863.html
http://www.jcodecraeer.com/a/anzhuokaifa/developer/2015/0531/2958.html?mType=Group
http://blog.csdn.net/moyuxueyi/article/details/51028303
http://blog.csdn.net/zly921112/article/details/51318851
一。介绍
这个兼容库很容易和之前的 Android Support Library 22.1混淆，都是兼容库，区别是这个库多了个Design。 Android Support Library 22.1只是支持了一些基本控件的材料设计化，但是这个库更多的是对一些特效的实现，这个库和github上的很多开源项目是有很大关系的，material design的很多效果，同一种效果在github上有太多的实现，现在官方把部分效果标准化了。
安卓5.0是是有有史以来最重要的安卓版本之一，这其中有很大部分要归功于material design的引入，这种新的设计语言让整个安卓的用户体验焕然一新。我们的详细专题是帮助你开始采用material design的好去处。但是我们也知道，这种设计对于开发者，尤其是那些在意向后兼容的开发者来说是一种挑战。

在Android Design Support Library的帮助下，我们为所有的开发者，所有2.1以上的设备，带来了一些重要的material design控件。你可以在这里面找到n**avigation drawer view，输入控件的悬浮标签，悬浮操作按钮，snackbar，选项卡以及将这些控件结合在一起的手势滚动框架。**

在这个 Lib 中主要包含了 8 个新的 material design 组件！最低支持 Android 2.1 。这些组件在我看来就是对 Github中最近比较火的 android 组件进行了封装！！几乎所有的特效在github上面都能够可找到解决方案

2.添加方式：可以直接在安卓的支持依赖中添加，
app—->open module –>d—>

二.各个控件的介绍
1.TexgtInputLayout(文本输入布局)
以前当我们使用 EditText 这个组件的 hint 属性的时候，当用户输入第一个字母之后，这个 hint 中的文本就会消失！有点影响用户体验！但是现在不一样了！现在只要把 EditText 包含在 TextInputLayout 中，这个 hint 中的文本就会变成 floating lable 浮动在 EditText 上方！
同时，也支持在 EditText 下方显示错误信息好了，我么先来看一下 TextInputLayout 这个控件的公共方法吧！

getEditText() 得到控件中包含的 EditText 控件(得到控件以后就可以通过EditText的getText方法获取文本内容了，就可以对是文本内容进行操作了，在这里值得注意的是如果EditText没有任何输入时候，通过getText()是不会返回null，他会返回一个空的字符串，所以不能够用==null来判断，一般通过textUtil.isEmpty或者equles来判断)
setError(CharSequence error) 设置错误信息并显示在 EditText 下方应用场景：比如用户输错了密码或者用户名等
setErrorEnabled(boolean enabled) 设置 setError(CharSequence error) 这个函数是否可用记住哦：这个函数一定要在 setError(CharSequence error) 这个函数之后执行哦！具体原因大家可以去看源码哦！
setHint(CharSequence hint) 设置提示信息–这个提示在输入的时候会悬浮到控件控件的上方，一直到输入完成的时候不会消失
<android.support.design.widget.TextInputLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:id="@+id/textinput"> <EditText android:layout_marginTop="4dp" android:layout_width="match_parent" android:layout_height="48dp"/> <EditText android:layout_marginTop="4dp" android:layout_width="match_parent" android:layout_height="48dp"/> </android.support.design.widget.TextInputLayout>
接着就是代码

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    textinput = (TextInputLayout) findViewById(R.id.textinput);
    et_content = textinput.getEditText();
    textinput.setHint("请输入用户名");
    textinput.setError("密码输入错啦！");
    textinput.setErrorEnabled(true);//当设置成false的时候 错误信息不显示 反之显示
}

效果图

2.悬浮操作按钮 Floating Action Button

floatingactionbutton 是一个负责显示界面基本操作的圆形按钮。Design library中的FloatingActionButton 实现了一个默认颜色为主题中colorAccent（这是指在工程values–>color.xml–>colorAccent选项指示的颜色是一直的，这个演示一般是控制布局中一些控件的内容的颜色这里写图片描述）的悬浮操作按钮。 —这个控件可以用来做圆形的头像

xml参数含义备注
app:backgroundTint FAB的背景颜色
app:rippleColor FAB点击时的背景颜色
app:elevation 默认状态下FAB的阴影大小默认为6dp
app:pressedTranslationZ 点击时候FAB的阴影大小默认为12dp
app:fabSize 设置FAB的大小该属性有两个值，分别为normal和mini，对应的FAB大小分别为56dp和40dp。
src 设置FAB的图标 Google建议符合Design设计的该图标大小为24dp
app:layout_anchor 设置FAB的锚点即以哪个控件为参照物设置位置
app:layout_anchorGravity 设置FAB相对锚点的位置有 bottom、center、right、left、top等

<android.support.design.widget.FloatingActionButton
    android:id="@+id/button"
    android:layout_width="48dp"
    android:layout_gravity="right"
    android:layout_height="48dp"
    android:orientation="vertical" />
`代码中的设置

button.setRippleColor(Color.GRAY);//设置按下去的波纹颜色
button.setBackgroundDrawable(getResources().getDrawable(android.R.drawable.ic_menu_add));//背景色

**3.Snackbar**

为一个操作提供轻量级的，快速的反馈是使用snackbar的最好时机。snackbar显示在屏幕的底部，包含了文字信息与一个可选的操作按钮。在指定时间结束之后自动消失。另外，用户还可以在超时之前将它滑动删除。
 ![这里写图片描述](http://www.jcodecraeer.com/uploads/20150530/1432996779507731.gif)

接下来介绍一些SnackBar的方法
 - dismiss() 用来消失 Snackbar 的
 - getDuration() 得到显示时长的
 - make(View view, int resId, int duration) 创建 Snackbar 的
 - make(View view, CharSequence text, int duration) 和上面一样（ Snackbar snackbar = Snackbar.make(view, "This is a SnackBar", Snackbar.LENGTH_SHORT);）
 - setAction(int resId, View.OnClickListener listener) 对 Snackbar 设置单击事件，这里的单击事件不是作用于整个 Snackbar 的，还是作用于你所设置的这个字段的，也就是这个 resId（snackbar.setAction("广告", new View.OnClickListener()）
 - setAction(CharSequence text, View.OnClickListener listener) 和上面一样
 - setActionTextColor(ColorStateList colors) 设置动作字的颜色，就是对上面的setAction 中CharSequence text,文字颜色的设置
 - setActionTextColor(int color) 和上面一样
 - setDuration(int duration) 设置 Snackbar 显示时常
 - setText(int resId) 更新 Snackbar 中的文本
    setText(CharSequence message) 和上面一样
 - show() 显示 Snackbar
![这里写图片描述](http://ww2.sinaimg.cn/large/a174c633gw1esmu9ljskrg20f00qo0xw.gif)

snackBar与toast不同的是，前者是通过addview的方式把需要显示的布局添加到父布局的底部的，所以我们在创建的时候是 需要给他明确父布局的。只有当父布局是coordinatorLayout才会出项将父布局带动一起向上推动。toast是通过悬浮的方式出现在布局中的,Snackbar使用的时候需要一个控件容器用来容纳Snackbar.官方推荐使用CoordinatorLayout,因为使用这个控件，可以保证Snackbar可以让用户通过向右滑动退出。并且Snackbar不会遮挡FAB的显示了，当Snackbar出现时FAB会自动上移。 
所以我们可以给action自定义布局

//获得snackBar的布局文件的view对象
View snackbarView = snackbar.getView();
//查找view中的控件（一定注意这两个控件的id是固定的，是在系统中定义好的，只有通过这两个id才能够找到这两个控件）
TextView snackbar_text = (TextView)snackbarView.findViewById(android.support.design.R.id.snackbar_text);
Button snackbar_action =(Button)snackbarView.findViewById(android.support.design.R.id.snackbar_action);
//设置的背景色
snackbarView.setBackgroundColor(Color.GRAY);
//设置的文本颜色
snackbar_text.setTextColor(Color.YELLOW);
//文本点击事件
snackbar_text.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(SnackActivity.this, “点的是王宝强”, Toast.LENGTH_SHORT).show();
}
});

4.Tablayout(选项卡布局)
 过选项卡的方式切换view并不是material design中才有的新概念。它们和顶层导航模式或者组织app中不同分组内容（比如，不同风格的音乐）是同一个概念。（可以用来实现网易新闻布局）但是如果你使用ViewPager在tab之间横向切换，你可以直接从 PagerAdapter 的 getPageTitle() 中创建选项卡，然后使用setupWithViewPager()将两者联系在一起。它可以使tab的选中事件能更新ViewPager,同时ViewPager
的页面改变能更新tab的选中状态。

接下来就介绍TabLayouat的方法

 - 列表内容
 - addTab(TabLayout.Tab tab, int position, boolean setSelected) 增加选项卡到 layout 中（int position添加到指定的位置）
     addTab(TabLayout.Tab tab, boolean setSelected) 同上
    addTab(TabLayout.Tab tab) 同上
 - getTabAt(int index) 得到指定位置上的选项卡
 - getTabCount() 得到选项卡的总个数
 - getTabGravity() 得到 tab 的 Gravity
 - setTabMode(int mode) 设置 Mode
 - getTabMode() 得到 tab 的模式 --这里解释下setTabMode(int mode)方法,直接看效果就明白了
tabLayout.setTabMode(TabLayout.MODE_FIXED); ![这里写图片描述](https://img-blog.csdn.net/20160508212040734)TabLayout.MODE_FIXED->tablayout直接显示出所有title

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); 
![这里写图片描述](https://img-blog.csdn.net/20160508212210797)
TabLayout.MODE_SCROLLABLE->tablayout在当前屏幕下能显示多少就显示多少title显示不下的可以滑动tablayout查看
 - getTabTextColors() 得到 tab 中文本的颜色
 - newTab() 新建个 tab
 - removeAllTabs() 移除所有的 tab
 - removeTab(TabLayout.Tab tab) 移除指定的 tab
 - removeTabAt(int position) 移除指定位置的 tab
 - setOnTabSelectedListener(TabLayout.OnTabSelectedListener onTabSelectedListener) 为每个 tab 增加选择监听器
 - setScrollPosition(int position, float positionOffset, boolean updateSelectedText) 设置滚动位置
 - setTabGravity(int gravity) 设置 Gravity
 - setTabTextColors(ColorStateList textColor) 设置 tab 中文本的颜色
setTabTextColors(int normalColor, int selectedColor) 设置 tab 中文本的颜色 默认 选中
 - setTabsFromPagerAdapter(PagerAdapter adapter) 设置 PagerAdapter
 - setupWithViewPager(ViewPager viewPager) 和 ViewPager 联动

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab);
tvs = new ArrayList();
for (int i = 0; i < items.length; i++) {
TextView tv = new TextView(this);
tv.setText(items[i]);
LinearLayout.LayoutParams lp =
new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
tv.setTextColor(Color.BLACK);
tv.setBackgroundColor(Color.WHITE);
tv.setGravity(Gravity.CENTER);
tv.setLayoutParams(lp);
tv.setTextSize(22);
tvs.add(tv);
}
tabLayout = (TabLayout) findViewById(R.id.tablayout);
tabLayout.setTabTextColors(Color.WHITE, Color.GRAY);//设置文本在选中和为选中时候的颜色
vp = (ViewPager) findViewById(R.id.vp);
adapter = new Adapter();
vp.setAdapter(adapter);

//用来设置tab的，同时也要覆写  PagerAdapter 的 CharSequence getPageTitle(int position) 方法，要不然 Tab 没有 title
tabLayout.setupWithViewPager(vp);
//关联 TabLayout viewpager
tabLayout.setTabsFromPagerAdapter(adapter);

}

![这里写图片描述](http://ww4.sinaimg.cn/large/a174c633gw1esnce76tywg20f00qoagz.gif)

同时我们也可以给Tablayout设置不同的布局

public class TabLayoutActivity extends AppCompatActivity {

private String [] mTitles={"最新","最热","最大","最小","最叼","最扯"};
private int [] mTitleIcons={R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher};
private ArrayList<View> views =new ArrayList<>();
public TabLayout mTabLayout;
public ViewPager mViewPager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_tab_layout);
    mTabLayout = (TabLayout) findViewById(R.id.tab_layout);
    mTabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);  //滚动模式

// userPager();

    //直接写
    initTab();

}

private void userPager(){
    mViewPager = (ViewPager) findViewById(R.id.pager);

// mTabLayout.setTabMode(TabLayout.MODE_FIXED); //固定模式
for (int i = 0; i < mTitles.length; i++) {
View view = LayoutInflater.from(this).inflate(R.layout.tab_item_view, null);
views.add(view);
}
mViewPager.setAdapter(new PagerAdapter() {
@Override
public int getCount() {
return views.size();
}

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(views.get(position));
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = views.get(position);
            container.addView(views.get(position));
            return view;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTitles[position];
        }
    });

    //TabLayout 关联ViewPager
    mTabLayout.setupWithViewPager(mViewPager);

    //添加icon
    TabLayout.Tab tabAt = mTabLayout.getTabAt(0);
    tabAt.setIcon(R.mipmap.ic_launcher);
}

private void initTab(){
    //设置选中颜色 和 默认颜色
    mTabLayout.setTabTextColors(getResources().getColor(R.color.colorPrimary),getResources().getColor(R.color.colorAccent));
    //设置Tab
    for (int i = 0; i < mTitles.length; i++) {
        //链式编程 为tab设置文本与图像
        TabLayout.Tab tab = mTabLayout.newTab().setText(mTitles[i]).setIcon(mTitleIcons[i]);
        //获得自定义的布局
        View customView = LayoutInflater.from(this).inflate(R.layout.tab_item_view, null);
        //为选项卡设置自定义的布局
        tab.setCustomView(customView);
        //将选项卡添加到布局中
        mTabLayout.addTab(tab);
    }
    //设置指示器的偏移方向，TableLayout.SCROLL_INDICATOR_TOP代表指示器向上移动一定的值
    mTabLayout.offsetTopAndBottom(TableLayout.SCROLL_INDICATOR_TOP);
    //为tab设置选中监听器
    mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() 
        //选中
        @Override
        public void onTabSelected(TabLayout.Tab tab) {
            TextView text = (TextView) tab.getCustomView().findViewById(android.R.id.text1);
            text.setTextColor(Color.RED);
        }
        //解除选中
        @Override
        public void onTabUnselected(TabLayout.Tab tab) {
            TextView text = (TextView) tab.getCustomView().findViewById(android.R.id.text1);
            text.setTextColor(Color.BLACK);
        }
        //再次选中
        @Override
        public void onTabReselected(TabLayout.Tab tab) {
            TextView text = (TextView) tab.getCustomView().findViewById(android.R.id.text1);
            text.setTextColor(Color.RED);
        }
    });
    //选中某一个Tab
    mTabLayout.getTabAt(0).select();

}

}

**4.Navigation View**
    大家都记得 DrawerLayout 这个控件吧！它是 android 用来体态 SlideMenu 的一个组件！在这个控件中我们通常需要一个 menu（也是个布局文件）和一个主体布局文件。现在这个 Navigation View 就是用来写 menu的！
    抽屉导航是app识别度与内部导航的关键，保持这里设计上的一致性对app的可用性至关重要，尤其是对于第一次使用的用户。 NavigationView 通过提供抽屉导航所需的框架让实现更简单，同时它还能够直接通过菜单资源文件直接生成导航元素。
    步骤1，首先创建一个DrawerLayout的布局文件，
    步骤2/创建主视图，可以是任意的布局，这是完全由我们的需求决定的。
    步骤3/创建我们的navagation布局
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:fitsSystemWindows="true"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context="qianfeng.week8_day03.NavigationViewActivity">
<!-----这是我们的主要界面-->
    <RelativeLayout
        android:background="#ff8000"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
<!--这是侧拉界面-->
    <android.support.design.widget.NavigationView
        android:fitsSystemWindows="true"
        <!--适应整个窗口（这个属性是所有的view都具有的，主要是在做沉进式布局时候需要的一个属性，就是将状态栏背景变透明,利用MD风格需要使用Material Design的Theme ）-->
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        <!--确定侧拉位置-->
        android:layout_gravity="start"
         <!--绑定侧拉布局的头部布局文件-->
        app:headerLayout="@layout/nav_head"
        <!--绑定菜单-->
        app:menu="@menu/nav_menu/>
</android.support.v4.widget.DrawerLayout>
<!--在这之前我们需要创建menu的xml文件values--创建一个名为menu的文件夹--nav_menu-->
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <group android:checkableBehavior="single">
        <item
            android:checked="true"
            android:title="姑娘"
            android:id="@+id/girl"
            android:icon="@drawable/ic_face_black_24dp"/>
        <item
            android:title="飞机"
            android:id="@+id/plane"
            android:icon="@drawable/ic_flight_takeoff_black_24dp"
        <item
            android:id="@+id/user"
            android:title="用户"
            android:icon="@drawable/ic_perm_contact_calendar_black_24dp"/>
        <item
            android:id="@+id/die"
            android:title="作死"
            android:icon="@drawable/ic_rowing_black_24dp"/>
    </group>
    <item android:title="Other">
        <menu>
            <item
                android:id="@+id/die_2"
                android:title="一起死"
                android:icon="@drawable/ic_rowing_black_24dp"/>
            <item
                android:id="@+id/die_3"
                android:title="All die"
                android:icon="@drawable/ic_rowing_black_24dp"/>
        </menu>
    </item>
</menu>

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

这里最重要的属性
1.app:headerLayout: 给NavigationView添加头部布局
2.app：menu：给NavigationView添加menu菜单布局

navigationView.setNavigationItemSelectedListener(new MyNavigationListener());

private class MyNavigationListener implements NavigationView.OnNavigationItemSelectedListener {

        @Override
        public boolean onNavigationItemSelected(MenuItem item) {
            drawerLayout.closeDrawer(GravityCompat.START);
            switch (item.getItemId()) {
                case R.id.nav_blog:
                    break;
                case R.id.nav_about:
                    break;
                case R.id.nav_version:
                    break;
                case R.id.nav_sub1:
                    break;
                case R.id.nav_sub2:
                    break;
            }
            return true;
        }
    }

这里写图片描述
正如actionbar一样NavigationView用起来是非常方便但是这个控件也有很多弊病,尤其是在文字图标自定义方面,如果你有这个需求那么侧滑布局用listview或者framelayout+fragment实现更好

5.CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+RecyclerView+CardView**

AppBarLayout：AppBarLayout 是继承LinerLayout实现的一个ViewGroup容器组件，它是为了Material Design设计的App Bar，支持手势滑动操作。它的作用是把AppBarLayout包裹的内容都作为AppBar 。只有放置在appbarlayout中的控件才能够被滚动，实现退出屏幕，折叠等效果使用AppBarLayout可以让你的Toolbar与其他view（比如TabLayout的选项卡）能响应被标记了ScrollingViewBehavior的View的滚动事件。
**CoordinatorLayout
CoordinatorLayout**是一个增强型的FrameLayout。它的作用有两个
1.作为一个布局的根布局
2**.作为各个子类协调手势操作的一个协调布局（从它的名字就可以看出来）**
布局代码

<android.support.v4.widget.DrawerLayout 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:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.byzk.www.test.MainActivity">

    <!-- 主布局，想实现这样的效果涉及布局的父布局必须是CoordinatorLayout，5.0xin增加的很多效果都需要由这个作为父亲布局，可以把它当作是竖向的LinearLayout-->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="180dp">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="120dp"
                android:background="@drawable/bg"
                app:layout_scrollFlags="scroll|enterAlways"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"                android:background="?attr/colorPrimary"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
        </android.support.design.widget.AppBarLayout>
<!--@string/appbar_scrolling_view_behavior"这个属性是必须有的，只有添加了这个属性才能够是先协调滑动效果-->
        <android.support.v7.widget.RecyclerView
            android:id="@+id/rv"
            android:layout_width="match_parent"
            android:layout_height="match_parent     app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  </android.support.design.widget.CoordinatorLayout>
    <!-- 侧边菜单-->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/menu_drawer" />
</android.support.v4.widget.DrawerLayout>

这里写图片描述
1.通过app:layout_scrollFlags=”scroll|enterAlways” 属性来确定哪个组件是可滑动的并且如何滑动
layout_scrollFlags有如下几种选项：
•scroll: 所有想滚动出屏幕的view都需要设置这个flag
•snap：根据显示的百分比判断是否全部显示或是影厂当前布局，实现弹性效果
•enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，启用快速“返回模式”。
•enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时，你的视图只能已最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度。(还没研究明白)
•exitUntilCollapsed: 只有滑动到最顶端在向下滚动会导致该view变为可见

我们上面的布局中给ImageView设置了app:layout_scrollFlags属性，因此，ImageView是可以滚动出屏幕，且向下滚动就可以出现。

2.我们必须还得有个条件，就是CoordinatorLayout布局下包裹一个可以滑动的布局，比如 RecyclerView，NestedScrollView(经过测试，ListView，ScrollView不支持)具有滑动效果的组件。并且给这些组件设置如下属性来告诉CoordinatorLayout，该组件是带有滑动行为的组件，然后CoordinatorLayout在接受到滑动时会通知AppBarLayout 中可滑动的Imageview可以滑出屏幕了。
app:layout_behavior=”@string/appbar_scrolling_view_behavior”
总结一下：
a.要使用CoordinatorLayout作为父布局
b.相应滑动事件的控件需要添加 app:layout_scrollFlags=”scroll|enterAlways”属性。
c.包裹的滑动控件需要添加app:layout_behavior=”@string/appbar_scrolling_view_behavior”属性

CollapsingToolbarLayout
如果想制造toolbar的折叠效果，我们必须把Toolbar放在CollapsingToolbarLayout中，它一般作为AppBarLayout的子布局：
布局代码如下


<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.byzk.www.test.MainActivity">

    <!-- 实现折叠的toorbar必须要CoordinatorLayout作为父布局-->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!-- 实现折叠的toorbar与协调滚动的控件必须包裹在AppBarLayout-->
        <!-- 实现折叠的toorbart,那么CollapsingToolbarLayout的高度必须是固定的-->
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="180dp"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
         <!-- 需要折叠的内容必须在CollapsingToolbarLayout中
                "?attr/用来应用当前主题的指定属性
                 app:contentScrim="?attr/colorPrimary"这是用来指示当折叠去折叠以后显示的颜色
         -->
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsingToolBarLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/bg"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.6" />
                    <!--android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="pin"给toolbar设置为固定模式，这样就不会被划出窗口
                    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"为当前单独指定主题-->
                <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/ThemeOverlay.AppCompat.Light" />
            </android.support.design.widget.CollapsingToolbarLayout>
        </android.support.design.widget.AppBarLayout>

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

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

    <!-- 侧边菜单-->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/menu_drawer" />


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

CollapsingToolbarLayout 提供以下属性和方法是用：
1.Collapsing title：ToolBar的标题，当CollapsingToolbarLayout全屏没有折叠时，title显示的是大字体，在折叠的过程中，title不断变小到一定大小的效果。你可以调用setTitle(CharSequence)方法设置title。通常，我们我们都是设置Toolbar的title，而现在，我们需要把title设置在CollapsingToolBarLayout上，而不是Toolbar。

2.Content scrim：ToolBar被折叠到顶部固定时候的背景，你可以调用setContentScrim(Drawable)方法改变背景或者在属性中使用 app:contentScrim=”?attr/colorPrimary”来改变背景,这里需要注意toolbar不能有背景不然toolbar背景会始终显示在顶部.

3.Parallax scrolling children：CollapsingToolbarLayout滑动时，子视图的视觉差，可以通过属性app:layout_collapseParallaxMultiplier=”0.6”改变。(感觉没啥用)

4.CollapseMode ：子视图的折叠模式，有两种“pin”：固定模式，在折叠的时候最后固定在顶端；“parallax”：视差模式，在折叠的时候会有个视差折叠的效果。我们可以在布局中使用属性app:layout_collapseMode=”parallax”来改变。

经过我个人的测试ImageView只能放在ToolBar的上面才会有效果,还不明白为啥
CollapsingToolbarLayout主要是提供一个可折叠的Toolbar容器，对容器中的不同View设置layout_collapseMode折叠模式，来达到不同的折叠效果。

效果
这里写图片描述