Android 高级进阶（二十）AppBar与CoordinatorLayout 组合出各式各样的效果

    如果无法成为大鲨鱼，就当一枚小虾吧，时而激起小浪花。无法成为太阳，就做星辰吧。

    有些人永远不会有自信，因为他曾经有过这样的感觉：”我还不如一个幼儿园学生“。也有些人永远都会盲目自信，因为他一直都是佼佼者，没有碰过壁，还不曾有敬畏之心，时常会有这样的幻觉：”我与天同高（齐天大圣）“。我们只有结合自身的综合情况客观的评价自己，注意是”综合情况“，不只是局限于你的工作能力、吹牛能力，还有你的身心健康（没有了健康自信全是0）  找到自己，做自己，你在这个世界上是独一无二的。

            如果无法成为灌木，就当摇曳的小草吧，让道路因你的存在而更加美妙。

            无法成为大道，就做小径；

            无法成为太阳，就做星辰。

            不可能人人都是船长，水手也有水手的精彩。

           如果无法成为大鲨鱼，就当一枚小虾吧。

           快过年了，祝大家身体健康，万事如意。

  

      我们Android中常见的是ActionBar与Toolbar，今天我们来一起研究一下AppBar。以Coorderration为根布局，当AppBar包裹Toolbar，同时设置一些属性就可以实现 我们平时需要大量代码来实现的效果。今天我们来3个效果：

1. 监听Recyclerview的滑动来让Toolbar显示和隐藏。

关于这个效果我们上一节已经用Coorderration和Behavior已经实现了，还写了些Toolbar显示和隐藏相关的代码。这次我们不用编写代码，利用AppBar包裹Toolbar，然后设置一些AppBar的属性就可以实现这个效果。

2. 监听android.support.v4.widget.NestedScrollView的滑动来让Toolbar显示和隐藏。

这里与1的区别是监控NestedScrollView（Scrollview的升级版）的滑动。相同之处还是设置Appbar的一些属性，1分钟搞定这个效果。

3. 监听viewpager的滑动滑动来让Toolbar显示和隐藏。

 相同之处还是设置Appbar的一些属性，1分钟搞定这个效果。

我们接下来按上面的顺序来分析和实现每一个效果。

1、监听Recyclerview的滑动来让Toolbar显示和隐藏

1.1 原理：

（1） CoordinatorLayout为根布局来监控它的内部所有控件的滑动事件，这里监控的是Recyclerview列表的滑动事件然后纷发给名称为“appbar_scrolling_view_behavio。

（2）这个名称为“appbar_scrolling_view_behavio的Behavior是配置给Recyclerview的。（LisTview不行）

（3） AppBar设置的属性app:layout_scrollFlags="scroll|enterAlways"

（4）.appbar_scrolling_view_behavio会自动检查AppBar内部Toolbar设置的属性app:layout_scrollFlags，根据这个属性控制Toolbar的隐藏与显示。此app:layout_scrollFlags="scroll|enterAlways"表示当上滑列表时Toolbar会随着滚动出屏幕顶端，当下滑时又会重新进入屏幕并固定在顶端。

1.2 代码实现

我们从1.1原理中 可以看出我们只需要在布局文件里为RecyclerView与Appbar内部的Toolbar配置一些属性即可。不需要为这个滑动效果编写额外的代码。

（1）布局文件main.xml：

<android.support.design.widget.CoordinatorLayout 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"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v7.widget.RecyclerView
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        android:clipChildren="false"
        android:paddingTop="?attr/actionBarSize"
        />

 <android.support.design.widget.AppBarLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        app:layout_scrollFlags="scroll|enterAlways"
        android:elevation="4dp"
        app:titleTextColor="@color/color_white"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"/>
 </android.support.design.widget.AppBarLayout>

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

       如上面布局文件CoordinatorLayout作为根目录可以捕捉Recyclerview的滑动事件，然后交给这个类名为@string/appbar_scrolling_view_behavior的Behavior，然后Behavior根据toolbar的 app:layout_scrollFlags="scroll|enterAlways"属性来处理toolbar，实现上滑列表Toolbar跟着滑出屏幕顶端，下滑列表时Toolbar又回显出来。注意这里的列表指的是Recyclerview，不是Listview。Listview的滑动事件不会分发给这个appbar_scrolling_view_behavior，从而控制不了Appbar内部的Toolbar效果。

（2）MainActivity.java

这里主要是实现一个简单的RecyclerView列表，能滑动就行。

package com.example.administrator.appbarrecyclerview;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;
import android.widget.ImageButton;
import com.example.administrator.appbarrecyclerview.adapter.RecyclerAdapter;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    RecyclerView recyclerview;
    Toolbar toolbar;
    ImageButton fab;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recyclerview = (RecyclerView) findViewById(R.id.recyclerview);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        setTitle("滑动隐藏");

        recyclerview.setLayoutManager(new LinearLayoutManager(this));
        List<String> list = new ArrayList<>();
        for (int i = 0; i < 50; i++) {
            list.add("条目" + i);
        }
        RecyclerView.Adapter adapter = new RecyclerAdapter(list);
        recyclerview.setAdapter(adapter);
    }
}

MainActivity.java代码里主要实现了一个可以滑动的Recyclerview。Demo源码下载在文章最后。

2. 监听android.support.v4.widget.NestedScrollView的滑动来让Toolbar显示和隐藏。

这次与1中的实现原理差不多，只是把可滑动的控件换成了NestedScrollView而已.    NestedScrollView

是一个Scrollview的升级版，同样只有 它的事件才能被纷发给bappbar_scrolling_view_behavior，从而控制不了Appbar内部的Toolbar效果,而Scrollview是不行的。

2.1 布局文件

<?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.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:elevation="4dp"
            app:layout_scrollFlags="scroll|enterAlways"
            app:titleTextColor="@color/white" />
    </android.support.design.widget.AppBarLayout>

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

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:text="滑动NestedScrollview隐藏或显示Toolbar!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:text="滑动NestedScrollview隐藏或显示Toolbar!!"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

如上面布局文件CoordinatorLayout作为根目录可以捕捉NestedScrollView的滑动事件，然后交给这个类名为@string/appbar_scrolling_view_behavior的Behavior，然后Behavior根据toolbar的 app:layout_scrollFlags="scroll|enterAlways"属性来处理toolbar，实现上滑列表Toolbar跟着滑出屏幕顶端，下滑列表时Toolbar又回显出来。其实和1中Recyclerview滑动是一样的，只是这里滑动控件被替换为NestedScrollView而已。

2.2 MainActivity.java代码

package com.example.administrator.nestedscrollviewtoolbar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {
    Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        setTitle("滑动隐藏");
    }
}

这里没有什么，只是显示了一个toolbar. 也就是说滑动隐藏或显示toolbar的效果其实都是在布局文件里通过配置属性而实现的。

该Demo源码下载地址同样在文章最后。

3. 监听viewpager的滑动滑动来让Toolbar显示和隐藏。

这个原理还是一样的，只是viewpager里的每一个页面布局定义成一个可滑动的NestedScrollView。同样配置Appbar内部Toolbar的一些属性可以实现垂直滑动Viewpager内容时显示或隐藏Toolbar，而且还可以隐藏TabLayout等。我们先对比一下原来的效果与现在要实现的效果：

                       

 

这里只在 《高级进阶十六》的源码基础上修改了布局，我们在此主要看一下布局

3.1  main.xml布局

<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:orientation="vertical">
<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:titleTextColor="@color/white"
        app:layout_scrollFlags="scroll|enterAlways"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:background="@color/white"
        app:tabMode="scrollable"
        android:id="@+id/tablayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabTextColor="@color/colorPrimary"
        app:tabSelectedTextColor="@color/colorPrimaryDark"
        app:tabGravity="fill"
        />
</android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        />

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

这里正如我们所说，仍旧是在AppBarLayout里的Toolbar设置属性scrollFlags = "scroll|enterAlways".然后我们要让ViewPager里的页面内容可以垂直滑动起来。

3.2 ViewPager每一页fragment的布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

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

        <TextView
            android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
            android:layout_width="match_parent"
            android:layout_height="200dp" />

        <TextView
            android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
            android:layout_width="match_parent"
            android:layout_height="200dp" />

        <TextView
            android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
            android:layout_width="match_parent"
            android:layout_height="200dp" />


        <TextView
            android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
            android:layout_width="match_parent"
            android:layout_height="200dp" />

        <TextView
            android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
            android:layout_width="match_parent"
            android:layout_height="200dp" />
        <TextView
            android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
            android:layout_width="match_parent"
            android:layout_height="200dp" />
        <TextView
            android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
            android:layout_width="match_parent"
            android:layout_height="200dp" />
        <TextView
            android:text="垂直滑动ViewPager页面里的内容让Toolbar隐藏或显示"
            android:layout_width="match_parent"
            android:layout_height="200dp" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

</android.support.constraint.ConstraintLayout>

这里我们声明了一个滚动布局NestedScrollView，在里面添加足够多的Textview使页面可以垂直滑动起来，同第2节中的NestedScrollView一样，设置layout_behavior属性为@string/appbar_scrolling_view_behavior.

至此我们讲了3种情况下垂直滑动页面内容让Toolbar显示和隐藏的实现。

源码下载：

1.滑动RecyclerView列表让Toolbar显示和隐藏的源码：

https://download.csdn.net/download/gaoxiaoweiandy/10946317

2. 滑动NestedScrollView让Toolbar显示和隐藏的源码：

https://download.csdn.net/download/gaoxiaoweiandy/10946304

3. 滑动ViewPager页面内容让Toolbar显示和隐藏的源码：

https://download.csdn.net/download/gaoxiaoweiandy/10945313