看着像电影选票,一个Excel表格样式的东西

想这个标题想了两分钟也不知道怎么描述,先这样吧。词穷的我还是发个效果的GIF吧~


selectRoom.gif

就是这样的一个东西。左侧和选择的那个可以联系纵向滚动,上面可以和选择的那个横向联系滚动。
主要说一下是怎么实现的。
首先上面和左面都是用scrollerView实现的中间的那个是有个scrollerView的背景和上面放了一个很大的不会滑动的collectionView(滑动靠scrollerView)。
因为collectionView只能纵向或者横向排列。所以上面和左面两个scrollerView的上面的数据一定要有一个是确定长度的,我这个左侧时间是确定的,所以我的collectionView是横向扩展的。
先创建上面和左面两个scrollerView;之后创建中间的,中间的长等于上面的长,中间的高等于左面的高。里面的item也要对应上。这样页面就做出来了。下一步就是让他们联动。
关于让他们联动我的做法非常简单。就是计算当前scrollerView的偏移量。当上面滚动时让中间的x偏移量等于上面的x偏移;当左面滚动中让中间的y偏移量等于左面的y偏移量。当中间滚动时就让上面,左面的偏移量等于中间的。这样是不是很简单。这里中间是可以斜着滚动的,因为我们安卓的原因,我有控制了让它不能斜着滚动,所以上面的例子是没有斜着滚动的。下面就贴一下scrollerView代理里面的代码。

///_topView上面的scrollView;_leftView左面的scrollView;_mainBgView中间的scrollView;_oldMainBgViewOffset上次滑动停止时_mainBgView的偏移量
//====UIScrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
    ///判断是哪个scrollView在滚动,把其他的代理先关上不然会冲突
    if (scrollView == _topView) {
        _mainBgView.delegate = nil;
        _mainBgView.contentOffset = CGPointMake(_topView.contentOffset.x, _mainBgView.contentOffset.y);
    }
    if (scrollView == _leftView) {
        _mainBgView.delegate = nil;
         _mainBgView.contentOffset = CGPointMake(_mainBgView.contentOffset.x, _leftView.contentOffset.y);
    }
    if (scrollView == _mainBgView) {
        CGFloat offx = _mainBgView.contentOffset.x - _oldMainBgViewOffset.x;
        CGFloat offy = _mainBgView.contentOffset.y - _oldMainBgViewOffset.y;
        if (fabs(offx) > fabs(offy)) {//让它不能斜着滑动
            _mainBgView.contentOffset = CGPointMake(_mainBgView.contentOffset.x, _oldMainBgViewOffset.y);
            _topView.delegate = nil;
            _topView.contentOffset = CGPointMake(_mainBgView.contentOffset.x, 0);
        }else{
            _mainBgView.contentOffset = CGPointMake(_oldMainBgViewOffset.x, _mainBgView.contentOffset.y);
            _leftView.delegate = nil;
            _leftView.contentOffset = CGPointMake(0, _mainBgView.contentOffset.y);
        }
    }
}

-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView{
    ///轻扫手势是先不让别的能响应
    if (scrollView == _topView) {
        _mainBgView.userInteractionEnabled = NO;
    }
    if (scrollView == _leftView) {
        _mainBgView.userInteractionEnabled = NO;
    }
    if (scrollView == _mainBgView) {
        _topView.userInteractionEnabled = NO;
        _leftView.userInteractionEnabled = NO;
    }
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    ///轻扫手势结束把代理打开,把用户响应打开记录中间scrollView当前停止时的偏移量
    _mainBgView.delegate = self;
    _topView.delegate = self;
    _leftView.delegate = self;
    _mainBgView.userInteractionEnabled = YES;
    _topView.userInteractionEnabled = YES;
    _leftView.userInteractionEnabled = YES;
    _oldMainBgViewOffset = _mainBgView.contentOffset;
}

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{
    ///轻扫手势结束把代理打开,记录中间scrollView当前停止时的偏移量
    _mainBgView.delegate = self;
    _topView.delegate = self;
    _leftView.delegate = self;
    _oldMainBgViewOffset = _mainBgView.contentOffset;
}

还有一点我把三个scrollView的减速点都设置成了10.这样轻扫手势的减速效果好,嗯我是这样认为的。
就这样了,有什么问题都可以直接和我说。。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。