Code Monkey home page Code Monkey logo

uitableviewlinkagedemo's Introduction

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支持下~

uitableviewlinkagedemo's People

Contributors

hawkeleven avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.