多个滚动视图流畅联动实现

需求效果图:
多个滚动视图流畅联动实现_第1张图片
1.gif

首先按可滑动的分为三个组成部分,右下角的图片可以自由方向滚动无疑用scrollView实现很容易;
点击删除按钮可以删掉对应的车源信息,并且还带有动画效果,用tableView或者collectionView可以实现;
于是乎,我这样搭建:

多个滚动视图流畅联动实现_第2张图片
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无法做到按需加载,欢迎有此需求的朋友一起交流!

你可能感兴趣的:(多个滚动视图流畅联动实现)