iOS如何实现一个2016支付宝首页效果(滑动)

自古一楼只镇楼、不说事

WechatIMG106.png

　　依旧没什么可前言的、有图谁哔哔是吧。

KTAlipay.gif

正文

去年就注意到支付宝的这个效果、但当时没什么特别好的想法。只是觉得、哎呀、这个tableView挪下去了、上面还能一起滑动好流弊。
　　之前确实也做过一些尝试。通过在scrollView上添加tableView、然后模拟上推的效果。但是上推途中需要不断的控制tableView、一个简单的上滑事件做了N多操作以及判断、结果就是卡顿、牺牲了很大一部分性能。我并没有用Reveal去撬开看支付宝的具体层级。但我相信、一个大厂的团队不会打造出一个华而不实的效果（事实上、人家确实不卡、丝般顺滑）。

我一直觉得。并不是每一个看似牛逼的功能、都有着难以想象的复杂度。没必要为了自己觉得流弊而复杂。

然后昨天、灵感突然一现。
　　既然想那么流畅、那用系统的tableView不就好了。
　　至于滑动条、完全可以用scrollIndicatorInsets来伪装一下。
　　于是、有了下面这个想法。（不要在意错别字~这是昨天和别人讨论完善时的一个截图而已）

WechatIMG5893.jpeg

关于核心代码

既然想法已经出来了、那核心代码其实猜都猜得到了。真的没多少。

首先、是之前想到的页面层级搭建
#pragma mark - setter && getter
- (UITableView *)tableView {
if (!_tableView) {
_tableView = [[UITableView alloc]initWithFrame:CGRectZero style:UITableViewStyleGrouped];
_tableView.delegate = self;
_tableView.dataSource = self;

      /* 这里用一个透明的view将header撑开 */
      UIView *tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, 200)];
      tableHeaderView.backgroundColor = [UIColor clearColor];
      _tableView.tableHeaderView = tableHeaderView;
      /* 修改scrollIndicatorInsets。仿造出tableView从下方开始的效果 */
      _tableView.scrollIndicatorInsets = UIEdgeInsetsMake(200, 0, 0, 0);
      /* 再在header下方安装一个刷新用的view */
      [_tableView.tableHeaderView addSubview:self.refreshHeaaderView];
  }
  return _tableView;
}

然后是对上推以及刷新实现
- (void)scrollViewDidScroll:(UIScrollView )scrollView {
CGFloat tableViewoffsetY = scrollView.contentOffset.y;
/ topView联动 */
if ( tableViewoffsetY>=-64) {
self.topView.frame = CGRectMake(0, 0, SCREEN_WIDTH, 200);

  }else if( tableViewoffsetY < -64){
    
      self.topView.frame = CGRectMake(0, 64 + tableViewoffsetY, SCREEN_WIDTH, 200);
    
  }

  /* 刷新用 */
  if (tableViewoffsetY > -64.0f) {
      self.refreshHeaaderView.type = typeNull;
  }else if (tableViewoffsetY > - 125.0f){
      self.refreshHeaaderView.type = typeWillRefresh;
  }else {
      self.refreshHeaaderView.type = typeRefreshing;
  }
}

末了、有一个小坑注意一下

/* 这里。展示用的topView需要添加在tableView上。不然导致在topView上面上下滑动的时候无法与tableView联动 */
[self.tableView addSubview:self.topView];

ps:关于MJ刷新怎么加、讲真我没做~~（不过我想、不愿意自己实现。可以干脆在tableView上面放一个MJ刷新应该也好使...反正上面有个TopView盖着也看不出来是在上面还有个刷新）

最后

本来想高仿一下、或者加点轮播啊之类的。但感觉功能太多代码太长自己就会懒得写博客了....
　　所以、依旧只是个demo。老板要是能随手来个赞就更好了。
　　https://github.com/kiritoSong/KTAlipayDemo