前段时间接到个需求，简单而言就是模仿支付宝的首页，唯一的不同就是支付宝首页的主功能模块在屏幕上方，而需求中的主功能模块在屏幕下方。
页面分析
支付宝首页
第一轮分析
整个页面由三个模块组成：主功能模块、应用模块和信息模块。
-
当页面由初始状态向上滑动时，应用模块和信息模块会同时向上滑动，而主功能模块的高度会随着滑动的距离而变化，大功能按钮逐渐消失，小功能按钮逐渐显示。
向上滑动 -
当小功能按钮完全显示以后，主功能模块的高度就会固定，而信息模块和应用模块还可以继续向上滑动。
主功能模块高度固定 - 当页面由初始状态下滑时，主功能模块和应用模块的位置都会固定不变，而信息模块则会展示刷新效果，并在刷新结束后恢复初始状态。
-
不论是上滑还是下滑，信息模块右侧都会显示滚动条。
向下滑动刷新
根据上述效果进行分析：
-
整个页面由两个UITableView控件组成：
- 由于信息模块有下拉刷新功能并且右侧显示有滚动条，因此将信息模块视为tableView1。
- 由于信息模块和应用模块可以一起滑动，而主功能模块仅仅是改变高度，因此信息模块和应用模块一起组成tableView2。
- 由于主功能模块只是高度发生变化而位置并不变化，因此可以将主功能模块添加在主页面上，并且用与主功能模块一样大小的空白view充当tableView2的headerView。
初始状态下，由tableView2响应上滑事件，tableView1响应下滑事件。
一旦由tableView2响应了上滑事件，那么在恢复初始状态之前，下滑事件也会由tableView2来响应。
根据上述分析不难看出，整个页面效果实现的关键在于控制响应滑动事件的主体。暂且不论代码的复杂程度，其实现后的效果也不尽如人意。
第二轮分析
在第一轮分析的基础上，参考了一些网上的资料，进行了第二轮分析：
- 整个页面仅由一个UITableView控件组成，其主体就是信息模块。有一个小细节：当我们在主功能模块或应用模块上触摸下滑时，信息模块同样会进行下拉刷新。
- 主功能模块添加在主页面上，其高度随tableView滑动距离的变化而变化。
- 依次在tableView.headerView上添加应用模块和刷新模块。
- 主功能模块和应用模块正好覆盖了tableView.headerView。
具体布局代码如下：
_tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height - tabBarHeight) style:UITableViewStylePlain] ;
_tableView.delegate = self ;
_tableView.dataSource = self ;
_tableView.separatorStyle = UITableViewCellSeparatorStyleNone ;
[self.view addSubview:_tableView] ;
UIView *tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, movedHeight + fixedNormalHeight)] ;
tableHeaderView.backgroundColor = [UIColor clearColor] ;
_tableView.tableHeaderView = tableHeaderView ;
_tableView.scrollIndicatorInsets = UIEdgeInsetsMake(movedHeight + fixedNormalHeight, 0, 0, 0) ;
_refreshView = [[UIView alloc]initWithFrame:CGRectMake(0, movedHeight + fixedNormalHeight - 50, [UIScreen mainScreen].bounds.size.width , 50)] ;
[_tableView.tableHeaderView addSubview:_refreshView] ;
_movedView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, movedHeight + fixedNormalHeight)] ;
[_tableView addSubview:_movedView] ;
_fixedView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, fixedNormalHeight)] ;
[self.view addSubview:_fixedView] ;
代码中，_movedView就是应用模块，_fixedView就是主功能模块。
- 滑动时：
- 初始状态下，若tableView上滑，应用模块也会随之上滑；若tableView下滑，应用模块则会固定不动，而原本添加在tableView.headerView上的刷新动画就会显示出来。
- 在恢复初始状态之前，若tableView先上滑再下滑，应用模块也会随之下滑。
具体实现代码为：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat tableViewOffSetY = scrollView.contentOffset.y ;
if(tableViewOffSetY >= 0) {
_movedView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, movedHeight + fixedNormalHeight) ;
if(tableViewOffSetY <= (fixedNormalHeight-fixedSmallHeight)) {
CGRect frame = _fixedView.frame ;
CGFloat height = fixedNormalHeight - tableViewOffSetY ;
frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, height) ;
_fixedView.frame = frame ;
}
else {
_fixedView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, fixedSmallHeight) ;
}
}
else {
_movedView.frame = CGRectMake(0, tableViewOffSetY, [UIScreen mainScreen].bounds.size.width, movedHeight + fixedNormalHeight) ;
_fixedView.frame = CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, fixedNormalHeight) ;
if(tableViewOffSetY<-refreshHeight-10 && [scrollView isDecelerating]) {
[self requird] ;
[self.tableView setContentOffset:CGPointMake(0, -refreshHeight) animated:YES] ;
}
}
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
if(!decelerate) {
if(scrollView.contentOffset.y >= 0) {
if(scrollView.contentOffset.y < fixedSmallHeight*0.5) {
[scrollView setContentOffset:CGPointMake(0, 0) animated:YES] ;
}
else if(scrollView.contentOffset.y < fixedSmallHeight) {
[scrollView setContentOffset:CGPointMake(0, fixedSmallHeight) animated:YES] ;
}
}
}
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
if(scrollView.contentOffset.y >= 0) {
if(scrollView.contentOffset.y < fixedSmallHeight*0.5) {
[scrollView setContentOffset:CGPointMake(0, 0) animated:YES] ;
}
else if(scrollView.contentOffset.y < fixedSmallHeight) {
[scrollView setContentOffset:CGPointMake(0, fixedSmallHeight) animated:YES] ;
}
}
}
代码中，下拉超过一定距离就进行更新请求，并在请求期间显示请求模块
根据第二轮分析，整个页面的实现就会变得非常简单。
代码实现
具体的实现代码见：
https://github.com/bbbxxxbx/-
