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

今日科技快讯

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

作者简介

大家早上好,感觉还没休息够又要上班了!Android实现嵌套滑动和渐隐效果

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

AndroidMsky 的博客地址:

http://blog.csdn.net/androidmsky

正文

先看知乎的效果:

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

再看我们实现的效果:

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

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

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效果就实现了。下面是布局嵌套结构的简略代码:

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

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

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

app:layout_behavior="@string/appbar_scrolling_view_behavior"

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

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

4. 头像名字渐隐效果

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

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

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

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

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

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

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

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

更多

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

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

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

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

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

相关文章:

  • 1970-01-01
  • 2022-12-23
  • 2021-12-15
  • 2021-11-07
  • 2022-02-12
猜你喜欢
  • 2022-12-23
  • 2021-09-15
  • 2022-01-16
  • 2021-07-23
相关资源
相似解决方案