使用CoordinatorLayout打造各种炫酷的效果

自定义Behavior —— 仿知乎，FloatActionButton隐藏与展示

NestedScrolling 机制深入解析

一步步带你读懂 CoordinatorLayout 源码

自定义 Behavior -仿新浪微博发现页的实现

ViewPager，ScrollView 嵌套ViewPager滑动冲突解决

自定义 behavior - 完美仿 QQ 浏览器首页，美团商家详情页

前言

记得两年前的时候，曾写过自定义 behavior 的文章 自定义 Behavior -仿新浪微博发现页的实现，到现在差不多有一万多的阅读量吧。

今天，对该 behavior 进行升级，相对于两年前的 behavior，增加了以下功能

• 级联滑动过程中增加监听回调，方便外部根据滑动距离，进行相应的动画，展现炫酷的 UI，通过 setPagerStateListener 设置回调监听
• 在滑动到顶部的时候，可以设置是否能够滑动将 Head 滑动下来，方法为 setCouldScroollOpen
• 手指在 header 部分惯性滑动的时候，增加 fling 回调，可根据需要，是否滑动 content 部分的 list ，方法为 setOnHeaderFlingListener
• HeaderBehavior ，ContentBehavior 代码优化，与业务逻辑剥离开，方便复用。

使用说明

效果图

我们先来看一下新浪微博发现页的效果：

接下来我们在来看一下我们两年前仿照新浪微博实现的效果

仿 QQ 浏览器

仿美团商家详情页面的：

分析说明：

有两种状态，open 和 close 状态。

• open 状态指 Tab+ViewPager 还没有滑动到顶部的时候，header 还 没有被完全移除屏幕的时候
• close 状态指 Tab+ViewPager 滑动到顶部的时候，Header 被移除屏幕的时候

从效果图，我们可以看到 在 open 状态下，我们向上滑动 ViewPager 里面的 RecyclerView 的 时候，RecyclerView 并不会向上移动（RecyclerView 的滑动事件交给 外部的容器处理，被被全部消费掉了），而是整个布局（指 Header + Tab +ViewPager）会向上偏移。当 Tab 滑动到顶部的时候，我们向上滑动 ViewPager 里面的 RecyclerView 的时候，RecyclerView 可以正常向上滑动，即此时外部容器没有拦截滑动事件。

同时我们可以看到在 open 状态的时候，我们是不支持下拉刷新的，这个比较容易实现，监听页面的状态，如果是 open 状态，我们设置 SwipeRefreshLayout setEnabled 为 false，这样不会 拦截事件，在页面 close 的时候，设置 SwipeRefreshLayout setEnabled 为 TRUE，这样就可以支持下拉刷新了。

基于上面的分析，我们这里可以把整个效果划分为三个部分

第一部分 Header 部分：在 Header 部分还没有滑动到顶部的时候（即 open 的时候），跟随手指滑动
第二部分 Content 部分：我们向上滑动的时候，当Header 处于 open 状态，这时候 Header 向上滑动， content 部分的 recyclerView 不会滑动，当 header 处于 close 状态，content 部分向上滑动， RecyclerView 向上滑动。当我们向下滑动的时候，header 并不会随着滑动，只会滑动 content 部分的 recyclerView
第三部分 search 部分：当我们向上滑动的时候，Search 部分会随着滑动，最终停留在固定的位置.

我们把这三部分的关系定义为 Content 依赖于 Header。Header 移动的时候，Content 跟着 移动。所以，我们在处理滑动事件的时候，只需要处理好 Header 部分的 Behavior 就oK了，Content 部分的 Behavior 不需要处理滑动事件，只需依赖于 Header ，跟着做相应的移动即可。Search 部分的 behavior 也不需要处理滑动事件，只需依赖与 Header，跟着做相应的移动。

至于具体怎么实现的，可以看自定义 Behavior -仿新浪微博发现页的实现，核心思想差不多，这里不再重复。

使用说明

这里我们已仿 QQ 浏览器 demo 进行说明：

我们一起来看一下怎样使用：简单来说，只需要两步：

1. 第一步，分别在 xml 文件中，为 header 部分， content 部分指定我们对应的 behavior
2. 第二部分，在代码里面设置一些配置参数

第一步：编写 xml 文件，并指定相应的 behavior

<?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:background="@android:color/holo_blue_light"     android:fitsSystemWindows=