请选择 进入手机版 | 继续访问电脑版
原文链接:https://mp.weixin.qq.com/s/GegMt7GDBCFVoUgFQWG3Sw
每次打开支付宝首页滑动,头部的伸缩动画甚是吸引人。于是自己决定动手来实现一个。
无图言虚空,效果图:

仿支付宝首页头部伸缩效果-1.jpg

首先看到这种效果,第一反应就是coordinatorLayout布局,android studio新建项目时,可以直接新建个Scrolling Activity来查看demo效果。

仿支付宝首页头部伸缩效果-2.jpg

官方自带的布局示例:

仿支付宝首页头部伸缩效果-3.jpg

gradle关联
  1. [/code]简单介绍使用到的几个布局:
  2. [size=5]coordinatorLayout[/size]
  3. coordinatorLayout协调者布局,用来协调其子view并以触摸影响布局的形式产生动画效果的布局。coordinatorLayout是一个顶级布局。
  4. [size=5]appBarLayout[/size]
  5. appBarLayout主要给子布局配置属性app:layout_scrollFlags,5个属性值:
  6. scroll:所有想滚动出屏幕的view都需要设置这个属性值, 没有设置这个属性的view将被固定在屏幕顶部
  7. enterAlways:任意向下的滚动都会导致该view变为可见,启用快速“返回模式”
  8. enterAlwaysCollapsed:假设你定义了一个最小高度(minHeight)同时enterAlways也定义了,那么view将在到达这个最小高度的时候开始显示,并且从这个时候开始慢慢展开,当滚动到顶部的时候展开完。
  9. exitUntilCollapsed:当你定义了一个minHeight,此布局将在滚动到达这个最小高度的时候折叠。
  10. snap:当一个滚动事件结束,如果视图是部分可见的,那么它将被滚动到收缩或展开。例如,如果视图只有底部25%显示,它将折叠。相反,如果它的底部75%可见,那么它将完全展开。
  11. 这里的属性可以组合使用查看效果。
  12. 例如demo中自带的
  13. app:layout_scrollFlags="scroll|exitUntilCollapsed" 滑上去toolbar收缩在顶部:
  14. 仿支付宝首页头部伸缩效果-4.jpg
  15. 修改属性改成这样的: app:layout_scrollFlags="scroll|enterAlways" 滑上去toolbar滑出屏幕:
  16. 仿支付宝首页头部伸缩效果-5.jpg
  17. [size=5]collapsingToolbarLayout[/size]
  18. collapsingToolbarLayout可以作为AppBarLayout的子view,可以控制包含在其中的控件在滚动时的响应事件,子view可以是个可折叠的Toolbar,app:layout_collapseMode设置折叠模式。
  19. 3种折叠模式:
  20. off:默认属性,布局将正常显示,无折叠行为。
  21. pin:折叠后,此布局将固定在顶部。
  22. parallax:折叠时,此布局也会有视差折叠效果。
  23. 当其子布局设置了parallax模式时,我们还可以通过app:layout_collapseParallaxMultiplier设置视差滚动因子,值为:0~1。
  24. 接下来,我们就使用以上的属性来完成demo
  25. [size=5]实现原理[/size]
  26. 1、coordinatorLayout嵌套appBarLayout
  27. 2、appBarLayout的子viewcollapsingToolbarLayout设置属性
  28. app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
  29. 让头部随着内容下拉而展开,随着内容上拉而收缩。
  30. 3、collapsingToolbarLayout的子布局有两种,展开时显示的布局和Toolbar,其中Toolbar又包含了两种布局,展开时的和收缩时的。
  31. 展开时,(扫一扫、付钱)的布局:
  32. [code]
复制代码
layout_marginTop="50dp"预留出toolbar的高度,避免布局重叠。
toolbar里的两种布局:
  1. [/code]toolbar里的两个布局,可以通过监听AppBarLayout的移动控制显示和隐藏。
  2. 4、最下面的布局可以是NestedScrollView,一定要在布局中设置以下属性,这里我直接用的demo中的布局:
  3. [code]
复制代码
5、滑动过程中,各控件的透明度会有渐变的效果,这里采用类似遮罩的效果,每个include布局里都有个遮罩的view,在滑动过程中监听appBarLayout的addOnOffsetChangedListener,通过计算滑动的距离,逐渐改变透明度。
[code][/code]详细代码见
github地址:https://github.com/taixiang/alihome
欢迎关注我的博客:https://blog.manjiexiang.cn/
更多精彩欢迎关注微信号:春风十里不如认识你

http://weixin.qq.com/r/4UgRCQvEEFZvrU9q9x3z (二维码自动识别)

有个「佛系码农圈」,欢迎大家加入畅聊,开心就好!

https://weixin.qq.com/g/Ac-oAVdjuIxocdGP (二维码自动识别)

过期了,可加我微信 tx467220125 拉你入群。
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|翁笔

© 2001-2018 Wengbi.com

返回顶部