蘑菇街商品详情布局

效果图
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

推荐阅读更多精彩内容