公司的app做交互的同学竟然做了一个和支付宝首页类似的页面，真是心累，本着追求技术的客观态度，我便模仿下支付宝做一个页面。
个人博客 :https://www.linit.space
好多人求源码，公司的源码当然不会给啦。但是你们把你们的demo发我邮箱，我可以帮忙修改下。邮箱 001@linit.space 觉得我修改的辛苦记得给打赏啊T T
一. 支付宝页面设计
zhifubaotujie2.jpeg
zhifubaotujie1.jpeg
==可以在图中发现有以下的难点==
- 手势需要传递，滑动上半部分结果是滑动下半部分。
- UI需要变动，向上滑动的时候，顶部部分收缩。
==解决思路==
WechatIMG8.jpeg
- 接受手势信息由一个屏幕大小的UIScrollView(A)接受。响应者为下半部分为一个UIScrollView（B）。这样即可实现点击屏幕任何位置，滑动的部分均为UIScrollView（B）。
- 问题来了，既然只有下面的UIScrollView移动，如何做到上面的也一起动呢。这里用一个傻一点的办法，就是监听下面UIScrollView（B）contentOffset的变化，然后控制上部分内容的显示。
- 这里有个坑，往上移动UIScrollView（B）上半部分内容逐渐变小，可是UIScrollView（B）的frame不变，也就是说UIScrollView（B）还是在这个位置，但是看起来明明像是UIScrollView（B）也移动上去一样。于是，可以将UIScrollView（B）的clipsToBounds设置为NO。这样，超出frame 的部分仍然可以显示。
- 现在看起来的效果是满足了，但是大家肯定都会发现挪出frame的部分不能响应事件啊！这时候可以重写系统自带的
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event方法来解决这个问题。
==关键代码==
- 解决手势传递问题
//移除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==
