嵌套滚动多TAB可悬浮头效果实现

前言

       在前面的文章中我们已经实现过嵌套滚动可以悬浮头效果，当时有两种实现：

        1. Listview多tab上滑悬浮 一种是一个ListView里面切换数据源，同时监控页面滚动，布局页面中设置两层，一层放置悬浮头，滚动到一定位置时，显示出悬浮头
       2. 多TAB可悬浮头控件还有一种是上面悬浮头部内容，底层多tab采用viewpager来实现，在viewpager里面的listview中插入相同大小的头部，监控listview的滚动来同步滚动头部内容。

       上面两种方式都能实现上面的效果，但都有比较大的缺点，第一种当有个tab时，数据切换复杂，需要处理的状态太多，第二种也需要处理很多种回调情况，计算各种偏移量。

       这里我们采用系统原生控件，来采用一种新的实现方式。

效果

       这里我们来看看实现后的效果。由于gif每次生成的都很大，传不上来，只好截几张图了（谁有好办法可以分享一下，gif尺寸小了太糊，大了传不上来）

上图第一张是初始进入效果，第二张是部分滑动后效果

第三图是上划到一定程度Tab悬浮效果，第四图是下拉刷新效果

实现

       上面我们已经看了效果图，因此我们来实现一下，这里主要采用了系统的SwipeRefreshLayout来实现刷新效果，CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout+NestedScrollView来实现头部悬浮，与底部内容嵌套滚动效果，这里我们不需要引入外部控件，也不需要监控太多状态就能实现Tab悬浮头效果

布局

       首先我们来看看布局内容

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
              tools:context="com.demo.example.activity.NestScrollingActivity">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/global_fg_color"
        app:titleTextColor="@color/white"/>

    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/refresh_layout"
        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.support.design.widget.CoordinatorLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <android.support.design.widget.AppBarLayout
                android:id="@+id/app_bar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fitsSystemWindows="true">

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

                    <include layout="@layout/include_scroll_head"