对于新版支付宝首页的产品功能这里就不说什么了,一大堆人吐槽,我们只想要一个好好的支付工具,阿里硬是要融入社交...
今天这里不是来评论支付宝功能的,而是作为一个 iOS 开发人员在使用的过程中发现,首页这滑动好“怪异”啊~~
首先,右侧的滚动条的位置好怪!为什么在中间?只能说明一个问题,这个 tableview 是从这里开始的。
其次,既然 tableview 在中间开始,那上面那一片 view 是如何滚动的(从滚动条可以看出不是 tableviewheader )?而且和 tableview 做到无缝衔接。
再次,滑动 tableview 上面那块 view ,直接响应滑动。
通过上面种种奇怪的现象,于是我决定针对这个效果些一个 demo 来玩玩。
(最后闪的那几下请忽略, gif 图片没有做完美,并不是 demo 的 bug 。。。。)
因为是 demo 嘛,所以代码就尽量简单,处理就基本只放在一个 class 中,这样比较容易理解,大家就不要吐槽这一块了~~~
经过我反复实验,还是 UIScrollView + UITableView 的方式实现最靠谱,那问题来了,如何处理两个 ScrollView 的滑动冲突?
答案就是关掉一个滑动!当然就是关掉 tableview 的滑动,通过外层 scrollview 的 offset 来直接控制 tableview 的滑动,关键代码:
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let y = scrollView.contentOffset.y
if (y <= 0) {
var newFrame = self.headerView.frame
newFrame.origin.y = y
self.headerView.frame = newFrame
newFrame = self.mainTableView.frame
newFrame.origin.y = y + topOffsetY
self.mainTableView.frame = newFrame
//偏移量给到 tableview , tableview 自己来滑动
self.mainTableView.setScrollViewContentOffSet(point: CGPoint(x: 0, y: y))
//功能区状态回归
newFrame = self.functionHeaderView.frame
newFrame.origin.y = 0
self.functionHeaderView.frame = newFrame
} else {
//处理功能区隐藏和视差
var newFrame = self.functionHeaderView.frame
newFrame.origin.y = y/2
self.functionHeaderView.frame = newFrame
}
//处理透明度
let alpha = (1 - y/functionHeaderViewHeight*2.5 ) > 0 ? (1 - y/functionHeaderViewHeight*2.5 ) : 0
functionHeaderView.alpha = alpha
if alpha > 0.5 {
let newAlpha = alpha*2 - 1
mainNavView.alpha = newAlpha
coverNavView.alpha = 0
} else {
let newAlpha = alpha*2
mainNavView.alpha = 0
coverNavView.alpha = 1 - newAlpha
}
}
这里的关键就是当想上滑动的时候,实际就是滑动最外层的 scrollview ,然而想下滑动到顶的时候仅仅只讲 offset 传递给 tableview 让其继续滚动。
tableview 嵌入方式借鉴了:
1
hekunhotmail 2016-10-12 10:03:32 +08:00
看来没人回复,我来赞你一下吧,这种效果早就已经有,并不是支付宝第一个在用,实现原理也比较明确, so 还是支持一下喽
|
2
zhangfanfan 2016-10-12 10:09:41 +08:00
楼主,你这个 demo 是用什么模拟器搞的?
|
3
SeanChense 2016-10-12 10:10:39 +08:00
|
4
fjhmx 2016-10-12 10:10:40 +08:00
这个可以有,之前还没注意到这个..给个赞
|
5
lisi1987 2016-10-12 10:13:39 +08:00
@hekunhotmail 是的, twitter 的个人信息页面也有这种效果,
翻译: http://keleyundou.github.io/2016/03/30/实现 Twitter-UI 效果 / 原文: http://www.thinkandbuild.it/implementing-the-twitter-ios-app-ui/ 但是这个 demo 只是实现了缩放效果,但是关键的内容区域的列表没有给出实现,只是用一个 view 代替的,如果只是一个 view 的话这个实现就很简单了。。。 |
6
lisi1987 2016-10-12 10:15:01 +08:00
@zhangfanfan 不就是 xcode 的 6s 模拟器吗?
@SeanChense 哈哈,我是原作者,这位同学把 demo 地址改成了 code4app 了,估计是 code4app 的小编。。。 |
7
viko16 2016-10-12 10:16:17 +08:00
天呐关键代码还以为看到了 JavaScript ..
|
9
viko16 2016-10-12 10:41:23 +08:00
|
11
paragon 2016-10-12 11:08:51 +08:00
现在 iOS 也开始抄 Android 了么~
|
13
newkengsir OP @lisi1987 被你识破了 你也玩这个的哈哈。。。。好尴尬,不过还好, code4app 也有 github 地址 稍等,我再附上 github 地址
|
14
newkengsir OP https://github.com/seedotlee/AlipayIndexDemo 代码,原作者:@lisi1987
|
15
lvlingsheng 2016-10-29 04:30:35 +08:00
demo 做的还挺有意思的,虽然我一直觉得支付宝的这个交互做的很渣
|