引言

2016年12月份在項(xiàng)目中遇到了這種需求，當(dāng)時(shí)能參照的效果只有汽車之家，且沒(méi)有開(kāi)源的項(xiàng)目供參考，因此自己摸索了這種實(shí)現(xiàn)方式。早想將本方案呈現(xiàn)給大伙以供參考，無(wú)奈項(xiàng)目一直趕進(jìn)度，因此拖到了現(xiàn)在。提筆之時(shí)發(fā)現(xiàn)其他網(wǎng)友已經(jīng)貢獻(xiàn)了類似項(xiàng)目的實(shí)現(xiàn)思路，那么，大家可以綜合對(duì)比，擷取精華部分為自己所用。

需求描述

列表可以左右滑動(dòng)，上下滾動(dòng)，且能動(dòng)態(tài)增加刪除列表個(gè)數(shù)。

列表.jpeg

效果如下

列表左右上下滑動(dòng).gif

方案實(shí)現(xiàn)(2018-08-14重構(gòu))

1）視圖有兩部分組成：左側(cè)ConfigurationView和右側(cè)CompareDetailView；

2）CompareDetailView在視圖底層，寬度為綠色區(qū)域?qū)?，核心為UITableView，添加到UIScrollview上面，這樣就可實(shí)現(xiàn)上下和左右滑動(dòng)；

3）ConfigurationView在視圖頂層，寬度為屏幕寬，核心為UITableview，且tableviewCell寬度為紅色區(qū)域?qū)挾取?/p>

注意點(diǎn)

ConfigurationView在CompareDetailView頂部是因?yàn)橐@示圖中灰色sectionHeader，
此時(shí)CompareDetailView被遮蓋且不能交互。因此將ConfigurationView里面的視圖設(shè)置為clearColor，還要重寫ConfigurationView的 - (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event 方法，來(lái)設(shè)置交互區(qū)域：圖中紅色區(qū)域。

- (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;
    }
}

// 設(shè)置tableView的交互區(qū)域
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, ITEM_WIDTH, self.bounds.size.height)];
self.path = path;

結(jié)尾

本Demo是從項(xiàng)目中拆分整理而來(lái)，如有問(wèn)題歡迎指正，若對(duì)你有所幫助，還望star支持下~
Demo下載地址UITableViewLinkage