Objective-C
Need help with UITableViewLinkageDemo?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.
HawkEleven

Description

iOS采用UITableView来实现Excel、课程表、汽车之家车辆参数对比的上下左右联动效果

229 Stars 48 Forks 26 Commits 4 Opened issues

Services available

Need anything else?

UITableViewLinkageDemo

iOS采用UITableView来实现Excel、课程表、汽车之家车辆参数对比的上下左右联动效果。

引言

2016年12月份在项目中遇到了这种需求,当时能参照的效果只有汽车之家,且没有开源的项目供参考,因此自己摸索了这种实现方式。早想将本方案呈现给大伙以供参考,无奈项目一直赶进度,因此拖到了现在。提笔之时发现其他网友已经贡献了类似项目的实现思路,那么,大家可以综合对比,撷取精华部分为自己所用。

(备注:感谢flyOfYW和YearRen的促使,使我下定决心重构,摒弃之前复杂的设计)

需求描述

列表可以左右滑动,上下滚动,且能动态增加删除列表个数。

列表.jpeg

效果如下

列表左右上下滑动.gif

方案实现(2018-08-14重构)

1)视图有两部分组成:左侧ConfigurationView和右侧CompareDetailView

2)CompareDetailView在视图底层,宽度为绿色区域宽,核心为UITableView,添加到UIScrollview上面,这样就可实现上下和左右滑动;

3)ConfigurationView在视图顶层,宽度为屏幕宽,核心为UITableview,且tableviewCell宽度为红色区域宽度。

注意点

ConfigurationView在CompareDetailView顶部是因为要显示图中灰色sectionHeader, 此时CompareDetailView被遮盖且不能交互。因此将ConfigurationView里面的视图设置为clearColor,还要重写ConfigurationView的 - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event 方法,来设置交互区域:图中红色区域。

- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
    if (CGPathIsEmpty(self.path.CGPath)) {
        return YES;
    } else if (CGPathContainsPoint(self.path.CGPath, nil, point, nil)) {
        return YES;
    } else {
        return NO;
    }
}
// 设置tableView的交互区域
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, ITEM_WIDTH, self.bounds.size.height)];
self.path = path;

结尾

本Demo是从项目中拆分整理而来,如有问题欢迎指正,若对你有所帮助,还望star支持下~

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.