UICollectionView

---

前言

本篇：进行UICollectionView的学习

---

提示：以下是本篇文章正文内容，下面案例可供参考

基础

概念

UICollectionView是我们常说的集合视图，是iOS开发者中最受欢迎的UI控件之一。其布局灵活可变，可用于显示有限数据项集，最常见的用途是网格的形式显示item，初次之外还可以通过子类化UICollectionViewLayOut泪，精准的控制可视化元素布局，并动态改变布局，可以实现网格，堆栈，圆形，动态变化，和任何能想象到的布局

UICollectionView与相关对象关系

data source用于提供呈现数据的视图对象
Collection View layout用于提供视图布局信息
Collection view负责将数据和布局信息整合后呈现到屏幕上

注意事项

创建UICollectionView对象时，必须传递一个UICollectionViewLayout对象，而UICollectionViewLayout对象不能直接使用，必须使用其子类，在创建网格布局时一般使用其子类UIConllectionViewFlowLayout的子类

强大的控件

UICollectionView是比UItableView更强大的一个控件。

1. 支持水平和垂直两种方向的布局
2. 通过layout方式进行布局
3. 类似tableView中的cell，UICollectionView中的item可以自由定义大小和位置
4. 可以动态布局每个item的大小和collection的大体布局属性
5. 完全自定义一套layout的布局方案，

相关的类

UiCollectionViewLayout，UICollectionViewReusableView类必须子类化才可以使用，其他类可以直接使用

重新使用视图提高性能

UICollectionView使用了视图回收机制以提高性能，当视图被滑出屏幕时，不回删除视图，而是置于重用队列中。当UiCollectionView显示新的内容时，将从重用队列中获取视图。为便于回收和重用，UiCollectionView显示的所有视图必须派生UICollectionReusableView

• 集合视图单元格UICollectionViewCell：显示集合视图的主要内容，cell必须是UICollectionViewCell类的实例，默认支持管理高粱hightlight，选中selection状态
• 补充视图SupplementaryView：section的信息。和cell一样supplementaryView也是数据驱动的，但与cell不同的是layout控制supplementaryView的位置和是否使用。流式布局UICollectionViewFlowLayout可以选择性添加页眉sectionheader和页脚sectionfooter补充视图
• 装饰视图DecorationView：由layout完全拥有的装饰视图，且不受数据眼约束。

UICollectionView的数据源对象负责提供cell和supplementaryView，但dataSource从来不会直接创建cell，supplementaryView。当需要展示视图时，如果队列存在所需类型的视图，则会直接出列所需视图，如果队列没有所需视图，则会利用提供的nib文件，storyboard或代码创建。

例子

//  ViewController.h
//  CollectionView
//
//

#import 

@interface ViewController : UIViewController

<UICollectionViewDelegate,
UICollectionViewDataSource>

@property (strong, nonatomic) UICollectionView* collectionView;
@property (strong, nonatomic) UICollectionViewFlowLayout* flowLayout;

@end




//  ViewController.m
//  CollectionView
//
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.flowLayout = [[UICollectionViewFlowLayout alloc] init];
    self.flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    self.flowLayout.itemSize = CGSizeMake(self.view.frame.size.width/5 - 20, self.view.frame.size.height / 5 - 20);
    self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:self.flowLayout];
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"111"];
    [self.view addSubview:self.collectionView];
    
    
    // Do any additional setup after loading the view.
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 10;
}
- (UICollectionViewCell*)collectionView:(UICollectionView*)collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath{
    UICollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"111" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor grayColor];
    UILabel* lab = [[UILabel alloc] init];
    lab.frame = CGRectMake(10, 10, 30, 30);
    lab.text = @"1111";
    [cell.contentView addSubview:lab];
    return cell;
}
@end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

一些方法

//设置item间距大小
- (CGFloat)collectionView:(UICollectionView*)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    return 20;
}
1
2
3
4