iOS UIScrollView无限循环滚动和手动滚动

1 篇文章 0 订阅
1 篇文章 0 订阅

项目中的引导页或者主页经常会让展示一个滚动的视图,这种简单的实现大家应该都会,就是一个UIScrollView加上一个UIPageControl来实现,但是当你的经理会提一些新的需求,要求你实现自动滚动并且也能手动滚动的时候,你就需要自定义来实现了。

实现原理

当UIScrollView展示一张图片和两张图片的时候,我就不说了,就按正常的写法往scrollView上添加一个或者两个UIImageView就可以了。我主要介绍一下三张或者三张以上的图片展示。

三张或者三张以上的图片,展示的时候都是只有三个视图来展示,firstImageView、middleImageView、lastImageView,当前图片的上一张图片视图、当前图片视图、当前图片的下一张图片视图,然后通过改变UIPageControl的currentPage来实现图片的变换。其实你只要搞清楚当前要展示的是哪张图片,并且把当前展示第一张或者最后一张的时候逻辑写明白就可以了。

举个例子,假如你需要展示image0、image1、image2、image3四张图片,当currentPage = 0 也就是第一张图片的时候,它的上一张图片是数组里的最后一个元素,下一张图片是数组的第二个元素;当currentPage = 3 也就是最后一张图片的时候,它的上一张图片是数组的倒数第二个元素,下一张图片是数组的首元素。通过3个imageView即可实现上述功能。

代码

第一步:初始化一个view,将UIScrollView和UIPageControl添加在view上,并且从外部传入你要展示的图片数组

#pragma mark -外部传入imageViewAry
-(void)setImageViewAry:(NSMutableArray *)imageViewAry
{
    if (imageViewAry.count > 0) {
        _imageViewAry = imageViewAry;
        _currentPage = 0; //默认为第0页
        _pageControl.numberOfPages = _imageViewAry.count;
        //当 imageViewAry 不为空的再刷新数据,不然会造成 程序崩溃
        [self reloadData];
    }
}

第二步:刷新你初始化的view界面,分别根据个数为1、2、3及以上的时候做判断,下面贴一下三张图片及以上的情况

#pragma mark 刷新view页面
-(void)reloadData
{
    [_firstView removeFromSuperview];
    [_middleView removeFromSuperview];
    [_lastView removeFromSuperview];

    //从数组中取到对应的图片view加到已定义的三个view中
        _scrollView.contentSize = CGSizeMake(_viewWidth * 3, _viewHeight);
        if (_currentPage==0) {
            _firstView = [_imageViewAry lastObject];
            _middleView = [_imageViewAry objectAtIndex:_currentPage];
            _lastView = [_imageViewAry objectAtIndex:_currentPage+1];
        }
        else if (_currentPage == _imageViewAry.count-1)
        {
            _firstView = [_imageViewAry objectAtIndex:_currentPage-1];
            _middleView = [_imageViewAry objectAtIndex:_currentPage];
            _lastView = [_imageViewAry firstObject];
        }
        else
        {
            _firstView = [_imageViewAry objectAtIndex:_currentPage-1];
            _middleView = [_imageViewAry objectAtIndex:_currentPage];
            _lastView = [_imageViewAry objectAtIndex:_currentPage+1];
        }    
    //设置三个view的frame,加到scrollview上    
    //显示中间页
        _firstView.frame = CGRectMake(0, 0, _viewWidth, _viewHeight);
        _middleView.frame = CGRectMake(_viewWidth, 0, _viewWidth, _viewHeight);
        _lastView.frame = CGRectMake(_viewWidth*2, 0, _viewWidth, _viewHeight);
        [_scrollView addSubview:_firstView];
        [_scrollView addSubview:_middleView];
        [_scrollView addSubview:_lastView];

        _pageControl.currentPage = _currentPage;
        _scrollView.contentOffset = CGPointMake(_viewWidth, 0);
}

第三步:在UIScrollView停止滑动的代理方法里面,添加手动滑动,并添加一个计时器,当4秒钟没有手动滚动的时候,让UIScrollView实现自动滚动

#pragma mark -scrollview停止滑动
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
        _scrollView.scrollEnabled = YES;
        //手动滑动时候暂停自动替换
        [_autoScrollTimer invalidate];
        _autoScrollTimer = nil;
        _autoScrollTimer = [NSTimer scheduledTimerWithTimeInterval:4 target:self selector:@selector(autoShowNextImage) userInfo:nil repeats:YES];

        //得到当前页数
        float x = _scrollView.contentOffset.x;
        if (x<=0) {
            if (_currentPage-1<0) {
                _currentPage = _imageViewAry.count-1;
            }else{
                _currentPage --;
            }
         }
         //往后翻
         if (x>=_viewWidth*2) {
             if (_currentPage==_imageViewAry.count-1) {
                    _currentPage = 0;
             }else{
                 _currentPage ++;
             }
          }

          [self reloadData];
}

自动滚动展示下一页的方法:

#pragma mark -展示下一页
-(void)autoShowNextImage
{
        if (_currentPage == _imageViewAry.count-1) {
            _currentPage = 0;
        }else{
            _currentPage ++;
        }        
        [self reloadData];
}

完整代码下载链接,请点击这里

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值