V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
iOS 开发实用技术导航
NSHipster 中文版
http://nshipster.cn/
cocos2d 开源 2D 游戏引擎
http://www.cocos2d-iphone.org/
CocoaPods
http://cocoapods.org/
Google Analytics for Mobile 统计解决方案
http://code.google.com/mobile/analytics/
WWDC
https://developer.apple.com/wwdc/
Design Guides and Resources
https://developer.apple.com/design/
Transcripts of WWDC sessions
http://asciiwwdc.com
Cocoa with Love
http://cocoawithlove.com/
Cocoa Dev Central
http://cocoadevcentral.com/
NSHipster
http://nshipster.com/
Style Guides
Google Objective-C Style Guide
NYTimes Objective-C Style Guide
Useful Tools and Services
Charles Web Debugging Proxy
Smore
newkengsir
V2EX  ›  iDev

高仿支付宝 9.x 版本首页

  •  
  •   newkengsir · 2016-10-12 09:51:58 +08:00 · 7654 次点击
    这是一个创建于 2949 天前的主题,其中的信息可能已经有所发展或是发生改变。

    支付宝 9.x 版本首页效果

    对于新版支付宝首页的产品功能这里就不说什么了,一大堆人吐槽,我们只想要一个好好的支付工具,阿里硬是要融入社交...

    今天这里不是来评论支付宝功能的,而是作为一个 iOS 开发人员在使用的过程中发现,首页这滑动好“怪异”啊~~

    首先,右侧的滚动条的位置好怪!为什么在中间?只能说明一个问题,这个 tableview 是从这里开始的。

    其次,既然 tableview 在中间开始,那上面那一片 view 是如何滚动的(从滚动条可以看出不是 tableviewheader )?而且和 tableview 做到无缝衔接。

    再次,滑动 tableview 上面那块 view ,直接响应滑动。

    通过上面种种奇怪的现象,于是我决定针对这个效果些一个 demo 来玩玩。

    (最后闪的那几下请忽略, gif 图片没有做完美,并不是 demo 的 bug 。。。。)

    demo 地址: http://www.code4app.com/forum.php?mod=viewthread&tid=10931&extra=page%3D1%26filter%3Dsortid%26sortid%3D1

    因为是 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 嵌入方式借鉴了:

    https://github.com/Zhanggaoyi92/Alipay-8.11-update-demo

    code4app

    15 条回复    2016-10-29 04:30:35 +08:00
    hekunhotmail
        1
    hekunhotmail  
       2016-10-12 10:03:32 +08:00
    看来没人回复,我来赞你一下吧,这种效果早就已经有,并不是支付宝第一个在用,实现原理也比较明确, so 还是支持一下喽
    zhangfanfan
        2
    zhangfanfan  
       2016-10-12 10:09:41 +08:00
    楼主,你这个 demo 是用什么模拟器搞的?
    SeanChense
        3
    SeanChense  
       2016-10-12 10:10:39 +08:00
    /t/311934

    为何一模一样?
    fjhmx
        4
    fjhmx  
       2016-10-12 10:10:40 +08:00
    这个可以有,之前还没注意到这个..给个赞
    lisi1987
        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 的话这个实现就很简单了。。。
    lisi1987
        6
    lisi1987  
       2016-10-12 10:15:01 +08:00
    @zhangfanfan 不就是 xcode 的 6s 模拟器吗?

    @SeanChense 哈哈,我是原作者,这位同学把 demo 地址改成了 code4app 了,估计是 code4app 的小编。。。
    viko16
        7
    viko16  
       2016-10-12 10:16:17 +08:00
    天呐关键代码还以为看到了 JavaScript ..
    hronro
        8
    hronro  
       2016-10-12 10:19:21 +08:00 via Android
    @viko16 和 typescript 简直一模一样
    viko16
        9
    viko16  
       2016-10-12 10:41:23 +08:00
    @hronro 我改了一点点语法之后竟然就在 babeljs.io/repltypescriptlang.org/play 上编译通过了 2333
    longaiwp
        10
    longaiwp  
       2016-10-12 10:50:46 +08:00
    @viko16 23333333
    paragon
        11
    paragon  
       2016-10-12 11:08:51 +08:00
    现在 iOS 也开始抄 Android 了么~
    owlsec
        12
    owlsec  
       2016-10-12 11:25:57 +08:00
    @viko16 23333
    newkengsir
        13
    newkengsir  
    OP
       2016-10-12 14:20:19 +08:00
    @lisi1987 被你识破了 你也玩这个的哈哈。。。。好尴尬,不过还好, code4app 也有 github 地址 稍等,我再附上 github 地址
    newkengsir
        14
    newkengsir  
    OP
       2016-10-12 14:21:12 +08:00
    https://github.com/seedotlee/AlipayIndexDemo 代码,原作者:@lisi1987
    lvlingsheng
        15
    lvlingsheng  
       2016-10-29 04:30:35 +08:00
    demo 做的还挺有意思的,虽然我一直觉得支付宝的这个交互做的很渣
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   950 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 20:52 · PVG 04:52 · LAX 12:52 · JFK 15:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.