效果图
bg.gif
1，整体上是一个大的tableview，但是主要是下面的部分，如果第二部分不能左右滑动的话，还是比较好实现的，在第二部分的区头加3个按钮，然后点击切换不同的数据就行了，但是第二个区如果是3个不同的tableview的话，就是外部tableview上面再加tableview，那么上层tableview 就会拦截滑动事件，导致下层的tableview 无法接受到事件了。
首先自定义一个tableview让它实现下面这个方法，返回yes的话，那么它上层的tableview的滑动事件它就能接收到了，
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
return YES;
}
2，第二重点就是：如果仔细观察两个tableview的滑动事件的话，你就知道，外部的tableview滑动的时候，内嵌的tableview是不动的，内嵌的tableview滑动的时候，外部的tabbleview是不动的。因为内外两个tableview都能响应滑动事件，所以要让它们在不同情况下滑动，而两者的切换时靠的通知，判断条件就是自定义的3个切换按钮部分是否接触到导航条的位置。
外部tableview在创建的时候会注册一个通知：
- (void)viewDidLoad {
[super viewDidLoad];
self.automaticallyAdjustsScrollViewInsets = NO;
[self.view addSubview:self.tableView];
self.title = @"商品详情";
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(acceptNotify:) name:@"TheExternalScroll" object:nil];
}
接受到内部tableview 发来的通知，判断该不该滑动。
-(void)acceptNotify:(NSNotification * )notify{
NSString * canScroll = notify.userInfo[@"canScroll"];
if ([canScroll isEqualToString:@"1"]) {
// 内嵌scroll 通知 外部scroll可以滑动了
_canScroll = YES;
}
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGFloat tabOffsetY = [self.tableView rectForSection:1].origin.y;
NSLog(@"tabOffsetY = %lf",tabOffsetY);
CGFloat offsetY = scrollView.contentOffset.y;
_scrollToBottom = _scrollToTop;
if (offsetY>=tabOffsetY) {
// 刚好第二部分的顶部接触到导航条的地步了， 外部的table 固定偏移量，
scrollView.contentOffset = CGPointMake(0, tabOffsetY);
_scrollToTop = YES;
}else
{
_scrollToTop = NO;
}
if (_scrollToTop != _scrollToBottom) {
if (!_scrollToBottom && _scrollToTop) {
// 滑到顶部了，通知内嵌table ，可以滑动了，
[[NSNotificationCenter defaultCenter] postNotificationName:@"TheInsideScroll" object:nil userInfo:@{@"canScroll":@"1"}];
// 自己不能滑动了
_canScroll = NO;
}
if (_scrollToBottom && !_scrollToTop) {
if (!_canScroll) {
scrollView.contentOffset = CGPointMake(0, tabOffsetY);
}
}
}
}
3，因为内嵌3个tableview，所以让它们继承同一个tableview，在根tableview，处理滑动逻辑。
初始化的注册两个通知。
-(instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height) style:0];
self.tableView.delegate = self;
self.tableView.dataSource = self;
[self addSubview:self.tableView];
// 外部table 发来的通知
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(acceptNotihy:) name:@"TheInsideScroll" object:nil];
// 内嵌的table 离开顶部时的通知
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(acceptNotihy:) name:@"TheExternalScroll" object:nil];
}
return self;
}
-(void)acceptNotihy:(NSNotification *)notify
{
if ([notify.name isEqualToString:@"TheInsideScroll"]) {
// 外部table 发来的通知
NSString * canScroll = notify.userInfo[@"canScroll"];
if ([canScroll isEqualToString:@"1"]) {
_canScroll = YES;
self.tableView.showsHorizontalScrollIndicator = YES;
}
}else if ([notify.name isEqualToString:@"TheExternalScroll"])
{
// 内嵌table 发来的通知
self.tableView.contentOffset = CGPointZero;
_canScroll = NO;
self.tableView.showsHorizontalScrollIndicator = NO;
}
}
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
if (!_canScroll) {
[scrollView setContentOffset:CGPointZero];
}
CGFloat offsetY = scrollView.contentOffset.y;
if (offsetY<0) {
// 内嵌的table到顶了；通知外面的table滑动；
[[NSNotificationCenter defaultCenter] postNotificationName:@"TheExternalScroll" object:nil userInfo:@{@"canScroll":@"1"}];
}
}
这种布局模式好多APP里面都会有，还有滑动时候导航条透明效果，其实微博的个人主页也可以这么实现。
Demo地址：https://github.com/zdq1179169386/-Demo；
另外淘宝的分屏显示的，
Demo：https://github.com/zdq1179169386/taobaoProductDetail
