图片轮播

一、无限轮播 

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）连线，设置其数据源和代理

　　　　

实现代码：

 1 // 2 //  YYViewController.m 3 //  07-无限滚动（循环利用） 4 // 5 //  Created by apple on 14-8-3. 6 //  Copyright (c) 2014年 yangyong. All rights reserved. 7 // 8  9 #import "YYViewController.h"10 11 @interface YYViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>12 @property (weak, nonatomic) IBOutlet UICollectionView *collectinView;13 14 @end15 16 @implementation YYViewController17 18 - (void)viewDidLoad19 {20     [super viewDidLoad];21     //注册cell22     static NSString *ID=@"cell";23     [self.collectinView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:ID];24     25 }26 27 #pragma mark- UICollectionViewDataSource28 //一共多少组，默认为1组29 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView30 {31     return 1;32 }33 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section34 {35     return 16;36 }37 38 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath39 {40     static NSString *ID=@"cell";41     UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:ID forIndexPath:indexPath];42     cell.backgroundColor=YYRandomColor;43     return cell;44 }45 46 #pragma mark-UICollectionViewDelegate47 @end

　　　　界面展示：

　　　　

　　　　打印查看有没有实现cell的循环利用。

　　　　

　　　　可以看出，整个程序中只创建了两个cell。

　　（4）展示图片，自定义cell（两种做法，可以使用xib也可以使用代码）。

　　　　自定义一个cell，用来展示图片。

　　　　

　　　　实现代码：
　　YYimageCell.h文件

 1 // 2 //  YYimageCell.h 3 //  07-无限滚动（循环利用） 4 // 5 //  Created by apple on 14-8-3. 6 //  Copyright (c) 2014年 yangyong. All rights reserved. 7 // 8  9 #import <UIKit/UIKit.h>10 11 @interface YYimageCell : UICollectionViewCell12 @property(nonatomic,copy)NSString *icon;13 @end

YYimageCell.m文件

 1 // 2 //  YYimageCell.m 3 //  07-无限滚动（循环利用） 4 // 5 //  Created by apple on 14-8-3. 6 //  Copyright (c) 2014年 yangyong. All rights reserved. 7 // 8  9 #import "YYimageCell.h"10 11 @interface YYimageCell ()12 @property(nonatomic,strong)UIImageView *imageView;13 @end14 @implementation YYimageCell15 16 - (id)initWithFrame:(CGRect)frame17 {18     self = [super initWithFrame:frame];19     if (self) {20        21         UIImageView *imageView=[[UIImageView alloc]init];22         [self addSubview:imageView];23         self.imageView=imageView;24     }25     return self;26 }27 28 -(void)setIcon:(NSString *)icon29 {30     _icon=[icon copy];31     self.imageView.image=[UIImage imageNamed:icon];32 }33 34 -(void)layoutSubviews35 {36     [super layoutSubviews];37     self.imageView.frame=self.bounds;38 }39 40 @end

　　YYViewController.m文件

 1 // 2 //  YYViewController.m 3 //  07-无限滚动（循环利用） 4 // 5 //  Created by apple on 14-8-3. 6 //  Copyright (c) 2014年 yangyong. All rights reserved. 7 // 8  9 #import "YYViewController.h"10 #import "YYimageCell.h"11 12 #define YYCell @"cell"13 14 @interface YYViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>15 @property (weak, nonatomic) IBOutlet UICollectionView *collectinView;16 17 @end18 19 @implementation YYViewController20 21 - (void)viewDidLoad22 {23     [super viewDidLoad];24     //注册cell25 //    static NSString *ID=@"cell";26     [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];27     28 }29 30 #pragma mark- UICollectionViewDataSource31 //一共多少组，默认为1组32 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView33 {34     return 1;35 }36 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section37 {38     return 16;39 }40 41 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath42 {43 //    static NSString *ID=@"cell";44     YYimageCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:YYCell forIndexPath:indexPath];45     cell.backgroundColor=YYRandomColor;46     NSLog(@"%p,%d",cell,indexPath.item);47     cell.icon=[NSString stringWithFormat:@"minion_%02d",indexPath.item+1];48     return cell;49 }50 51 #pragma mark-UICollectionViewDelegate52 @end

　　界面实现：

　　

　　（5）细节处理

设置分页

　　

调整间距

隐藏水平滚动条。

清除其颜色。