iOS 自定义 UIScrollerView的PageSize大小

1,867 阅读5分钟

前言: UIScrollerView 设置PageEnable, 每页滚动的偏移量是 UIScrollerView的frame.width的宽度,使用pageEnable控制page每次偏移量只能通过控制 frame解决

##需求:

gif5新文件.gif

###方案1: 使用UIScrollerView 通过代理控制一次滑动的滚动距离实现pageSize效果 根据滑动状态来调整 仿 pageEnable的效果

这里就不多介绍了 直接上代码:(查看了一些资料大部分的实现都基本是基于这段代码)

#pragma mark <UIScrollViewDelegate>
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    _startY = scrollView.contentOffset.y;
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (decelerate) return;
    [selfdealPageEnableWithScrollView:scrollView];
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    [selfdealPageEnableWithScrollView:scrollView];
}
#pragma mark 处理scrollView翻页效果
- (void)dealPageEnableWithScrollView:(UIScrollView *)scrollView{
    static CGFloat halfH;
    halfH = halfH ? halfH : scrollView.bounds.size.height;
    NSLog(@"-----------------%zi%zi%zi",scrollView.contentOffset.y > (_otherPageStartY - halfH),_startY < scrollView.contentOffset.y,_startY < (_otherPageStartY - halfH));
    NSLog(@"*****************%zi%zi%zi",scrollView.contentOffset.y < _otherPageStartY,_startY > scrollView.contentOffset.y,_startY >= _otherPageStartY);
    if (scrollView.contentOffset.y > (_otherPageStartY - halfH +60) &&
        _startY < scrollView.contentOffset.y &&
        _startY < _otherPageStartY
//        _isSecondPage) {//此处还可以用一个BOOL类型来记录是否是处在第一页,代替后面两个判断
        [UIViewanimateWithDuration:0.5animations:^{
            [scrollView setContentOffset:CGPointMake(0,_otherPageStartY)];
        } completion:^(BOOL finished) {
            NSLog(@"进入第二页------->%f",scrollView.contentOffset.y);
        }];
    }
    else if (scrollView.contentOffset.y < (_otherPageStartY -30) &&
             _startY > scrollView.contentOffset.y &&
             _startY >= (_otherPageStartY - halfH)
//        !_isSecondPage){
        [UIViewanimateWithDuration:0.5animations:^{
            [scrollView setContentOffset:CGPointZero];
        } completion:^(BOOL finished) {
            NSLog(@"进入第一页------->%f",scrollView.contentOffset.y);
        }];
    }

####缺点: 效果死板, 每页切换的时候,流畅度不够, 甚至可以说略微的卡顿 , 只支持缓慢拖动, 当手势轻扫的时候甚至不能识别

###方案2: 使用UICollectionView 可能很多人的第一想法就是使用 UICollectionView, 一波操作下来问题还是挺明显

  1. 创建UICollectionView的视图
  2. 主要属性设置: 将frame.width值 小于屏幕的宽
collectionView.pageEnable = YES 
collectionView.clipsToBounds = NO

####优点: 即是有很多的item也能正常显示出来, 并且不会有打的内存资源消耗 ####缺点: cell会被重用和销毁, 一个pageSize中只能显示两个cell, 但是相较于中间放大的这种需求明显是不合适的,不管网那个方向滑动 都有有一个是消失的, 暂时没有想到解决方案, 有兴趣的可以自己去研究下 这里有个链接有兴趣的可以看看

Paging a overflowing collection view

##方案3: 使用UIScroller + pageEnable 实现(个人感觉比较简单方便,推荐)

主要利用系统pageEnable滑动一页,该一页其实就是当前scroller的frame 宽或者高 是frame不是contentSize 不要搞错

#####实现逻辑:

  1. 中间放大两侧缩小显示逻辑:
  • 将UIScrollerView的frame小于屏宽,具体小于多少取决于到时候左右要显示的多少
  • 设置UISCrollerView的pageEnable = YES clipsToBounds = NO;//不裁剪
  • 关于子视图间距 Doem中将最大设置成1 那么最小的就小于1 当视图缩小的时候本身就会产生间距, 该间距取决于视图缩放程度,自己把握吧
  1. 无限滚动实现逻辑: 主要利用scrolle, 将contentSzie设置成很大, 但是其中子视图的创建和item数组有关,通过在滚动过程中不断调整 对应item的frame 值, 来实现无限滚动

主要类介绍

  1. ZPScrollerScaleViewConfig pageSize大小, 缩放大小, 子视图间距大小等配置信息
  2. ZPScrollerScaleView 实现无限滚动和滚动缩放的主要类,所有功能都是在这个类中实现完成
  • 三个重要属性: items: 子视图数组, 将要时间轮播的视图数组. 要求大于2个 defalutIndex:视图展示的收个视图位于数组的下标 currentIndex:当前界面居中显示的下标值(readonly)

ZPScrollerScaleViewConfig: 配置属性:

1. pageSize   //自定义的pagesize大小
2. ItemMaingin //子视图间距
3. scaleMin //最小缩放比
4. scaleMax //最大缩放比 建议设置为1 , 当大于1的时候 子视图会产生缩放导致失真

ZPScrollerScaleView

  • 设置默认显示 当默认值较小和较大的时候制造循环轮播条件
/**当默认值较小和较大的时候制造循环轮播条件*/
- (void)configDefult:(NSInteger)defultIndex{
    NSInteger currentIndex = 0;
    NSInteger needMoveIndex = 0;
    NSInteger currentIndex2 = 0;
    NSInteger needMoveIndex2 = 0;
    CGFloat shouldOffset = 0;
    if(_defalutIndex <= 1){ //将最大和第二大的视图调整位置
         currentIndex = 0;
         needMoveIndex = self.items.count -1;
         currentIndex2 = self.items.count -1;
         needMoveIndex2 = self.items.count -2;
        shouldOffset = -self.config.pageSize.width;
    }else if(_defalutIndex >= self.items.count -2){//将最小和第二小的视图调整位置
         currentIndex = self.items.count -1;
         needMoveIndex = 0;
         currentIndex2 = 0;
         needMoveIndex2 = 1;
        shouldOffset = self.config.pageSize.width;

    }
    
    UIView * currentView = [self.contentView viewWithTag:BaseTag + currentIndex];
    UIView * needMoveView = [self.contentView viewWithTag:BaseTag + needMoveIndex];
    needMoveView.transform = CGAffineTransformMakeScale(self.config.scaleMin, self.config.scaleMin);
    needMoveView.center = CGPointMake(currentView.center.x + shouldOffset, needMoveView.center.y);
   
    
    UIView * currentView2 = [self.contentView viewWithTag:BaseTag + currentIndex2];
    UIView * needMoveView2 = [self.contentView viewWithTag:BaseTag + needMoveIndex2];
    needMoveView2.transform = CGAffineTransformMakeScale(self.config.scaleMin, self.config.scaleMin);
    needMoveView2.center = CGPointMake(currentView2.center.x + shouldOffset, needMoveView2.center.y);
}
  • 添加需要参与轮播的子View
- (void)setItems:(NSArray<UIView *> *)items{
    _items = items;
    
    CGSize pageSize = self.config.pageSize;
    
    //将视图摆在中间, 并且消除求余误差
    CGFloat centerIetm = self.contentView.contentSize.width * 0.5;
    NSInteger pageIndex = centerIetm/pageSize.width;
    NSInteger pageOffsetIndex = pageIndex % self.items.count;
    centerIetm = centerIetm - pageOffsetIndex * pageSize.width;
    
    for(int i =0; i < items.count;i++){
        UIView * view = items[I];
        view.tag = BaseTag + I;
        view.frame = CGRectMake(i * pageSize.width + self.config.ItemMaingin + centerIetm, 0, pageSize.width-self.config.ItemMaingin*2, pageSize.height);
        [_contentView addSubview:view];
        view.transform = CGAffineTransformMakeScale(self.config.scaleMin, self.config.scaleMin);
    }
    //这是默认显示
    UIView * view = [self.contentView viewWithTag:self.defalutIndex+BaseTag];
    view.transform = CGAffineTransformMakeScale(self.config.scaleMax, self.config.scaleMax);
    [self.contentView setContentOffset:CGPointMake(centerIetm + pageSize.width*self.defalutIndex, 0)];
    [self configDefult:self.defalutIndex];
}

无限滚动实现代码:

- (void)itemViewStartAnimationWithContentOffset:(CGFloat)contentOffsetX{
    
    CGFloat pageSizeW = [UIScreen mainScreen].bounds.size.width - self.pageMagin*2;
    NSInteger pageIndex = contentOffsetX/pageSizeW;
    
    CGFloat scrale = (contentOffsetX/pageSizeW - pageIndex);
    if(scrale >= 0.99){
        [self exchangeItemViewPosition]; //完成一次显示, 调整子视图位置
    }
    if(scrale <= 0){
        return;
    }
    
    //视图(左)
    NSInteger currentIndex = (pageIndex%self.items.count);
    NSInteger nextIndex = ((currentIndex+1)>(self.items.count-1)?0:(currentIndex+1));;
    
    //视图缩放值(左)
    CGFloat scraleCurrent = self.config.scaleMax - (self.config.scaleMax-self.config.scaleMin)*scrale;
    CGFloat scraleNext = (self.config.scaleMax-self.config.scaleMin) *scrale +self.config.scaleMin;
    
    if (contentOffsetX < _lastContentOffset ){ //向右
        currentIndex = currentIndex +1 >= self.items.count?0:currentIndex +1;
        nextIndex = ((currentIndex-1)<0?self.items.count-1:(currentIndex-1));
        scraleCurrent = (self.config.scaleMax-self.config.scaleMin) *scrale +self.config.scaleMin;
        scraleNext = self.config.scaleMax - (self.config.scaleMax-self.config.scaleMin)*scrale;
    }
    
    
    UIView * subViewCurrent = [self.contentView viewWithTag:currentIndex+BaseTag];
    subViewCurrent.transform = CGAffineTransformMakeScale( scraleCurrent,  scraleCurrent);
    UIView * subViewNext = [self.contentView viewWithTag:nextIndex+BaseTag];
    subViewNext.transform = CGAffineTransformMakeScale(scraleNext,  scraleNext);
    
    
}
  1. 当scrollerView快速滚动的时候, 此时获取contentOffset是不连续的, 如过根据偏移量连续去处理滚动比例, 会导致缩放比例乃至视图显示不正确,此时采用_lastOffsetX 记录上一次的滚动, 与当前偏移量比较并+1加到当前偏移量,每次+1都会执行一次滚动计算,耗点性能但是丝般流畅,通过调试工具测试对性能影响不大.
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    
    //首次显示
    if (_lastOffsetX == 0) {
        [self itemViewStartAnimationWithContentOffset:scrollView.contentOffset.x];
        _lastOffsetX = scrollView.contentOffset.x;
        return;
    }
    if(_lastOffsetX  > scrollView.contentOffset.x){ //向左滑动
        
        for (CGFloat i = _lastOffsetX; i >= scrollView.contentOffset.x; i--) {
            [self itemViewStartAnimationWithContentOffset:i];
        }
        
    }else{//向右滑动
        for (CGFloat i = _lastOffsetX; i < scrollView.contentOffset.x; i++) {
            [self itemViewStartAnimationWithContentOffset:i];
        }
    }
    _lastOffsetX = scrollView.contentOffset.x;
}
  1. 判断滚动一页完成, 调整子视图位置
- (void)exchangeItemViewPosition{
    self.pageIndex = self.contentView.contentOffset.x/([UIScreen mainScreen].bounds.size.width  - self.pageMagin*2);
    CGSize pageSize = self.config.pageSize;
    self.contentView.contentSize  = CGSizeMake(self.contentView.contentSize.width + pageSize.width, pageSize.height);
    if (self.contentView.contentOffset.x < _lastContentOffset ){
        //向右
        NSInteger currentIndex = (self.pageIndex%self.items.count);
        NSInteger needMoveIndex = currentIndex-2 < 0?self.items.count+(currentIndex-2):currentIndex-2;
        UIView * subView = [self.contentView viewWithTag:BaseTag + needMoveIndex];
        subView.transform = CGAffineTransformMakeScale(self.config.scaleMin, self.config.scaleMin);
        subView.center = CGPointMake((self.pageIndex-2) * pageSize.width+pageSize.width/2, subView.center.y);

    }else{
        //向左
        NSInteger currentIndex = (self.pageIndex%self.items.count);
        NSInteger needMoveIndex = currentIndex+2 > self.items.count-1?(currentIndex+2 -self.items.count):currentIndex+2;
        UIView * subView = [self.contentView viewWithTag:BaseTag + needMoveIndex];
        subView.transform = CGAffineTransformMakeScale(self.config.scaleMin, self.config.scaleMin);
        subView.center = CGPointMake((self.pageIndex+2) * pageSize.width+pageSize.width/2, subView.center.y);

    }
}

##案例Dome: github.com/ZPP506/ZPSc…