需求效果圖:
1.gif
首先按可滑動的分為三個組成部分,右下角的圖片可以自由方向滾動無疑用scrollView實現很容易;
點擊刪除按鈕可以刪掉對應的車源信息,并且還帶有動畫效果,用tableView或者collectionView可以實現;
于是乎,我這樣搭建:
Snip20161114_3.png
① 信息展示列表的邏輯
1、中間大圖—scrollView添加collectionView,設置userInteractionEnabled為false,
這樣手勢會直接作用在父視圖scrollView上;
2、每一個item添加tableView,作為展示列表;
3、scrollView.contentSize = collectionView.bounds.size
4、collectionView.flowLayout.itemSize = 屏幕寬/3,scrollView.contentSize
② 刪除cell需要改變scrollView.contentSize
_detailInfoCount--; // 必須對列表數量(numberOfItems)減1,不然刪除會報錯
[_topIconListView deleteItemsAtIndexPaths:@[indexPath]];
[_detailCollectionView deleteItemsAtIndexPaths:@[indexPath]];
_detailScrollView.contentSize = CGSizeMake(_detailInfoCount*kAverageTableViewWidth, numberOfRows*rowHight*numberOfSections+numberOfSections*heightForHeaderInSection);
③ 判斷拖動的是哪個view
定義三個View的tag枚舉值
typedef enum : NSUInteger {
TitleTableViewTag ,
DetailScrollViewTag ,
TopIconListViewTag ,
} currentScrollViewTag;
// 在開始拖動的時候記錄tag
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
// 記錄上一個拖動的view來確保再次滑動是有慣性效果
_beforeScrollViewTag = _currentScrollViewTag;
_currentScrollViewTag = scrollView.tag;
}
④ 聯動的核心代碼:
/**
判斷拖動的view的tag進行聯動
*/
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
if (_currentScrollViewTag == TitleTableViewTag) {
CGFloat offSetX = _beforeScrollViewTag == TopIconListViewTag ? _topIconListView.contentOffset.x : _detailScrollView.contentOffset.x;
_detailScrollView.contentOffset = CGPointMake(offSetX, _titleTableView.contentOffset.y);
_topIconListView.contentOffset = CGPointMake(offSetX, 0);
return;
}
if (_currentScrollViewTag == DetailScrollViewTag) {
_titleTableView.contentOffset = CGPointMake(0, _detailScrollView.contentOffset.y);
_topIconListView.contentOffset = CGPointMake(_detailScrollView.contentOffset.x, 0);
return;
}
if (_currentScrollViewTag == TopIconListViewTag) {
CGFloat offSetY = _beforeScrollViewTag == TitleTableViewTag ? _titleTableView.contentOffset.y : _detailScrollView.contentOffset.y;
_detailScrollView.contentOffset = CGPointMake(_topIconListView.contentOffset.x, offSetY);
_titleTableView.contentOffset = CGPointMake(0, _detailScrollView.contentOffset.y);
return;
}
}
聯動的時候如改變其他view的contentOffset.x就不要去改變contentOffset.y,這樣就可以保證慣性效果
此demo做了tableView性能優化(按需加載、繪制圓角頭像等)
demo地址: https://github.com/qiven/ScorllContrastView
目前展示列表中的tableView無法做到按需加載,歡迎有此需求的朋友一起交流!