關於廣告位順時針輪播原理

　　忙碌的工做終於開始有了閒暇，如今無事，整理一下我在項目中我我的覺的遇到的經典的並且很是容易受用的小例子。今天說的就是這廣告位（banner圖）順時針自動輪播的問題，下面先來講一下其實現原理（我以3張圖爲例）：

1）首先咱們拿到數據後，肯定其中圖片的個數

2）拿到圖片的數組，不要急着直接使用，要從新將數組裏面的數據放到一個MutableArray裏面

3）如何放置：（1）將獲得數組的最後的一個對象array[count-1]放在MutableArray第一個位置（2）而後將獲得的數組Array整個放到MutableArray裏面（3）最後將獲得的數組Array[0]的第1個元素添加到MutableArray的最後；這樣咱們由原來數組的3個對象變成5個對象了

4）用從新獲得的數組的元素個數建立scrollView的contentSize；注意：建立pagecontrol的時候仍是使用原來數組的count

　　原理說到這裏：下面貼上我寫的demo代碼

#import "ViewController.h"

 

#define kScreenW [UIScreen mainScreen].bounds.size.width

#define kImageHeight 150.0 //這個數根據美工那邊的UI定

 

@interface ViewController ()<UIScrollViewDelegate> {

    NSMutableArray *imageMutableArray;

}

 

@property (nonatomic, strong) NSArray *images;//放圖片的數組

@property (nonatomic, strong) UIScrollView *bannerScrollView;

@property (nonatomic, strong) UIPageControl *pageControl;

@property (nonatomic, strong) NSTimer *timer;

 

@end

 

@implementation ViewController

 

- (void)viewDidLoad {

    [super viewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    self.images = @[@"1.png", @"2.png", @"3.png"];

    [self setupBannerView];

}

 

- (void)viewWillAppear:(BOOL)animated {

    [super viewWillAppear:animated];

    [self startTimer];

}

 

/**

 * 若是圖片（url）是從服務器上獲得的，這個setupBannerView方法要寫在數據請求完成以後調用

 */

- (void)setupBannerView {

    

    UIView *bannerView = [[UIView alloc] initWithFrame:CGRectMake(0, 64, kScreenW, kImageHeight)];

    bannerView.backgroundColor = [UIColor whiteColor];

    [self.view addSubview:bannerView];

    //1、先將圖片交換放入新數組

    imageMutableArray = [NSMutableArray array];

    //作一個安全判斷,而後呼喚第一張和最後一張圖片的位置

    if (self.images.count > 1) {

        //將最後一張圖片放在數組的第一個位置

        [imageMutableArray addObject:self.images[self.images.count - 1]];

        //再將數組整個放到數組中

        [imageMutableArray addObjectsFromArray:self.images];

        //將數組的第一張圖片放在新數組的最後一個位置

        [imageMutableArray addObject:self.images[0]];

    } else {

        //若是數組就只有一張圖片，就沒有必要在滾動了

        [imageMutableArray addObjectsFromArray:self.images];

    }

    

    //2、建立scrollView

    NSUInteger pageCount = imageMutableArray.count;//拿到新的數組中圖片數量

    UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, kScreenW, kImageHeight)];

    scrollView.contentSize = CGSizeMake(kScreenW * pageCount, kImageHeight);//設置可滑動的寬度

    scrollView.pagingEnabled = YES;

    scrollView.delegate = self;

    scrollView.showsHorizontalScrollIndicator = NO;

    scrollView.showsVerticalScrollIndicator = NO;

    //添加手勢 能夠進入到下一級

    UITapGestureRecognizer *onceTapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(showBannerDetail)];

    onceTapGesture.numberOfTapsRequired = 1;

    [scrollView addGestureRecognizer:onceTapGesture];

    self.bannerScrollView = scrollView;

    [bannerView addSubview:self.bannerScrollView];

    //設置開始啓動的初始位置

    [self.bannerScrollView setContentOffset:CGPointMake(kScreenW, 0) animated:NO];

    //3、建立imageView並加載到scrollView上

    for (int i = 0; i < pageCount; i ++) {

        UIImageView *bannerImageView = [[UIImageView alloc] initWithFrame:CGRectMake(kScreenW * i, 0, kScreenW, kImageHeight)];

        NSString *imageName = [NSString stringWithFormat:@"%d.png", (i)];

        bannerImageView.image = [UIImage imageNamed:imageName];

        [scrollView addSubview:bannerImageView];

    }

    

    //4、pageControl

    NSUInteger count = self.images.count;//指示器的數量要跟圖片的數量保持一致

    UIPageControl *pageCrl = [[UIPageControl alloc] initWithFrame:CGRectMake((kScreenW - 100) / 2.0, 64 + (kImageHeight - 20) / 2.0, 100, 10)];

    pageCrl.numberOfPages = count;//指示器的頁數

    pageCrl.currentPage = 0;//顯示當前爲第一頁

    pageCrl.pageIndicatorTintColor = [UIColor redColor];

    pageCrl.currentPageIndicatorTintColor = [UIColor whiteColor];

    [pageCrl addTarget:self action:@selector(updateImage) forControlEvents:UIControlEventValueChanged];

    [bannerView addSubview:pageCrl];

    self.pageControl = pageCrl;

    //到這裏基本上算是完成了，若是使得banner更嚴謹，下降Crash的頻率作一下安全判斷

    self.bannerScrollView.scrollEnabled = count > 1;

    

    //開啓定時器

    if (count > 1) {

        [self startTimer];

        //將scrollView從新定在第一頁位置

        [self.bannerScrollView setContentOffset:CGPointMake(kScreenW, 0) animated:NO];//將動畫設置爲no,用來營造假象

    } else {

        [self.bannerScrollView setContentOffset:CGPointZero animated:NO];

    }

}

 

- (void)startTimer {

     if (self.timer)

        [self.timer invalidate];

    NSTimer *timer = [NSTimer scheduledTimerWithTimeInterval:3 target:self selector:@selector(updateImage) userInfo:nil repeats:YES];

    self.timer = timer;

}

 

- (void)showBannerDetail {

    NSUInteger currentPage = self.pageControl.currentPage;

    NSLog(@"點擊了%ld頁", currentPage);

}

 

#pragma UIScrollViewDelegate

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {

    [self.timer invalidate];//當拖拽的時候，把定時器停掉。以免Crash

    self.timer = nil;

    

}

 

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {

    [self startTimer];

}

 

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

    //修改Pages的當前頁

    if (scrollView == self.bannerScrollView) {

        int index = scrollView.contentOffset.x / kScreenW;

        

        if (index == 0) {

            [self.bannerScrollView setContentOffset:CGPointMake(kScreenW * (imageMutableArray.count - 2), 0) animated:NO];

            self.pageControl.currentPage = self.images.count - 1;

        } else if (index == imageMutableArray.count - 1) {

            [self.bannerScrollView setContentOffset:CGPointMake(kScreenW, 0) animated:NO];

            self.pageControl.currentPage = 0;

        } else {

            self.pageControl.currentPage = index - 1;

        }

    }

 

}

 

- (void)updateImage {

    NSInteger index = self.bannerScrollView.contentOffset.x / kScreenW;

    //前面爲了使輪播圖向同一個方向滾動,在第一個位置放置的是最後的一個圖片，因此正式的開始是從第二個位置開始的，這是爲了給肉眼形成假象

    index = (index + 1) % (self.images.count + 2);

    if (index == self.images.count + 1) {

        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

            [self.bannerScrollView setContentOffset:CGPointMake(kScreenW, 0) animated:NO];

        });

    }

    [self.bannerScrollView setContentOffset:CGPointMake(index * kScreenW, 0) animated:YES];

    //當顯示的是第一張圖的時候，指示器顯示第一個

    if (index == 0) {

        self.pageControl.currentPage = self.images.count - 1;

    } else if (index == self.images.count + 1) {

        self.pageControl.currentPage = 0;

    } else {

        self.pageControl.currentPage = index - 1;

    }

}

效果圖：

　　代碼是我看別人的博客後根據本身的理解想着寫的，學習沒有什麼捷徑，只能靠本身親手寫，才能理解其中的原理，上面的例子沒有通過什麼繁瑣的封裝，只是簡單的廣告輪播，另外，若是我寫的代碼有不足的地方歡迎指正。相互學習吧。