公司的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==
网友评论
找了好久.邮箱:1206685852@qq.com
谢谢
疑问1.下拉刷新的刷新头是在“放房子院区"那3个标签的头部，说明这3个标签也在ScrollViewB，那么为什么标签能停留在上部而不是划出去，是否另外做了个隐藏着到时机显示
疑问2.侧滑是如何解决的，如果是ScrollViewB里套了2个TableView，弹簧效果怎么处理的。（没办法只上下弹簧左右不弹簧）
项目刚好要用到类似效果，麻烦解答下，谢谢了
n个ScrollView 要做个 点击范围控制
if (frame1.origin.y > 0) {
frame1.origin.y = 0;
} 做了 类似这个判断。 kvo里做的
然后 由弹簧效果的啊 左右弹簧效果？那是啥。。。 上下弹簧效果有的啊 。用的就是tableview 自带的 因为对tableview 的操作只是修改了frame 没改其他的
tableView的.contentOffset > 0,
frame没变,内容已经上移,可此时,并不能上移,
而是顶部的视图渐变.
找了好久.邮箱:9445201@qq.com
谢谢
如果 UIScrollviewb是tableview 会遇到自动释放的不给 达不到文中的效果
你所说的 有啥问题是啥问题
而是一个scrollview（这个scrollview的contentSize要根据内部tableView的大小变化）包含着一个tableview （这个tableview的高度要根据内容调整）滑动的实际是scrollview 。tableview没有动哦，所以不存在tableView呢 cell超出之后自动销毁