美文网首页
多个滚动视图流畅联动实现

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

作者: OneKeyV | 来源:发表于2016-11-14 22:01 被阅读0次
    需求效果图:
    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无法做到按需加载,欢迎有此需求的朋友一起交流!

    相关文章

      网友评论

          本文标题:多个滚动视图流畅联动实现

          本文链接:https://www.haomeiwen.com/subject/qwcluttx.html