UIScrollview實現左右循環滑動和自動輪播

這個Demo的最初的想法是我從網上的一個簡單的例子中獲取的,加以修改,成了現在的樣子。

我們在很多時候需要一個輪播圖,比如項目中廣告的輪播。能讓scrollview自動滾動,這不是什麼困難的事,但是如果能讓scrollview朝一個方法循環播放下去,這費了我不少功夫。另外,這個demo中輪播的圖片是5張,而scrollview的大小隻能放下三張圖片,所以這是一個少scrollview版的輪播圖。爲什麼要這麼做呢,並非自找麻煩,而是有些時候如果需要播放的圖片特別多,比如1000張,那我們也要把scrollview的contentSize設爲1000張圖片的寬度嗎?沒有必要。除此之外,我還在demo中將自動輪播和手動滑動結合起來,使輪播圖在自動輪播的同時,還可以響應用戶交互。

如果代碼有需要改進或者不對的地方,還望大家不吝賜教,謝謝!

#import "RandPicViewController.h"
#import "UIImageView+AFNetworking.h"

@interface RandPicViewController ()
{
    NSTimer * _timer;
    UIScrollView * _randPicScroll;
    UIPageControl * _pageControl;
    NSInteger _currentPage;
    NSMutableArray * _showImageviewArray;
}
@end

@implementation RandPicViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    // Do any additional setup after loading the view.
    _showImageviewArray = [[NSMutableArray alloc] initWithCapacity:5];
    [self addRandPicScroll];
    
}
- (void)addRandPicScroll
{
    _randPicScroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 100, 320, 300)];
    _randPicScroll.backgroundColor = [UIColor whiteColor];
    _randPicScroll.contentSize = CGSizeMake(320*3, 300);
    _randPicScroll.pagingEnabled = YES;
    
    _currentPage = 1;
    [self.view addSubview:_randPicScroll];
    [self addImage];
    [self addPageControl];
}
- (void)addPageControl
{
    _pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(35, 380, 250, 20)];;
    _pageControl.numberOfPages = 5;
    _pageControl.currentPage = 0;
    [self.view addSubview:_pageControl];
    
    [self addTimer];
}
- (void)addImage
{
    //五張圖片的URL
    NSMutableArray * UrlArray = [[NSMutableArray alloc] initWithObjects:@"http://d.hiphotos.baidu.com/ting/pic/item/342ac65c1038534395de43659013b07eca808865.jpg",@"http://b.hiphotos.baidu.com/ting/pic/item/9213b07eca8065388833704c94dda144ac348290.jpg",@"http://d.hiphotos.baidu.com/ting/pic/item/30adcbef76094b36e52e07b2a0cc7cd98d109d34.jpg",@"http://b.hiphotos.baidu.com/ting/pic/item/14ce36d3d539b600c81f5cedea50352ac75cb793.jpg",@"http://b.hiphotos.baidu.com/ting/pic/item/a50f4bfbfbedab64f92080b9f536afc379311e7d.jpg", nil];
    
    // 創建了5個imageview裝入showImageviewArray中,在展示圖片時取出其中三個。也可以將圖片地址存入數組,取出三張圖片之後,再創建UIImageview。
    
    for(int i = 0;i < 5;i++){
        UIImageView * imageView = [[UIImageView alloc] initWithFrame:CGRectMake(320*i, 0, 320, 300)];
        [imageView setImageWithURL:[NSURL URLWithString:UrlArray[i]]];
        [_showImageviewArray addObject:imageView];
    }
    
    [_randPicScroll addSubview:[_showImageviewArray objectAtIndex:0]];
    [_randPicScroll addSubview:[_showImageviewArray objectAtIndex:1]];
    [_randPicScroll addSubview:[_showImageviewArray objectAtIndex:2]];
    [_randPicScroll setContentOffset:CGPointMake(320, 0)];
    
    _randPicScroll.delegate = self;
}

//開始滑動scrollview觸發此方法。

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
{
  //  當開始滑動scrollview時,關閉timer
    
    if(scrollView == _randPicScroll){
        [_timer invalidate];
    }
}

// scrollview滾動過程中觸發此方法。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //當scrollview滑動到第一張和最後一張時,都需要重新選取展示的三張圖片
    
    if(scrollView == _randPicScroll){
        int x = _randPicScroll.contentOffset.x;
        if(x == 2* _randPicScroll.frame.size.width){
            
            //如果滑動至最後一張,則必定是從左到右滑動,將滑動之前的currentpage進行修改,重新選取當前添加在scrollview上的三張圖。
            
            _currentPage = [self validateCurrentPage:_currentPage + 1];
            [self refreshScrollview];
        }else if (x == 0){
            
            //如果滑動至第一張,則必定是從右到左滑動,將滑動之前的currentpage修改,重新選取當前添加在scrollview上的三張圖。
            
            _currentPage = [self validateCurrentPage:_currentPage - 1];
            [self refreshScrollview];
        }
    }
}

// 修改currentPage值。

- (NSInteger)validateCurrentPage:(NSInteger)value
{
    //滑動之後的圖片如果超出了展示圖片數組的右邊界,則從第一張開始選取,若超出了左邊界,即<0,則返回至最後一張選取。
    
    if(value == _showImageviewArray.count){
        value = 0;
    }else if (value == -1){
        value = _showImageviewArray.count - 1;
    }
    return value;
}

//currentpage修改之後,重新獲取三組圖片,並修改scrollview的contentOffSet。

- (void)refreshScrollview
{
    //移除當前scrollview上面的imageview
    
    NSArray * subviews = _randPicScroll.subviews;
    if(subviews.count != 0){
        [subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];
    }
    
    //移除之後根據當前的currentpage重新選取一組imageview添加到scrollview上。
    
    UIImageView * currentImageview = [_showImageviewArray objectAtIndex:_currentPage];
    UIImageView * preImageview = [_showImageviewArray objectAtIndex:[self validateCurrentPage:_currentPage - 1]];
    UIImageView * nextImageview = [_showImageviewArray objectAtIndex:[self validateCurrentPage:_currentPage + 1]];
    
    //調整imageview的frame,使其能正確地顯示在scrollview上
    
    [preImageview setFrame:CGRectMake(0, 0, 320, 300)];
    [currentImageview setFrame:CGRectMake(320, 0, 320, 300)];
    [nextImageview setFrame:CGRectMake(320*2, 0, 320, 300)];
    
    //添加imageview到scrollview上
    
    [_randPicScroll addSubview:preImageview];
    [_randPicScroll addSubview:currentImageview];
    [_randPicScroll addSubview:nextImageview];
    
    [_randPicScroll setContentOffset:CGPointMake(320, 0)];
    
}

//scrollview滾動結束。

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    //在滑動scrollview時觸發此方法,將pagecontrol的currentPage和_currentPage對應起來。
    
    _pageControl.currentPage = [self validateCurrentPage:_currentPage - 1];
    
    //待滑動結束,開啓計時器,scrollview自動滑動。
    
    if(scrollView == _randPicScroll){
        [self addTimer];
    }
}
- (void)addTimer
{
    //添加計時器,使scrollview能夠自動滑動。
    
    _timer = [NSTimer scheduledTimerWithTimeInterval:2 target:self selector:@selector(nextImage) userInfo:nil repeats:YES];
    [[NSRunLoop currentRunLoop] addTimer:_timer forMode:NSRunLoopCommonModes];

}

//添加計時器使scrollview自動滾動。

- (void)nextImage
{
    //此方法會觸發scrollviewDidScroll執行。
    
    [_randPicScroll setContentOffset:CGPointMake(320*2, 0) animated:YES];
    
    //在scrollviewDidScroll執行之前將pgaecontrol的currentPage與_currentPage對應起來。
    
    _pageControl.currentPage = [self validateCurrentPage:_currentPage];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}




發佈了15 篇原創文章 · 獲贊 3 · 訪問量 2萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章