IOS学习笔记之网格视图

1、网格视图的概念

UICollectionView（网格视图）是IOS6.0新增的一种UI控件，从直观上看，它非常像一个多列的表格控件，iBooks应用其实就是一个UIColectionView应用。

UICollectionView继承了UIScrollview，它具有UIScrollView的功能，UIScrollView中主要封装了多个UICollectionViewCell单元格控件，因此，UICollectionView默认可以对单元格进行滚动。

UICollectionView的数据加载与UITableView极其相似，它也有2个委托对象属性（UICollectionViewDataSource、UICollectionViewDelegate）

2、UICollectionView的用法

（1）程序不允许直接创建UICollectionViewCell单元格对象，必须先为UICollectionView注册单元格控件

（2）实现collectionView:numberOfItemsInSection：方法，该方法返回一个NSInteger类型，该返回值决定UICollectionView有多少个单元格

（3）实现collectionView:cellForItemAtIndexPath:方法，该方法返回一个UICollectionViewCell，该返回值决定每个单元格的内容。

（4）实现collectionView:layout:sizeForItemAtIndexPath :方法，该方法返回值返回一个CGSize，该返回值决定每个单元格的大小

（5）实现collectionView:layout:minimumLineSpacingForSectionAtIndex ：方法，返回一个CGFloat，决定每行之间的间隔像素。

（6）实现collectionView:layout:minimumInteritemSpacingForSectionAtIndex ：方法，返回一个CGFloat，决定每列之间的间隔像素。

（7）实现collectionView:layout:insetForSectionAtIndex :方法，该方法返回一个UIEdgeInsets，该返回值决定每个单元格与上、下、左、右的间距

3、代码实例

（1）首先创建一个类继承自UICollectionCell

@interface CityCell :
UICollectionViewCell

@property (weak,
nonatomic) IBOutlet
UILabel *lbName;

@end



（2）然后为UICollectionView注册该UICollectionCell

//为UICollectionView注册单元格

UINib *nibCell = [UINib
nibWithNibName:@"CityCell"
bundle:[NSBundle
mainBundle]];

[_collectionView
registerNib:nibCell forCellWithReuseIdentifier:@"CityCell"];
（3）最后按照2的步骤实现数据的加载

//返回UIViewColectionView有多少个单元格

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

return
_cityArray.count;

}

//返回单元格的内容

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

static NSString *cellId =
@"CityCell";

CityCell *cell = [collectionView
dequeueReusableCellWithReuseIdentifier:cellId
forIndexPath:indexPath];

cell.lbName.text = [_cityArray
objectAtIndex:indexPath.row];

return cell;

}

//单元格的大小

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath
*)indexPath {

return
CGSizeMake(129,
47);

}

//该方法返回值决定每⾏之间的间隔像素

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section

{

return
5;

}

//该方法返回值决定每列之间的间隔像素

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{

return
5;

}

//该方法返回值决定每个单元格与上、下、左、右的间距

-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout: (UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{

//UIEdgeInsets insets = {top, left, bottom, right};

return
UIEdgeInsetsMake(0,
15,
0, 15);

}

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

NSLog(@"用户点击了第%li个单元格",indexPath.row);

}
4、网格视图在Interface Builder中的使用
网格视图也可以在Interface Builder图形界面化工具中，设置CollectionView的各种布局



5、添加UICollectionView的页眉和页脚

（1）到Storyboard中，选中UICollectionView，在工具中勾选"Section Header"和"Section Footer",如下图所示



（2）要为header view和footer view指定一个标识符，如下图所示

选中header view,并在工具栏中设置identifier为"headerView",同样，选中footer view,并在工具栏中设置identifier为"footerView"





(3)在代码中实现collectionView:viewForSupplementaryElementOfKind:atIndexPath:方法

//该方法的返回值将作为指定分区的页眉和页脚控件

-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath*)indexPath{

//为表格行定义一个静态字符串作为标志符

static NSString *headerId = @"headerView";

static NSString *footerId = @"footerView";

UICollectionReusableView *view = nil;

//如果正在处理页眉控件

if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {

view = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:headerId forIndexPath:indexPath];

}

//如果正在处理页脚控件

if (kind == UICollectionElementKindSectionFooter) {

view = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:footerId forIndexPath:indexPath];

UILabel *lb= (UILabel *)[view viewWithTag:1];

lb.text = [NSString stringWithFormat:@"%li个城市",_cityArray.count];

}

return view;

}
6、UICollectionView分组

UICollectionView也可以像UITableView那样进行分组

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{

return 2;

}