iOS开发中实现UIScrollView嵌套UITableView,且有悬停效果

释放双眼,带上耳机,听听看~!

前言:

力图用最简洁清晰的代码实现我们想要的效果。

先看一个效果图:

1.一个TableView.gif

问:如何实现这个效果图想要的效果呢?
答:简单,直接使用一个UITableView,上方是一个tableHeaderView,UITableView的类型使用UITableViewStyleGrouped,效果图中的红色视图作为tableview的section。

再看一个效果图:

2.两个Table.gif

问:如何实现这个效果图想要的效果呢?
答:…

实现思路:

最底层使用一个UIScrollView,上方蓝色视图使用一个简单的UIView,下方使用一个UIScrollView,该ScrollView上方放两个UITableView和两个简单View(红色和黄色的视图)

核心思想:

在最开始滑动的时候底部的两个UITableView不能进行滑动,当最底层的UIScrollView的偏移量达到一定偏移的时候即红黄两个视图的顶部和navigationBar的底部重合的时候最底层的UIScrollView不再发生偏移,此时底部的两个UITableView可以进行滑动。而当两个UITableView的偏移量变成0的时候两个UITableView不再发生偏移,而此时最底层的UIScrollView再度能发生偏移。
看代码:

  #pragma mark - UIScrollViewDelegate  (核心代码)
  - (void)scrollViewDidScroll:(UIScrollView *)scrollView{
      CGFloat contentOffsetY = scrollView.contentOffset.y;
      NSLog(@"scrollView的偏移量:===%f", contentOffsetY);
      CGFloat maxOffsetY = 200 - 64;  // 简单的代码,没有适配      iphoneX
      if (contentOffsetY > maxOffsetY) {
          [scrollView setContentOffset:CGPointMake(0,       maxOffsetY)]; //  设置最大偏移
          [[NSNotificationCenter defaultCenter]       postNotificationName:@"contentCanMove" object:nil]; // 告诉底部      内容视图能进行滑动了
          canMove = NO;   // 自己不能滑动了
      }
      if (canMove == NO) {
          [scrollView setContentOffset:CGPointMake(0, maxOffsetY)];
      }
  }

  // 核心代码
  - (void)scrollViewDidScroll:(UIScrollView *)scrollView{
      if (canMove == NO) {
          [scrollView setContentOffset:CGPointMake(0, 0)];
      }
      CGFloat offsetY = scrollView.contentOffset.y;
      if (offsetY <= 0) {
          [[NSNotificationCenter defaultCenter] postNotificationName:@"OtherCanMove" object:nil];  // 告诉其他滚动视图能滚动了
          canMove = NO;   // 自己不能滑动了
      }
  }

demo地址:https://gitee.com/liangsenliangsen/uiscrollview_nesting.git
再看下别人写的效果更好的效果图和demo:
效果图:

展示图.gif


demo地址:
https://gitee.com/liangsenliangsen/uiscroll_hovering.git
本篇文章到这里就结束了,愿大家加班不多工资多,男同胞都有女朋友,女同胞都有男朋友。😊

 

人已赞赏
iOS文章

iOS巧妙实现悬浮tableviewHeaderView方法

2019-10-28 19:25:50

iOS文章

iOS记录一段代码,判断scrollView向上滚动还是向下滚动

2019-10-28 22:32:06

个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索