ios之無限 自動 圖片輪播器的實現

• 比較以前發佈的手動無限圖片輪播器進行了改進.實現了自動無限輪播的功能.比較適合團購標題分類下面的輪播器功能.

實現思路:
* 開啓一個定時器,把操做放入消息循環池.每隔必定時間,操做執行一次.
* 注意點: 程序啓動自動輪播,手動拖拽,讓定時器中止,中止拖拽從新開啓一個定時器.

• 下面看源代碼:

---

• 首先實現思路:整個collectionView中只有2個cell.中間始終顯示第二個cell.
• 滾動:向前滾動當前cell的腳標爲0,向後滾動當前的cell腳標爲2.利用當前cell的腳標減去1,獲得+1,或者-1,來讓圖片的索引加1或者減1,實現圖片的切換.
• 聲明一個全局變量index來保存圖片的索引,用來切換顯示在當前cell的圖片.
• 在滾動前先讓顯示的cell的腳標變爲1.代碼viewDidLoad中設置
• 完成一次滾動結束後,代碼再設置當前的cell爲第二個cell(本質上就是讓當前顯示的cell的腳標爲1)
• 最後一個有一個線程問題就是:當你連續滾動的時候,最後中止,當前顯示的圖片會閃動,由於是異步併發執行的,線程不安全致使.解決辦法:讓滾動完成後設置cell的代碼加入主隊列執行便可.

---

• 準備工做,建立collectionViewController,storyboard,進行類綁定,cell綁定,cell可重用標識綁定.
• 建立的cell.h文件

//
//  PBCollectionCell.h
//  無限滾動
//
//  Created by 裴波波 on 16/3/30.
//  Copyright © 2016年 裴波波. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface PBCollectionCell : UICollectionViewCell

@property(nonatomic,strong)UIImage * img;

@end

• cell.m文件

//
//  PBCollectionCell.m
//  無限滾動
//
//  Created by 裴波波 on 16/3/30.
//  Copyright © 2016年 裴波波. All rights reserved.
//

#import "PBCollectionCell.h"

@interface PBCollectionCell ()
//不要忘記給collectionView的cell上設置圖片框,並拖線到cell分類中
@property (strong, nonatomic) IBOutlet UIImageView *imgView;

@end

@implementation PBCollectionCell
//重寫img的set方法來個cell進行賦值.(當調用cell.img = img的時候回調用set ..img的方法)
-(void)setImg:(UIImage *)img{

    _img = img;
    self.imgView.image = img;
}


@end

• 控制器的代碼詳解

//
//  ViewController.m
//  無限滾動
//
//  Created by 裴波波 on 16/3/30.
//  Copyright © 2016年 裴波波. All rights reserved.
//

#import "ViewController.h"
#import "PBCollectionCell.h"
//定義宏圖片的個數
#define kPictureCount 3
@interface ViewController ()
@property (strong, nonatomic) IBOutlet UICollectionViewFlowLayout *flowLayout;
/**
 *  圖片的索引
 */
@property(nonatomic,assign) NSInteger index;

//聲明定時器屬性方便在不一樣方法中訪問
@property(nonatomic,weak) NSTimer * timer;


@end

• 聲明定時器屬性方便在不一樣方法中訪問
• 聲明全局變量index爲了拼接滾動過程當中切換的圖片的索引

@implementation ViewController

-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return kPictureCount;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    static NSString * ID = @"cell";
    PBCollectionCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
    //圖片索引只有下一站或者上一張,即+1,或者-1,爲了切換圖片
    //中間的cell的腳標是1,滾動後腳標是2或者0,湊成next值爲+1或者-1(讓圖片索引+1或者-1來完成切換圖片),則
    NSInteger next = indexPath.item - 1;
    //爲了避免讓next越界,進行取餘運算 ---------+next爲了切換圖片
    next = (self.index + kPictureCount + next) % kPictureCount;
    
    NSString * imgName = [NSString stringWithFormat:@"%02ld",next + 1];
    UIImage * img = [UIImage imageNamed:imgName];
    cell.img = img;
    return cell;
}

• 在viewDidLoad設置了當前顯示圖片的cell是第二個cell,當cell向前滾動腳標-1(cell的indexPath.item的值爲0),向後滾動腳標+1(cell的indexPath.item的值爲2)
• 如何拼接圖片?---經過全局變量self.index:
  • cell向前滾動圖片的索引self.index -1 此時cell的indexPath.item爲0;然而此時圖片的索引須要減1
  • cell向後滾動圖片的索引self.index+1 此時cell的indexPath.item爲2;圖片的索引須要加1
  • 綜上能夠得出經過對cell的indexPath.item-1 再加上self.index就能夠得出,要在下個圖片中顯示的圖片的索引

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

    //計算偏移的整數倍,偏移了0或者是2, -1是讓self.index圖片索引+1 或者 -1以切換圖片;
    NSInteger offset = scrollView.contentOffset.x / scrollView.bounds.size.width - 1;
    self.index = (offset + self.index + kPictureCount) % kPictureCount;
    //本質就是改變cell的索引,再根據self.index來切換圖片,使用取餘讓圖片索引不至於越界
    //異步主隊列執行,爲了避免讓連續滾動中止後,圖片有閃動.
    dispatch_async(dispatch_get_main_queue(), ^{
        [self scrollToSecondCell];
    });
}

• 手動拖拽纔會觸發的方法.

• cell中止滾動後將圖片的索引self.index值計算出來,保存在全局變量.爲了在數據源第三個方法---返回cell的時候經過cell的indexPath.item的+1或者-1以及圖片的索引self.index來正確切換要顯示的圖片.
• 滾動中止後將操做放入主隊列異步執行,此操做是爲了將中間顯示的cell的腳標變爲1,也就是將當前顯示的圖片的cell變爲第二個cell.放在主隊列異步執行(不堵塞主線程,主隊列的任務順序執行,當主線程任務完成後再執行切換cell爲第二個cell)不會出現連續滾動後閃動圖片的bug.(此句看不懂能夠略過).

//封裝設置當前顯示的cell爲第二個cell的方法.
-(void)scrollToSecondCell{

    NSIndexPath * idxPath = [NSIndexPath indexPathForItem:1 inSection:0];
    [self.collectionView scrollToItemAtIndexPath:idxPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
}

- (void)viewDidLoad {

    [super viewDidLoad];
    self.flowLayout.itemSize = self.collectionView.bounds.size;
    self.flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    self.flowLayout.minimumLineSpacing = 0;
    self.collectionView.backgroundColor = [UIColor whiteColor];
    self.collectionView.pagingEnabled = YES;
    self.collectionView.bounces = NO;
    self.collectionView.showsHorizontalScrollIndicator = NO;
    [self scrollToSecondCell];

//開啓定時器使程序啓動就開始滾動
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(nextPic) userInfo:nil repeats:YES];
    NSRunLoop * runloop = [NSRunLoop currentRunLoop];
    [runloop addTimer:self.timer forMode:NSRunLoopCommonModes];    
}



@end

#pragma mark - 每隔一秒執行一次切換圖片

-(void)nextPic{

    CGFloat w = 2 * self.collectionView.bounds.size.width;
    [self.collectionView setContentOffset:CGPointMake(w, 0) animated:YES];
 
}

• 每隔一秒執行一次切換圖片的操做

#pragma mark - 手動開始拖拽中止定時器

// 開始拖拽
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
    // 1. 中止計時器
    [self.timer invalidate];
    
}

• 開始拖拽中止定時器

#pragma mark - 中止拖拽開啓定時器
// 結束拖拽
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    // 從新開啓一個計時器
    self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0 target:self selector:@selector(nextPic) userInfo:nil repeats:YES];
    // 把self.timer加入消息循環的模式修改一下
    NSRunLoop *runloop = [NSRunLoop currentRunLoop];
    [runloop addTimer:self.timer forMode:NSRunLoopCommonModes];
}

• 結束拖拽後從新開啓一個定時器.
• 注意點: 消息循環模式爲NSRunLoopCommonModes

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

    NSInteger  offset = scrollView.contentOffset.x / scrollView.bounds.size.width;
    //第二個cell一直在中間因此,滾動中止後偏移倍數爲0 或者 2 ==offset
    offset = offset - 1;
    //cell的腳標self.index +1 或者 -1;
    self.index = (kPictureCount + offset + self.index) % kPictureCount;
    
    //將操做放入主隊列異步執行,防止連續滾動中止後,圖片錯位後又變回正常顯示的圖片.
    dispatch_async(dispatch_get_main_queue(), ^{
        [self scrollToSecondCell];
    });
}

• 注意點: 加入此方法是由於代碼設置collectionView滾動的時候不會觸發這個方法: -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView ,使cell進行切換.
• 手動拖拽觸發的方法是: -(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
• 只有觸發了上面兩個方法中的一個才能夠將中間顯示的cell設置爲始終是第二個cell

1. cell滑動前或者每次滑動結束後都用代碼設置當前顯示的cell爲第二個cell,在數據源第三個方法也就是返回cell的方法中實現圖片的切換用的是cell的indexPath.item-1 = -1或者 +1 再加上圖片自己的索引值self.index就會得出即將滾出的cell要顯示的是上一張圖片仍是下一張圖片.

2. cell滾動結束後要計算當前cell顯示圖片的索引.是經過scrollview的偏移量contentoffset.x除以scrollview的寬度,計算出當前cell的圖片的索引保存.以後再滑動cell的時候,會調用數據源第三個方法,就會使用保存下來的self.index以及加上cell的indexPath.item-1來計算要顯示的圖片的索引.

3. 注意點: 消息循環模式,代碼滾動偏移觸發的方法與手動拖拽觸發的方法不一樣.

```