Android实现嵌套滑动和渐隐效果

今日科技快讯

近日，阿里巴巴集团澳大利亚和新西兰总公司正式在澳大利亚墨尔本成立。集团董事局主席马云表示，澳新总公司成立是阿里巴巴集团国际战略最重要的一步，将助力澳新两国中小企业快速向农业和服务业出口转型，帮助更多中小企业走向世界，向全世界人民分享澳新高品质产品。

作者简介

大家早上好，感觉还没休息够又要上班了！

本篇来自 AndroidMsky 的投稿，有关嵌套滑动，简单实用，希望能够对大家有所帮助。

AndroidMsky 的博客地址：

http://blog.csdn.net/androidmsky

正文

先看知乎的效果：

再看我们实现的效果：

网上也有很多嵌套滑动的例子，先说说我这个的优点：

1. 头部可以参与滑动

2. 下面可以加 ViewPager

3. 支持 RecyclerView 和 ScrollView

4. 基于 Behavior 可以获取事实滚动距离可做更多联动

5. 不必重写过多的滑动事件处理，几乎只是玩xml

实现思路：CoordinatorLayout 做最上层布局，上方伸缩处 AppBarLayout，下面 ViewPager 里面放 NestedScrollView。

观察知乎主页的效果

1. 下面 多item 处向上滑动首先伸缩上面的head头部，头部收缩后下面则进入滑动。

2. 反之向下拉先回把 多item 出拉到最上方，之后伸展头部。

3. 下面 多item 处支持左右滑动。

4. 头像名字渐隐效果。

5. 两个 title 可以点击（title 是在 head 中而不是下面）

下面我们来各个击破： 

1和2

1 和 2 其实最容易只要实现系统的 CoordinatorLayout

自从谷歌推出 CoordinatorLayout 后嵌套滑动玩起就没那么难了。1、2实现其实十分简单就是系统自带的 CoordinatorLayout 即可实现，不用书写Java代码。结构如下：

CoordinatorLayout—– AppBarLayout—–CollapsingToolbarLayout——Toolbar。

CoordinatorLayout—–ViewPager。

父布局 CoordinatorLayout 两个节点 AppBarLayout 和 ViewPager

AppBarLayout 中的节点 CollapsingToolbarLayout 它的节点又是 Toolbar

如此布局嵌套联动伸缩toolsbar效果就实现了。下面是布局嵌套结构的简略代码：

3. 下面多item处支持左右滑动

接下来就是下方的 ViewPager，首先 ViewPager 必须加上这行代码，否则滑动事件不会分发给他：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

另外注意 viewpager 的高度必须是 match-parent 否则也不会有联动效果。

4. 头像名字渐隐效果

头像渐隐，我们需要在 CoordinatorLayout 中找到一个直接 子view 并且指定：

app:layout_behavior="com.example.liangmutian.linkscrollmsky.RelativelayoutBehavior"

接下来看 RelativelayoutBehavior 这个类,本demo也就这个类中进行了一些简单的坐标处理:

RelativeLayout child 就是刚刚的直接 子view，View dependency 就是产生滑动的view。通过 view 滑动距离的控制，我们就可以计算当前滑动幅度，从而实现头像渐隐。356dp 就是整个 AppBarLayout 的高度，150dp 是 Toolbar 的高度。

可被滑动的总距离 就是 AppBarLayout的高度 - Toolbar的高度 - 状态栏的高度。那可被滑动的总距离做 分母，滑动距离做 分子，也就计算出了滑动服务，用过Handler去更新Activity中的控件透明度，就可以了。

5. 两个title可以点击（title是在head中而不是下面）

两个title可点击并跟随头部滑动，这里有坑高危请注意。

我一开始，是直接写到 AppBarLayout 里，发现不错，可以跟随滑动，也能点，但是如果画上去也就是完全缩进去的时候，就不能点了，原来我们只是把 toolsbar 设置成透明色，来实现实时透 AppBarLayout 中的视图，当完全伸缩，Toolsbar 就出现在前面了，后面的东西也就不能点了。

解决思路：

类似于悬停的解决思路吧，其实就在 Toolsbar 中也放置这样一个布局石头，在头部展开的时候收缩，在不展开的时候显示，动态去控制两个一样的布局的显隐藏就ok了。

然后，挖槽还是有坑，如果把 AppBarLayout 中的布局放在最底下，然后让头部完全缩进去，两个布局不能完全重叠，这样在控制，显示隐藏的时候就会有轻微的跳跃。于是机智如我，发现他们俩只是一个状态的距离好吧一行代码，拉近你我的距离：

RelativeLayout backRe;
backRe.setPadding(0, 0, 0, DensityUtil.getZhuangtai(this));

就这样效果完全实现，只是在 RelativelayoutBehavior 中进行了一点的坐标运算，其他地方基本不需要，比较容易上手。

感觉还有需优化的地方也希望大家多提意见。

源码地址：

https://github.com/AndroidMsky/linkScrollMsky

更多

每天学习累了，看些搞笑的段子放松一下吧。关注最具娱乐精神的公众号，每天都有好心情。

如果你有好的技术文章想和大家分享，欢迎向我的公众号投稿，投稿具体细节请在公众号主页点击“投稿”菜单查看。

欢迎长按下图 -> 识别图中二维码或者扫一扫关注我的公众号：

觉得不错就赞一下吧

赞赏

人赞赏