這個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.
}