1. 什么是集合视图

　　在iOS6.0之后, 苹果推出了一个新的继承于 UIScrollView 的视图, UICollectionView , 也被称之为 集合视图. 和 UITableView 共同作为在开发中非常常用的两个视图, 常常作为项目的主界面出现

2. 创建 UICollectionView　

　1> UICollectionView 的实现

　　UICollectionView 的实现跟 tableView 不一样的地方在于 Item 的布局稍微复杂一点, 需要用 UICollectionViewLayout 类来描述视图的视图的布局. 我们在项目中常用的是系统提供的 UICollectionViewFlowerLayout 类, 也可以自定义 UICollectionViewLayout

　2> 创建 UICollectionViewFlowerLayout

 1     // 1. 定义 collectionView 的样式
 2
 3     self.myFlowLayout = [UICollectionViewFlowLayout new];
 4     // 设置属性
 5     // 给定Item的大小
 6     self.myFlowLayout.itemSize = CGSizeMake((kWidth - 40) / 3, kWidth / 3);
 7     // 每两个Item之间的最小间隙(垂直滚动)
 8     self.myFlowLayout.minimumInteritemSpacing = 10;
 9     // 每两个Item之间的最小间隙(水平滚动)
10     self.myFlowLayout.minimumLineSpacing = 10;
11     // 设置滚动方向
12     self.myFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical; // 垂直方向
13 //    self.myFlowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal; // 水平方向
14     // 设置视图的内边距(上左下右)
15     self.myFlowLayout.sectionInset = UIEdgeInsetsMake(20, 10, 10, 10);
16
17     // 布局头视图尺寸
18     self.myFlowLayout.headerReferenceSize = CGSizeMake(0, 50);
19
20     // 布局尾视图尺寸
21     self.myFlowLayout.footerReferenceSize = CGSizeMake(0, 50);

　3> 初始化 UICollectionView

1     // 2.布局 collectionView
2     // 创建对象并指定样式
3     self.collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:self.myFlowLayout];
4
5     self.collectionView.backgroundColor = [UIColor cyanColor];
6
7     [self addSubview:self.collectionView];

　4> 设置代理

    // 设置代理
    self.rootView.collectionView.delegate = self;
    self.rootView.collectionView.dataSource = self;

　5> 注册cell

    // 第一步:注册cell
    [self.rootView.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:identifier_cell];

　6> 代理方法

　　① UICollectionView 和 UITableView 一样有两个必须实现的代理方法

　　　返回多少个 Item　

1 // 设置每个分区有多少个Item
2 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
3 {
4     return 10;
5 }

　　　指定每个 Item 的样式

 1 // 返回每一个Item的cell对象
 2 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
 3 {
 4     RootCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier_cell forIndexPath:indexPath];
 5
 6     cell.backgroundColor = [UIColor redColor];
 7
 8     if (0 == indexPath.section) {
 9         cell.photoImage.image = [UIImage imageNamed:@"1"];
10     }
11     if (1 == indexPath.section) {
12         cell.photoImage.image = [UIImage imageNamed:@"2"];
13     }
14     if (2 == indexPath.section) {
15         cell.photoImage.image = [UIImage imageNamed:@"3"];
16     }
17
18     return cell;
19 }

　　　RootCell 为自定义 Cell　　

　　② 选择实现的代理方法

　　　UICollectionView 有很多可以选择实现的代理方法,例如:

• 设置分区个数:

1 // 返回分组个数
2 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
3 {
4     return 3;
5 }

• Item点击方法

1 // 点击Item
2 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
3 {
4     SecondViewController *secondVC = [SecondViewController new];
5
6     [self.navigationController pushViewController:secondVC animated:YES];
7 }

• 返回头部, 尾部视图的样式

　　　UICollectionView 不能像 UITableView 一样直接指定头部和尾部视图, 需要注册使用, 最大的好处是添加了重用机制。

 1     // 注册头视图
 2     [self.rootView.collectionView registerClass:[HeaderReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
 3
 4     // 注册尾视图
 5     [self.rootView.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];
 6 // 返回头视图和尾视图
 7 - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
 8 {
 9     // 判断是头视图还是尾视图
10     if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
11
12         HeaderReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"headerView" forIndexPath:indexPath];
13
14 //        headerView.backgroundColor = [UIColor redColor];
15
16         switch (indexPath.section) {
17             case 0:
18                 headerView.headerLabel.text = @"学生期";
19                 break;
20             case 1:
21                 headerView.headerLabel.text = @"生活期";
22                 break;
23             case 2:
24                 headerView.headerLabel.text = @"程序员";
25                 break;
26             default:
27                 break;
28         }
29         return headerView;
30     }
31
32     UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView" forIndexPath:indexPath];
33     footerView.backgroundColor = [UIColor lightGrayColor];
34
35     return footerView;
36 }

　　效果图:

3. 布局协议

　　布局协议: UICollectionViewDelegateFlowLayout , 它是对 UICollectionViewDelegate 的扩展