蘑菇街商品详情布局

效果图

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