1. 程式人生 > >iOS UIScrollView無限迴圈滾動和手動滾動

iOS UIScrollView無限迴圈滾動和手動滾動

專案中的引導頁或者主頁經常會讓展示一個滾動的檢視,這種簡單的實現大家應該都會,就是一個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];
}