iOS 開發 圖片輪播的實現原理

在iOS項目開發中常常會有遇到圖片輪播的場景，對於如何實現輪播初學者可能會有點搞不懂，但願能經過我這個教程明白這個輪播原理，而且可以自給實現輪播圖的封裝

實現輪播就是當scrollView滾動到最後一頁的時候再繼續接着第一頁滾動，視覺上是連環滾動的 可是其實是在改變scrollView的contentoffset爲0的時候去除了動畫效果

實現步驟以下：

1.首先初始化scrollView  

- (void)setScrollView{

    self.scrollView = [[UIScrollView alloc]initWithFrame:[UIScreen mainScreen].bounds];

    self.scrollView.delegate = self;

    NSMutableArray *imageArray = [NSMutableArray array];

    [self setImageArray:imageArray];

    self.imagsArray = [NSMutableArray arrayWithArray:imageArray];

//最重要的一點是須要對圖片的數據進行一個簡單的處理，須要把最後一張圖片在第一個位置再放一張，這樣在圖片從最後一張切換到第一張的時候有個過渡的過程（連貫的效果）

    [self.imagsArray insertObject:imageArray.lastObject atIndex:0];

    for (int i = 0; i < self.imagsArray.count; i ++) {

        UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(kWidth * i, 0, kWidth, kHeight)];

        imageView.image = self.imagsArray[i];

        [self.scrollView addSubview:imageView];

    }

    self.scrollView.contentSize = CGSizeMake(kWidth * self.imagsArray.count, kHeight);

    self.scrollView.contentOffset = CGPointMake(kWidth, 0);

    self.scrollView.pagingEnabled = YES;

    self.scrollView.showsHorizontalScrollIndicator = NO;

    [self.view addSubview:self.scrollView];

}

2.獲取本地的Image

- (NSMutableArray *)setImageArray:(NSMutableArray *)imageArray{

    for (int i = 1; i < 10; i++) {

        UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"IMG_00%D.JPG",i]];

        [imageArray addObject:image];

    }

    return imageArray;

}

3.

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

    CGFloat x = scrollView.contentOffset.x;

    NSLog(@"%f",x);

    if (x > (self.imagsArray.count - 1)*kWidth) {//若是是最後一張就改變scrollView的偏移量到第一張  注意後面動畫效果改成no

        [scrollView setContentOffset:CGPointMake(0, 0) animated:NO];

    }

    if (x < 0) {//若是是第一張便宜到最後一張

        [scrollView setContentOffset:CGPointMake((self.imagsArray.count - 1) *kWidth, 0) animated:NO];

    }

}

4.加上定時器

#pragma mark --設置定時器自動輪播

- (void)autoPlay{

    CGFloat x = _scrollView.contentOffset.x;

    if (x + kWidth >= _scrollView.contentSize.width) {

//這裏的兩句代碼就是爲了當偏移量到第一張的時候再作個動畫過渡一下，有個滾動的效果  注意第一句代碼動畫效果是no  第二句代碼動畫效果是yes

        [_scrollView setContentOffset:CGPointMake(0, 0) animated:NO];

        [_scrollView setContentOffset:CGPointMake(kWidth, 0) animated:YES];

    }else{

        [_scrollView setContentOffset:CGPointMake(x + kWidth, 0) animated:YES];

    }

    

}

5.這裏我沒有加上pageControl   讀者能夠本身加上   若是讀者須要本身封裝只須要在外部傳進來一個圖片數據就好了   

 

本教程就到這，若是有問題歡迎指出！謝謝！  qq：824888663   也可郵件聯繫：guiyuanself@163.com