想这个标题想了两分钟也不知道怎么描述,先这样吧。词穷的我还是发个效果的GIF吧~
![](https://img.haomeiwen.com/i728456/1175b7f5b5084ff0.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.这样轻扫手势的减速效果好,嗯我是这样认为的。
就这样了,有什么问题都可以直接和我说。。
网友评论