小小文自己尝试等装一下各个专家

iOS - 仿支付宝(9.9.2)首页页面滚动

2016-09-21  本文已影响7136人  程序员咿呀咿呀哟

公司的app做交互的同学竟然做了一个和支付宝首页类似的页面,真是心累,本着追求技术的客观态度,我便模仿下支付宝做一个页面。
个人博客 :https://www.linit.space

好多人求源码,公司的源码当然不会给啦。但是你们把你们的demo发我邮箱,我可以帮忙修改下。邮箱 001@linit.space 觉得我修改的辛苦记得给打赏啊T T

一. 支付宝页面设计
zhifubaotujie2.jpeg
zhifubaotujie1.jpeg

==可以在图中发现有以下的难点==

  1. 手势需要传递,滑动上半部分结果是滑动下半部分。
  2. UI需要变动,向上滑动的时候,顶部部分收缩。

==解决思路==

WechatIMG8.jpeg
  1. 接受手势信息由一个屏幕大小的UIScrollView(A)接受。响应者为下半部分为一个UIScrollView(B)。这样即可实现点击屏幕任何位置,滑动的部分均为UIScrollView(B)。
  2. 问题来了,既然只有下面的UIScrollView移动,如何做到上面的也一起动呢。这里用一个傻一点的办法,就是监听下面UIScrollView(B)contentOffset的变化,然后控制上部分内容的显示。
  3. 这里有个坑,往上移动UIScrollView(B)上半部分内容逐渐变小,可是UIScrollView(B)的frame不变,也就是说UIScrollView(B)还是在这个位置,但是看起来明明像是UIScrollView(B)也移动上去一样。于是,可以将UIScrollView(B)的clipsToBounds设置为NO。这样,超出frame 的部分仍然可以显示。
  4. 现在看起来的效果是满足了,但是大家肯定都会发现挪出frame的部分不能响应事件啊!这时候可以重写系统自带的
    - (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event方法来解决这个问题。

==关键代码==

  1. 解决手势传递问题
 //移除scrollViewA原有手势操作
NSMutableArray *list = [NSMutableArray arrayWithArray:scrollViewA.gestureRecognizers];
    for (UIGestureRecognizer *gestureRecognizer in list) {
        [scrollViewA removeGestureRecognizer:gestureRecognizer];
}

//将scrollViewB的手势操作加到scrollViewA中
for (UIGestureRecognizer *gestureRecognizer in scrollViewB.gestureRecognizers) {
        [scrollViewA addGestureRecognizer:gestureRecognizer];
}

2.解决头部view和下面的scrollViewB一起滚动的问题,直接使用kvo 监听contentOffset变化就完事。
3.超出scrollViewB部分可以点击

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    for (UIView *subview in [self.subviews reverseObjectEnumerator]) {
        
        CGPoint convertedPoint = [subview convertPoint:point fromView:self];
        UIView *hitTestView = [subview hitTest:convertedPoint withEvent:event];
        if (hitTestView) {
            return hitTestView;
        }
    }
    return [super hitTest:point withEvent:event];
}

二. 咱公司的app 掌医2.0的 挂号主页

演示

2016-09-21 17_42_35.gif

==内容更加复杂 因为下部分不只一个 scrollViewB 不过大同小异,关键部分还是以上代码,代码就不贴了也不外传,同事自行看svn==

上一篇下一篇

猜你喜欢

热点阅读