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

原创微信公众号郭霖 WeChat ID: guolin_blog

本篇来自

AndroidMsky

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

AndroidMsky的博客地址:

http://blog.csdn.net/androidmsky

正文

先看知乎的效果:


再看我们实现的效果:


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

1.头部可以参与滑动

2.下面可以加ViewPager

3.支持RecyclerViewScrollView

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 中的布局放在最底下,然后让头部完全缩进去,两个布局不能完全重叠,这样在控制,显示隐藏的时候就会有轻微的跳跃。于是机智如我,发现他们俩只是一个状态的距离好吧一行代码,拉近你我的距离:

RelativeLayoutbackRe;

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

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

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

源码地址:

https://github.com/AndroidMsky/linkScrollMsky

完。。。。。。。。。。。。。。。。。。。。。

文章原创作者GuoLin 书籍推荐

郭林大神原创android 书籍:《第一行代码 android》

淘宝链接: https://s.click.taobao.com/t?e=m%3D2%26s%3DgKUfuKdAZKocQipKwQzePOeEDrYVVa64K7Vc7tFgwiHjf2vlNIV67p2n%2BQBNMyE6Rku8%2Bpj6eJall3bs%2B3NRhNHnsKI%2BqxhyM0iVZhTFBom4YIorMPnmg8G0g2OJi%2FzmXHfenomYtn5EW9vzeG8LzfPUwktUBEmkxg5p7bh%2BFbQ%3D&pvid=10_106.6.161.154_3367_1490163222155

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,515评论 25 707
  • 内容抽屉菜单ListViewWebViewSwitchButton按钮点赞按钮进度条TabLayout图标下拉刷新...
    皇小弟阅读 46,708评论 22 664
  • CoordinatorLayout与滚动的处理 CoordinatorLayout实现了多种Material De...
    cxm11阅读 6,567评论 1 15
  • 天边金色被黑夜吞没,又一次走进火车站。网上买了票,经过进站口的第一道安检口。真是无奈的小城站,门外的自助售票机...
    seven王王阅读 316评论 0 0
  • 上一章 目录 我手里紧紧攒着软鞭,心里却在流转着如意算盘。娘亲与我们说过,出门在外,打的过便打,打不过就逃。苏城对...
    末晓阅读 702评论 5 12