支付宝首页模仿

前段时间接到个需求，简单而言就是模仿支付宝的首页，唯一的不同就是支付宝首页的主功能模块在屏幕上方，而需求中的主功能模块在屏幕下方。

页面分析

支付宝首页

第一轮分析

整个页面由三个模块组成：主功能模块、应用模块和信息模块。

• 当页面由初始状态向上滑动时，应用模块和信息模块会同时向上滑动，而主功能模块的高度会随着滑动的距离而变化，大功能按钮逐渐消失，小功能按钮逐渐显示。

  
  
  

  向上滑动

• 当小功能按钮完全显示以后，主功能模块的高度就会固定，而信息模块和应用模块还可以继续向上滑动。

  
  
  

  主功能模块高度固定
• 当页面由初始状态下滑时，主功能模块和应用模块的位置都会固定不变，而信息模块则会展示刷新效果，并在刷新结束后恢复初始状态。

• 不论是上滑还是下滑，信息模块右侧都会显示滚动条。

  
  
  

  向下滑动刷新

根据上述效果进行分析：

1. 整个页面由两个UITableView控件组成：

   • 由于信息模块有下拉刷新功能并且右侧显示有滚动条，因此将信息模块视为tableView1。
   • 由于信息模块和应用模块可以一起滑动，而主功能模块仅仅是改变高度，因此信息模块和应用模块一起组成tableView2。
   • 由于主功能模块只是高度发生变化而位置并不变化，因此可以将主功能模块添加在主页面上，并且用与主功能模块一样大小的空白view充当tableView2的headerView。

2. 初始状态下，由tableView2响应上滑事件，tableView1响应下滑事件。

3. 一旦由tableView2响应了上滑事件，那么在恢复初始状态之前，下滑事件也会由tableView2来响应。

根据上述分析不难看出，整个页面效果实现的关键在于控制响应滑动事件的主体。暂且不论代码的复杂程度，其实现后的效果也不尽如人意。

第二轮分析

在第一轮分析的基础上，参考了一些网上的资料，进行了第二轮分析：

1. 整个页面仅由一个UITableView控件组成，其主体就是信息模块。有一个小细节：当我们在主功能模块或应用模块上触摸下滑时，信息模块同样会进行下拉刷新。
2. 主功能模块添加在主页面上，其高度随tableView滑动距离的变化而变化。
3. 依次在tableView.headerView上添加应用模块和刷新模块。
4. 主功能模块和应用模块正好覆盖了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就是主功能模块。

5. 滑动时：
   • 初始状态下，若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/-