多個滾動視圖流暢聯動實現

需求效果圖:
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無法做到按需加載,歡迎有此需求的朋友一起交流!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容