博客> iOS开发实践篇--UITableview嵌套UITableView案例实践(仿淘宝商品详情页实现)
iOS开发实践篇--UITableview嵌套UITableView案例实践(仿淘宝商品详情页实现)
2019-03-22 20:51 评论:0 阅读:246 月华七子
ios 程序员 开发

一、案例演示

IOS中提供的UITableView功能非常强大,section提供分组,cell提供显示,几乎可以应付绝大部分场景。最近想模仿旧版的淘宝的商品详情页(最新的淘宝详情页商品详情和图文详情是两个页面)写一个Demo,后来发现单纯使用UITableView来布局是比较困难的。因为旧版的淘宝详情页中,最外层的View肯定是一个UITableView,但是内层的Tab中,图文介绍、商品详情和评价三个Tab对应的内容非常丰富,如果你把这三块内容放在一个section中的话,将导致数据组织非常困难,并且UI的灵活度也大大降低。所以最后准备尝试使用UITableView嵌套UITableView的方式来组织UI,最外层是一个UITableView,三个Tab其实是一个横向ScrollView,这个ScrollView里面包含三个UITableView。并且Tab中的内容采用动态可配置话的方式生成(下面详解)。实现的效果如下:

1.gif

二、项目详解

2.1、大体思路

使内层的UITableView(TAB栏里面)和外层的UITableView同时响应用户的手势滑动事件。当用户从页面顶端从下往上滑动到TAB栏的过程中,使外层的UITableView跟随用户手势滑动,内层的UITableView不跟随手势滑动。当用户继续往上滑动的时候,让外层的UITableView不跟随手势滑动,让内层的UITableView跟随手势滑动。反之从下往上滑动也一样。

如上图所示,外层的section0为价格区,可以自定义。section1为sku区,也可以自定义。section2为TAB区域,该区域采用Runtime反射机制,动态配置完成。

这是一个我的iOS交流群:624212887,群文件自行下载,不管你是小白还是大牛热烈欢迎进群 ,分享面试经验,讨论技术, 大家一起交流学习成长!希望帮助开发者少走弯路。——点击:加入

2.2、具体实现

2.2.1、YXIgnoreHeaderTouchTableView

我们顶部的图片其实是覆盖在外层UITableView的tableHeaderView的下面,我们把tableHeaderView设置为透明。这样实现是为了方便我们在滑动的时候,动态的改变图片的宽高,实现列表头部能够动态拉伸的效果。但是我们对于UITableView不做处理的时候,该图片是无法响应点击事件的,因为被tableHeaderView提前消费了。所以我们要不让tableHeaderView不响应点击事件。我们在YXIgnoreHeaderTouchTableView的实现文件中重写以下方法。

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
    if (self.tableHeaderView && CGRectContainsPoint(self.tableHeaderView.frame, point)) {
        return NO;
    }
    return [super pointInside:point withEvent:event];
}

2.2.2、 YXIgnoreHeaderTouchAndRecognizeSimultaneousTableView

该文件继承于YXIgnoreHeaderTouchTableView,除此之外,主要是为了让外层的UITableView能够显示外层UITableView的滑动事件。我们需要实现以下代理方法。

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
    return YES;
}

2.2.3、YXTabView

该文件是TAB区域主文件,显示的标题的内容都是通过以下字典动态生成。

if(section==2){
        NSArray *tabConfigArray = @[@{
            @"title":@"图文介绍",
            @"view":@"PicAndTextIntroduceView",
            @"data":@"图文介绍的数据",
            @"position":@0
        },@{
            @"title":@"商品详情",
            @"view":@"ItemDetailView",
            @"data":@"商品详情的数据",
            @"position":@1
        },@{
            @"title":@"评价(273)",
            @"view":@"CommentView",
            @"data":@"评价的数据",
            @"position":@2
        }];
        YXTabView *tabView = [[YXTabView alloc] initWithTabConfigArray:tabConfigArray];
        [cell.contentView addSubview:tabView];
}

title:TAB每个Item的标题。

view:TAB每个Item的内容。

data:TAB每个Item内容渲染需要的数据。

position:TAB的位置。从0开始。

该TAB其实是有YXTabTitleView(标题栏)和一个横向的ScrollView(内层多个UITableView的容器)构成。内层多个UITableView通过以上配置文件动态生成。如下如示:

for (int i=0; i<tabConfigArray xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed>=tabOffsetY) {
        scrollView.contentOffset = CGPointMake(0, tabOffsetY);
        _isTopIsCanNotMoveTabView = YES;
    }else{
        _isTopIsCanNotMoveTabView = NO;
    }
    if (_isTopIsCanNotMoveTabView != _isTopIsCanNotMoveTabViewPre) {
        if (!_isTopIsCanNotMoveTabViewPre && _isTopIsCanNotMoveTabView) {
            //NSLog(@"滑动到顶端");
            [[NSNotificationCenter defaultCenter] postNotificationName:kGoTopNotificationName object:nil userInfo:@{@"canScroll":@"1"}];
            _canScroll = NO;
        }
        if(_isTopIsCanNotMoveTabViewPre && !_isTopIsCanNotMoveTabView){
            //NSLog(@"离开顶端");
            if (!_canScroll) {
                scrollView.contentOffset = CGPointMake(0, tabOffsetY);
            }
        }
    }
}

三、完整源码下载地址

这是一个我的iOS交流群:624212887,群文件自行下载,不管你是小白还是大牛热烈欢迎进群 ,分享面试经验,讨论技术, 大家一起交流学习成长!希望帮助开发者少走弯路。——点击:加入

如果觉得对你还有些用,就关注小编+喜欢这一篇文章。你的支持是我继续的动力。

下篇文章预告:iOS中的几种数据存储方式

文章来源于网络,如有侵权,请联系小编删除。

收藏
0
sina weixin mail 回到顶部