老婆保佑，代码无BUG

前言

这是MD 系列的最后一篇文章，文末，会将代码上传，有兴趣的小伙伴可以一起参考

目录

• 1. 与FloatingActionButton联动
• 2. 与AppBarLayout
  • layout_scrollFlags属性讲解
• 3. CollapsingToolbarLayout
  • NestedScrollView

效果

1. 与FloatingActionButton联动

在之前的FloatingActionButton一文中，有详细介绍Andorid - Material Design之FloatingActionButton

2. 与AppBarLayout

(图1 )一旦向上滚动这个view就可见

<?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:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/addTool_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:theme="@style/ThemeOverlay.AppCompat.Dark" />

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

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

说明

 app:layout_behavior="@string/appbar_scrolling_view_behavior"

当加上这个behavior时候，RecyclerView的任意滚动事件都将触发AppBarLayout或者AppBarLayout里面view的改变

app:layout_scrollFlags="scroll|enterAlways"

首先必须要有scroll,这样其他属性才有作用，然后就对所有的属性做个说明

（1）enterAlwaysCollapsed

(图2)

    <android.support.v7.widget.Toolbar
            android:id="@+id/addTool_toolbar"
            android:layout_width="match_parent"
            android:minHeight="15dp"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:theme="@style/ThemeOverlay.AppCompat.Dark" />

排版问题，这里只放上 不同的地方，其他和上面一样，这里需要注意的地方，看GIF中，我下拉的时候，会有一个最小高度，等最小高度出来，我需要再次下拉一下，然后在会继续出来

下拉--> 显示最小高度-->下拉-->显示全部toolbar

（2）exitUntilCollapsed

图3

        <android.support.v7.widget.Toolbar
            android:id="@+id/addTool_toolbar"
            android:layout_width="match_parent"
            android:minHeight="15dp"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:theme="@style/ThemeOverlay.AppCompat.Dark" />

当下拉到我们设定的最小高度的时候，会将最小高度消失，直接消失全部的toolbar,这里会有一个最小高度一直在，注意了，还有就是scroll，必须放在所有的属性前面

下拉--> 当达到最小高度-->显示全部toolbar

3. CollapsingToolbarLayout

Untitled4.gif

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


        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/colorAccent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <ImageView
                android:layout_width="match_parent"
                android:layout_height="150dp"
                android:scaleType="fitXY"
                android:src="@mipmap/ic_launcher"
                app:layout_collapseMode="parallax" />

            <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>

    <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/tvScroll"/>
    </android.support.v4.widget.NestedScrollView>

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

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

说明

imgView的这个属性必须加上

 app:layout_collapseMode="parallax"

看GIF图中，当我恢复到toolbar高度的时候，是不是粉红色，就是这个属性

   app:contentScrim="@color/colorAccent" //粉红色

3. NestedScrollView

就把他理解成ScrollView ，这是专门为了给Meterial Design用的，为了兼容其他的控件

源码地址

点击进入GitHub

最后

全部系列

Andorid - Material Design之Snackbar

Andorid - Material Design之TextInputLayout

Andorid - Material Design之FloatingActionButton

Andorid - Material Design之TabLayout

Andorid - Material Design之NavigationView和DrawerLayout

Andorid - Material Design之CoordinatorLayout