iOS之UICollectionView的使用

一、普通使用

1、FKViewController类

//.h
#import <UIKit/UIKit.h>

@interface FKViewController : UIViewController<UICollectionViewDataSource,
UICollectionViewDelegate>
@property (strong, nonatomic) IBOutlet UICollectionView *grid;

@end

//.m
#import <QuartzCore/QuartzCore.h>
#import "FKViewController.h"
#import "FKDetailViewController.h"

@interface FKViewController ()

@end

@implementation FKViewController
NSArray* books;
NSArray* covers;
- (void)viewDidLoad
{
[super viewDidLoad];
// 创建、并初始化NSArray对象。
books = [NSArray arrayWithObjects:@"疯狂Ajax讲义",
@"疯狂Android讲义",
@"疯狂HTML5/CSS3/JavaScript讲义" ,
@"疯狂Java讲义",
@"疯狂Java程序员基本修养",
@"轻量级Java EE企业应用实战",
@"经典Java EE企业应用实战",
@"疯狂XML讲义",
nil];
// 创建、并初始化NSArray对象。
covers = [NSArray arrayWithObjects:@"ajax.png",
@"android.png",
@"html.png" ,
@"java.png",
@"java2.png",
@"javaee.png",
@"javaee2.png",
@"xml.png", nil];
// 为当前导航项设置标题
self.navigationItem.title = @"图书列表";
// 为UICollectionView设置dataSource和delegate
self.grid.dataSource = self;
self.grid.delegate = self;
// 创建UICollectionViewFlowLayout布局对象
UICollectionViewFlowLayout *flowLayout =
[[UICollectionViewFlowLayout alloc] init];
// 设置UICollectionView中各单元格的大小
flowLayout.itemSize = CGSizeMake(120, 160);
// 设置该UICollectionView只支持水平滚动
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
// 设置各分区上、下、左、右空白的大小。
flowLayout.sectionInset = UIEdgeInsetsMake(0, 2, 0, 0);
// 为UICollectionView设置布局对象
self.grid.collectionViewLayout = flowLayout;
}
// 该方法返回值决定各单元格的控件。
- (UICollectionViewCell *)collectionView:(UICollectionView *)
collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
// 为单元格定义一个静态字符串作为标示符
static NSString* cellId = @"bookCell";  // ①
// 从可重用单元格的队列中取出一个单元格
UICollectionViewCell* cell = [collectionView
dequeueReusableCellWithReuseIdentifier:cellId
forIndexPath:indexPath];
// 设置圆角
cell.layer.cornerRadius = 8;
cell.layer.masksToBounds = YES;
NSInteger rowNo = indexPath.row;
// 通过tag属性获取单元格内的UIImageView控件
UIImageView* iv = (UIImageView*)[cell viewWithTag:1];
// 为单元格内图片控件设置图片
iv.image = [UIImage imageNamed:[covers objectAtIndex:rowNo]];
// 通过tag属性获取单元格内的UILabel控件
UILabel* label = (UILabel*)[cell viewWithTag:2];
// 为单元格内UILabel控件设置文本
label.text = [books objectAtIndex:rowNo];
return cell;
}
// 该方法返回值决定UICollectionView包含多少个单元格
- (NSInteger)collectionView:(UICollectionView *)collectionView
numberOfItemsInSection:(NSInteger)section
{
return books.count;
}
// 当用户单击单元格跳转到下一个视图控制器时激发该方法。
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
// 获取激发该跳转的单元格
UICollectionViewCell* cell = (UICollectionViewCell*)sender;
// 获取该单元格所在的NSIndexPath
NSIndexPath* indexPath = [self.grid indexPathForCell:cell];
NSInteger rowNo = indexPath.row;
// 获取跳转的目标视图控制器：FKDetailViewController控制器
FKDetailViewController *detailController = segue.destinationViewController;
// 将选中单元格内的数据传给FKDetailViewController控制器对象
detailController.imageName = [covers objectAtIndex:rowNo];
detailController.bookNo = rowNo;
}
@end

1）首先在storyboard上添加一个UINavigationController控件，删除原来的控件。

2）删除UINavigationController的默认UITableViewController的控件，添加UIViewController控件，作为UINavigationController的根视图。UIViewController关联FKViewController类

3）UIViewController添加UILabel和UIImageView控件，设置tag和IBOutlet属性

4）UIViewController添加UICollectionView控件，设置IBOutlet属性

2、FKDetailViewController类

//.h
#import <UIKit/UIKit.h>

@interface FKDetailViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIImageView *bookCover;
@property (strong, nonatomic) IBOutlet UITextView *bookDetail;
// 用于接受上一个控制器传入参数的属性
@property (strong, nonatomic) NSString* imageName;
@property (nonatomic, assign) NSInteger bookNo;
@end

//.m
#import "FKDetailViewController.h"

@implementation FKDetailViewController
NSArray* bookDetails;
- (void)viewDidLoad
{
[super viewDidLoad];
bookDetails = [NSArray arrayWithObjects:
@"长期雄踞各网店Ajax销量排行榜榜首的图书，全面深入介绍了前端开发知识",
@"长期雄踞各网店Andrioid销量排行榜榜首的图书。",
@"重点介绍HTML 5、CSS3、JavaScript等前端开发基础知识" ,
@"Java图书，值得仔细阅读的图书",
@"帮助Java程序员查漏补缺的、突破重点的图书",
@"Java领域3大框架整合开发的图书",
@"以EJB 3为核心的Java EE开发图书",
@"详细介绍有关XML方方面面的图书" ,nil];
}
- (void)viewWillAppear:(BOOL)animated
{
// 设置bookCover控件显示的图片
self.bookCover.image = [UIImage imageNamed:self.imageName];
// 设置bookDetail显示的内容
self.bookDetail.text = [bookDetails objectAtIndex:self.bookNo];
}
@end

1）添加UIViewController，关联到该类

2）添加UILabel和UIImageView到该UIViewController，并设置IBOutlet属性

二、单元格大小不一，添加UICollectionViewDelegateFlowLayout协议

如果单元格的大小不同，则可在.h中添加UICollectionViewDelegateFlowLayout协议，在.m中实现下面方法即可

//.m
- (CGSize)collectionView:(UICollectionView *)collectionView layout:
(UICollectionViewLayout*)collectionViewLayout
sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"~~~~~");
// 获取indexPath对应的单元格将要显示的图片
UIImage* image = [UIImage imageNamed:
[covers objectAtIndex:indexPath.row]];
// 控制该单元格的大小为它显示的图片大小的一半
return CGSizeMake(image.size.width / 2
, image.size.height / 2);
}

三、定制UICollectionViewLayout

1、继承UICollectionViewLayout的FKCircleLayout类

//.h
#import <UIKit/UIKit.h>

@interface FKCircleLayout : UICollectionViewLayout
@property (nonatomic, assign) CGPoint center;
@property (nonatomic, assign) CGFloat radius;
@property (nonatomic, assign) NSInteger cellCount;
@end

//.m
#import "FKCircleLayout.h"

#define ITEM_SIZE 72
@implementation FKCircleLayout
// 开始执行的方法
-(void)prepareLayout
{
[super prepareLayout];

CGSize size = self.collectionView.frame.size;
// 计算需要包含多少个单元格
_cellCount = [[self collectionView] numberOfItemsInSection:0];
// 计算环的圆心
_center = CGPointMake(size.width / 2.0, size.height / 2.0);
// 计算环的半径（以宽、高中较小值的2.5分之一作为半径）
_radius = MIN(size.width, size.height) / 2.5;
}
// 该方法的返回值决定UICollectionView所包含控件的大小
-(CGSize)collectionViewContentSize
{
return [self collectionView].frame.size;
}
// 该方法返回的UICollectionViewLayoutAttributes控制指定单元格的大小和位置
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:
(NSIndexPath *)path
{
// 创建一个UICollectionViewLayoutAttributes对象
UICollectionViewLayoutAttributes* attributes =
[UICollectionViewLayoutAttributes
layoutAttributesForCellWithIndexPath:path];
// 设置各单元格的大小
attributes.size = CGSizeMake(ITEM_SIZE, ITEM_SIZE);
// 设置该单元格的中心点坐标，
// 由于程序需要控制各单元格绕城一个圆圈，因此此处使用了三角函数进行计算。
attributes.center = CGPointMake(_center.x + _radius
* cosf(2 * M_PI * path.item / _cellCount),
_center.y + _radius * sinf(2 * M_PI * path.item / _cellCount));
return attributes;
}
// 该方法的返回值控制UICollectionViewLayoutAttributes集合依次控制
// 指定CGRect范围内各单元格的大小和位置
-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect
{
NSMutableArray* attributes = [NSMutableArray array];
// 将控制每个单元格大小和位置的UICollectionViewLayoutAttributes
// 添加到NSArray中
for (NSInteger i=0 ; i < _cellCount; i++) {
NSIndexPath* indexPath = [NSIndexPath
indexPathForItem:i inSection:0];
[attributes addObject:
[self layoutAttributesForItemAtIndexPath:indexPath]];
}
return attributes;
}
// 每当单元格动态显示时自动调用该方法
- (UICollectionViewLayoutAttributes *)
initialLayoutAttributesForAppearingItemAtIndexPath:
(NSIndexPath *)itemIndexPath
{
UICollectionViewLayoutAttributes* attributes = [self
layoutAttributesForItemAtIndexPath:itemIndexPath];
attributes.alpha = 0.0;
attributes.center = CGPointMake(_center.x, _center.y);
return attributes;
}
// 每当单元格动态消失时自动调用该方法
- (UICollectionViewLayoutAttributes *)
finalLayoutAttributesForDisappearingItemAtIndexPath:
(NSIndexPath *)itemIndexPath
{
UICollectionViewLayoutAttributes* attributes = [self
layoutAttributesForItemAtIndexPath:itemIndexPath];
attributes.alpha = 0.0;
attributes.center = CGPointMake(_center.x, _center.y);
attributes.transform3D = CATransform3DMakeScale(0.1, 0.1, 1.0);
return attributes;
}
@end

2、FKViewController类

//.h
#import <UIKit/UIKit.h>

@interface FKViewController : UIViewController<UICollectionViewDataSource
, UICollectionViewDelegate>
@property (strong, nonatomic) IBOutlet UICollectionView *gridView;
@end

//.m
#import "FKViewController.h"
#import "FKCircleLayout.h"
@interface FKViewController ()

@end

@implementation FKViewController
NSInteger cellCount;
-(void)viewDidLoad
{
// 设置开始的时候包含16个单元格
cellCount = 16;
// 创建自定义的FKCircleLayout布局对象
FKCircleLayout* circleLayout =[[FKCircleLayout alloc] init];
// 设置使用自定义布局对象
self.gridView.collectionViewLayout = circleLayout;
// 设置背景色
self.gridView.backgroundColor = [UIColor grayColor];
// 为UICollectionView设置dataSource和delegate
self.gridView.dataSource = self;
self.gridView.delegate = self;
// 创建一个处理点击的手势处理器
UITapGestureRecognizer* tapRecognizer = [[UITapGestureRecognizer alloc]
initWithTarget:self action:@selector(handleTap:)];
// 为UICollectionView增加一个手势处理器
[self.gridView addGestureRecognizer:tapRecognizer];
}
// 该方法的返回值决定该UICollectionView包含多少个单元格
- (NSInteger)collectionView:(UICollectionView *)view
numberOfItemsInSection:(NSInteger)section;
{
return cellCount;
}
// 该方法的返回值决定该UICollectionView指定位置的单元格控件
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;
{
static NSString* cellId = @"cellId";

// 从可重用表格行的队列中取出一个表格行
UICollectionViewCell* cell = [collectionView
dequeueReusableCellWithReuseIdentifier:cellId
forIndexPath:indexPath];
return cell;
}
// 定义处理点击手势的方法
- (void)handleTap:(UITapGestureRecognizer *)sender
{
if (sender.state == UIGestureRecognizerStateEnded)
{
// 获取点击点的位置
CGPoint initialPinchPoint = [sender locationInView:self.gridView];
// 获取点击点所在的NSIndexPath（可用于获取被点击的单元格）
NSIndexPath* tappedCellPath = [self.gridView
indexPathForItemAtPoint:initialPinchPoint];
// 如果被点击的单元格存在
if (tappedCellPath)
{
// 减少一个单元格
cellCount --;
// 删除被点击的单元格
[self.gridView deleteItemsAtIndexPaths:
[NSArray arrayWithObject:tappedCellPath]];
}
else
{
// 增加一个单元格
cellCount ++;
// 在UICollectionView的开始处添加一个单元格
[self.gridView insertItemsAtIndexPaths:
[NSArray arrayWithObject:
[NSIndexPath indexPathForItem:0 inSection:0]]];
}
}
}
@end