iOS開發UI篇—無限輪播（循環利用）

iOS開發UI篇—無限輪播（循環利用）

一、無限輪播 

1.簡單說明

　　在開發中常需要對廣告或者是一些圖片進行自動的輪播，也就是所謂的無限滾動。

　　在開發的時候，我們通常的做法是使用一個UIScrollView，在UIScrollView上面添加多個imageView，然后設置imageView的圖片，和scrollView的滾動范圍。

　　以前的做法：

　　

　　一般而言，輪播的廣告或者是圖片數量都不會太多（3~5張）。所以，並不會太多的去考慮性能問題。但是如果圖片過多（比如有16張圖片，就需要創建16個imageView），那么就不得不考慮性能問題了。

　　更甚，如果深入做一個圖片瀏覽的小程序，那么可能會處理成百上千張圖片，這會造成極大的內存浪費且性能低下。

　　圖片數量眾多：

　　

當用戶在查看第一張圖片的時候，后面的7張創建的時間太早，且用戶可能根本就沒機會看見（看完前面幾張就沒有興趣再看后面的內容 了）。

優化思路：只有在需要用到的時候，再創建，創建的imageView進行村循環利用。比較好的做法，不論有多少張圖片，只需要創建3個imageView就夠了。

　　

本文介紹使用Collectionview來實現無限滾動的循環利用。它支持垂直和水平方向上的滾動。

 

二、實現

1.說明：

CollectionCell的用法和tableViewCell的用法不太一樣，CollectionCell

需要注冊，告訴它這種標識對應的cell是什么類型的cell，如果緩存池中沒有，那么它就檢測當時這種標識注冊的是什么類型的cell,就會自動創建這種類型的Cell。

2.實現步驟

 

　　（1）向storyboard中添加一個UICollectionView，調整控件的寬高。

　　　　

　　（2）設置其寬高==一張圖片的寬高==其一個cell的寬高

　　　　設置cell的格子的大小。其默認為向上滾動的，調整為水平滾動。

　　　　    

　　

　　（3）連線，設置其數據源和代理

　　　　

實現代碼：

//
//  YYViewController.m
//  07-無限滾動（循環利用）
//
//  Created by apple on 14-8-3.
//  Copyright (c) 2014年 yangyong. All rights reserved.
//

#import "YYViewController.h"

@interface YYViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
@property (weak, nonatomic) IBOutlet UICollectionView *collectinView;

@end

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
21     //注冊cell
22     static NSString *ID=@"cell";
23     [self.collectinView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ID];
    
}

#pragma mark- UICollectionViewDataSource
//一共多少組，默認為1組
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 16;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *ID=@"cell";
    UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];
    cell.backgroundColor=YYRandomColor;
    return cell;
}

#pragma mark-UICollectionViewDelegate
@end

　　　　界面展示：

　　　　

　　　　打印查看有沒有實現cell的循環利用。

　　　　

　　　　可以看出，整個程序中只創建了兩個cell。

　　（4）展示圖片，自定義cell（兩種做法，可以使用xib也可以使用代碼）。

　　　　自定義一個cell，用來展示圖片。

　　　　

　　　　實現代碼：
　　YYimageCell.h文件

//
//  YYimageCell.h
//  07-無限滾動（循環利用）
//
//  Created by apple on 14-8-3.
//  Copyright (c) 2014年 yangyong. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface YYimageCell : UICollectionViewCell
@property(nonatomic,copy)NSString *icon;
@end

YYimageCell.m文件

//
//  YYimageCell.m
//  07-無限滾動（循環利用）
//
//  Created by apple on 14-8-3.
//  Copyright (c) 2014年 yangyong. All rights reserved.
//

#import "YYimageCell.h"

@interface YYimageCell ()
@property(nonatomic,strong)UIImageView *imageView;
@end
@implementation YYimageCell

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
       
        UIImageView *imageView=[[UIImageView alloc]init];
        [self addSubview:imageView];
        self.imageView=imageView;
    }
    return self;
}

-(void)setIcon:(NSString *)icon
{
    _icon=[icon copy];
    self.imageView.image=[UIImage imageNamed:icon];
}

-(void)layoutSubviews
{
    [super layoutSubviews];
    self.imageView.frame=self.bounds;
}

@end

　　YYViewController.m文件

//
//  YYViewController.m
//  07-無限滾動（循環利用）
//
//  Created by apple on 14-8-3.
//  Copyright (c) 2014年 yangyong. All rights reserved.
//

#import "YYViewController.h"
#import "YYimageCell.h"

#define YYCell @"cell"

@interface YYViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
@property (weak, nonatomic) IBOutlet UICollectionView *collectinView;

@end

@implementation YYViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    //注冊cell
//    static NSString *ID=@"cell";
    [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
    
}

#pragma mark- UICollectionViewDataSource
//一共多少組，默認為1組
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 16;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
//    static NSString *ID=@"cell";
    YYimageCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:YYCell forIndexPath:indexPath];
    cell.backgroundColor=YYRandomColor;
    NSLog(@"%p,%d",cell,indexPath.item);
    cell.icon=[NSString stringWithFormat:@"minion_%02d",indexPath.item+1];
    return cell;
}

#pragma mark-UICollectionViewDelegate
@end

　　界面實現：

　　

　　（5）細節處理

設置分頁

　　

調整間距

隱藏水平滾動條。

清除其顏色。