想当初学习iOS时，对这个看得不是那么重，同事们也告诉我这个可以不用掌握。可是到实际项目中就不这么想了，特别是知道怎么用了之后，无论到哪感觉都需要使用它。个人觉得UICollectionView还是要掌握一下，虽然一大堆按钮按钮的确可以实现，但是再怎么样还是没有UICollectionView好用。
首先说一下UICollectionView是什么，在什么场合下用。UICollectionView我们常称之为网格表视图，展示上就是iPhone手机APP列表，如下图所示。
Snip20160619_1.png
它在某些方面和UITableView很像，但又有很大的不同。下面我们来说说怎么做吧。
首先我们自定义一个UICollectionViewCell，和自定义UITableViewCell差不多，只是这里定义的是一个网格。
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
//设置CollectionViewCell中的图像框
self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.frame), CGRectGetWidth(self.frame))];
[self addSubview:self.imageView];
//文本框
self.label = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetMaxX(self.imageView.frame) + 10, CGRectGetWidth(self.frame), 15)];
self.label.font = [UIFont systemFontOfSize:13];
self.label.textColor = Color(102, 102, 102);
self.label.textAlignment = NSTextAlignmentCenter;
[self addSubview:self.label];
}
return self;
}
之后我们就可以定义UICollectionView了
#pragma mark 设置CollectionView的的参数
- (void) initCollectionView
{
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
[flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
//设置CollectionView的属性
self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 220, DeviceSize.width, DeviceSize.height - 220) collectionViewLayout:flowLayout];
self.collectionView.backgroundColor = Color(238, 238, 238);
self.collectionView.delegate = self;
self.collectionView.dataSource = self;
self.collectionView.scrollEnabled = YES;
[self.view addSubview:self.collectionView];
//注册Cell
[self.collectionView registerClass:[MedalCell class] forCellWithReuseIdentifier:@"cell"];
}
这里需要注意一下，UICollectionView的布局方式需要定义一下，UICollectionViewScrollDirectionVertical是垂直布局方式；还有一点就是使用自定义的UICollectionViewCell时不仅仅导入头文件就可以了，还需要在UICollectionView注册一下。
下面就是UICollectionView的Delegate和DataSource。
#pragma mark 设置CollectionView的组数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
#pragma mark 设置CollectionView每组所包含的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return self.medals.count;
}
#pragma mark 设置CollectionCell的内容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *identify = @"cell";
MedalCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identify forIndexPath:indexPath];
Medal *p = self.medals[indexPath.row];
cell.medal = p;
return cell;
}
#pragma mark 定义每个UICollectionView的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
return CGSizeMake(DeviceSize.width /3,(DeviceSize.width / 3));
}
#pragma mark 定义整个CollectionViewCell与整个View的间距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(0, 0, (self.medals.count / 3 - 2) * DeviceSize.width / 3, 0);//（上、左、下、右）
}
#pragma mark 定义每个UICollectionView的横向间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return 0;
}
#pragma mark 定义每个UICollectionView的纵向间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 0;
}
#pragma mark 点击CollectionView触发事件
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
Medal *p = self.medals[indexPath.item];
NSLog(@"---------------------");
}
#pragma mark 设置CollectionViewCell是否可以被点击
- (BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
return YES;
}
这里我就不一一解释了，代码注释的应该比较详细了，我是用模型封装数据的，一个模型就是一个网格。点击事件我也放进去了，不需要的话可以删掉。整体上和UITableView很像，因为布局方式的不同造成了差异。此处代码的效果图如下，可以上下滑动的。
Snip20160619_2.png
好了UICollectionView到此就结束了，是不是比堆按钮简单点。我想UICollectionViewController也应该会了。
