前言
在前面的文章中我们已经实现过嵌套滚动可以悬浮头效果,当时有两种实现:
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"