CollectionView實現圖片無限切換

一.說明:

新建一個Single View Application,刪除main.stroryboard中原有的控制器,拖入一個新的CollectionViewController;

在原有的ViewController.h文件中,將繼承改爲UICollectionViewController,且綁定CollectionViewController

要使用原型cell來建立每張圖片,故創建相應的cell文件並綁定.在原型cell中拖入一張imageView,並設定其約束覆蓋全cell

在Assets.xcassets中拖入圖片,至此基本界面搭建完畢.

 

二.實現代碼:

//
//  HBImageCell.h文件
//  4.30 圖片輪播

#import <UIKit/UIKit.h>

@interface HBImageCell : UICollectionViewCell
//建立一個imgName屬性,當導入imgName時,爲圖像賦值
@property (nonatomic,copy)NSString *imgName;
@end

設置cell中圖片的Outlets接口

//
//  HBImageCell.m文件
//  4.30 圖片輪播

#import "HBImageCell.h"
@interface HBImageCell ()
@property (weak, nonatomic) IBOutlet UIImageView *imgView;
@end

@implementation HBImageCell
-(void)setImgName:(NSString *)imgName{
    _imgName = imgName;
    UIImage *img = [UIImage imageNamed:imgName];
    self.imgView.image = img;
}


@end

 

/*
　　ViewController.m文件中

 思想:爲了使圖片能無限輪播,將圖片每次的位置都滾動到第2位,且設立個新索引,圖片內容根據新索引變化
 */

#import "ViewController.h"
#import "HBImageCell.h"
//將圖片數量定義爲宏,方便後期維護
#define IMG_COUNT 9
@interface ViewController ()
//拖入layout的輸出接口
@property (weak, nonatomic) IBOutlet UICollectionViewFlowLayout *flowLayout;
@property (assign,nonatomic)int index;
@end

@implementation ViewController
//在main.storyboard的cell中也應設定相同的可重用identifier
static NSString *ID = @"IMG";

#pragma mark - ViewDidLoad
- (void)viewDidLoad {
    [super viewDidLoad];
    //使每一個單元格的尺寸與屏幕相同
    self.flowLayout.itemSize = self.view.frame.size;
    //設置單元格之間的間隙爲0
    self.flowLayout.minimumLineSpacing = 0;
    //設置滾動方式爲水平滾動
    self.flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    //隱藏水平滾動條
    self.collectionView.showsHorizontalScrollIndicator = NO;
    //設置分頁顯示
    self.collectionView.pagingEnabled = YES;
    //剛開始就將其滾動到第2個位置
    [self scrollToSecondPosition];
}
#pragma mark - 返回個數
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return IMG_COUNT;
}
#pragma mark - 返回內容
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    //取出原型cell
    HBImageCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
    
    //要先判斷是向左拖仍是向右拖,在拖動時就顯示圖片內容
    //但不能直接在self.index上改動,不然在拖動結束後index還會自增(自減),故創建一個臨時變量
    int tempIndex = self.index;
    if (indexPath.item == 0) {
        tempIndex --;
    }else if (indexPath.item == 2){
        tempIndex ++;
    }
    //判斷越界
    if (tempIndex == IMG_COUNT) {
        tempIndex = 0;
    }else if (tempIndex == -1){
        tempIndex = IMG_COUNT - 1;
    }

    //爲cell賦imgName
    NSString *imgName = [NSString stringWithFormat:@"%zd",tempIndex];
    cell.imgName = imgName;
    
    return cell;
}

#pragma mark - 拖動結束時調用
//經過該方法來肯定圖片最後顯示的內容
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    //經過偏移來得知是向左仍是向右拖動
    CGFloat offset = scrollView.contentOffset.x;
    int next = offset/self.flowLayout.itemSize.width;
    if (next == 0) {
        self.index--;
    }else if (next == 2){
        self.index++;
    }
    //越界判斷
    if (self.index == IMG_COUNT) {
        self.index = 0;
    }else if (self.index == -1){
        self.index = IMG_COUNT - 1;
    }

    //加入異步線程,回到第2個位置
    dispatch_async(dispatch_get_main_queue(), ^{
        [self scrollToSecondPosition];
    });
    
}

#pragma mark - 滾動到第二個的位置方法
-(void)scrollToSecondPosition{
    NSIndexPath *indexPath = [NSIndexPath indexPathForItem:1 inSection:0];
    [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionNone animated:NO];
    
}
@end

至此實現代碼完成.

三.優化

圖片的索引變化和判斷越界可以使用一句優化算法代替

/*
    ViewController.m文件中
 */


-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    ....
    int tempIndex = self.index;
    if (indexPath.item == 0) { tempIndex --; }else if (indexPath.item == 2){ tempIndex ++; } //判斷越界
    if (tempIndex == IMG_COUNT) { tempIndex = 0; }else if (tempIndex == -1){ tempIndex = IMG_COUNT - 1; }
    tempIndex = (tempIndex + (indexPath.item -1))%IMG_COUNT;
    ....
}

#pragma mark - 拖動結束時調用
//經過該方法來肯定圖片最後顯示的內容
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
    //經過偏移來得知是向左仍是向右拖動
    CGFloat offset = scrollView.contentOffset.x;
    int next = offset/self.flowLayout.itemSize.width;
    if (next == 0) { self.index--; }else if (next == 2){ self.index++; } //越界判斷
    if (self.index == IMG_COUNT) { self.index = 0; }else if (self.index == -1){ self.index = IMG_COUNT - 1; }
    self.index = (self.index + (next - 1))%IMG_COUNT;
   ...
}

四.注意點

    HBImageCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];

從原型cell中取得cell不須要註冊,而使用xib或class文件中得到cell則要在viewDidLoad中註冊相應的cell

    //註冊nib
    [self.collectionView registerNib:<#(nullable UINib *)#> forCellWithReuseIdentifier:<#(nonnull NSString *)#>]
    //註冊class
    [self.collectionView registerClass:<#(nullable Class)#> forCellWithReuseIdentifier:<#(nonnull NSString *)#>]