UICollectionView的使用（与UITableView的比较）

Leave a reply

1、先看两者比较的效果图

160302_4zyd_865233iOS 模拟器屏幕快照“2014年5月30日 下午3.20.46”

2、特点：

2.1、都继承自UIScrollView，因此这两者可以说是兄弟关系，都是用于数据展示方面都是非凡的表现，并且UICollectionView自iOS6以来才支持；

2.2、Collection View的整体构成元素，共有三个要素，分别如下

  • Cells(单元格)
  • Supplementary Views（补充的view，相当于TableView的页眉和页脚）
  • Decoration Views（装饰View，用于装饰整个CollectionView的

2.3、数据模型(数据提供者UICollectionViewDataSource)，主要功能：

  • Section数目
  • Section里面有多少item
  • 提供Cell和supplementary view设置

分别为：

1
2
3
4
5

numberOfSectionsInCollectionView:
 
collectionView:numberOfItemsInSection:
 
collectionView:cellForItemAtIndexPath:

2.4、Cell和View的重用
在iOS6中，Cell重用改善，我们可以更加方便的使用Cell，系统总是为我们初始化Cell。我们可以直接使用。只需要简单的按照两步走即可：

1） 必须使用下面的方法进行Cell类的注册：

1
2
3
4
5
6
7

- (void)registerClass:forCellWithReuseIdentifier:
 
- (void)registerClass:forSupplementaryViewOfKind:withReuseIdentifier:
 
- (void)registerNib:forCellWithReuseIdentifier:
 
- (void)registerNib:forSupplementaryViewOfKind:withReuseIdentifier:

2） 从队列中取出一个Cell,具体方法如下：

1
2
3

-(id)dequeueReusableCellWithReuseIdentifier:forIndexPath:
 
-(id)dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:

2.5、界面布局
collectionView与tableView最大的不同点就在于此，collectionView必须要使用自己的layout（UICollectionViewLayout）
如：

1
2
3
4
5

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.itemSize = CGSizeMake(52, 52);               // cell大小
flowLayout.minimumInteritemSpacing = 1;                 // cell间距
flowLayout.minimumLineSpacing = 1;                      // cell行距
flowLayout.sectionInset = (UIEdgeInsets){81,1,1,1};     // cell边距

创建collectionView需要带Layout的初始化方法：

1

- (id)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout;

3、示例

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

//
//  CarLicenseView.m
//  RouteMapInformation
//
//  Created by yusian on 14-5-29.
//  Copyright (c) 2014年 yusian. All rights reserved.
//
 
#import "CarLicenseView.h"
 
/****************************Cell定义*********************************/
 
@interface SALicenseCell : UICollectionViewCell
 
@property (nonatomic, strong) UILabel *label;
 
@end
 
@implementation SALicenseCell
 
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
 
        // 键盘文字设置
        self.label = [[UILabel alloc] init];
        self.label.backgroundColor = [UIColor clearColor];  // 透明颜色
        self.label.textAlignment = NSTextAlignmentCenter;   // 文字居中
        self.label.frame = CGRectMake(0, 0, 52, 52);        // 位置大小
        self.label.font = [UIFont systemFontOfSize:20];     // 文字大小
        self.backgroundColor = [UIColor whiteColor];        // 背景颜色
 
 
        [self.contentView addSubview:self.label];
    }
    return self;
}
 
+ (NSString *)ID
{
    return @"licenseCellID";
}
 
@end
 
/****************************Cell定义*********************************/
 
@interface CarLicenseView () <UICollectionViewDataSource, UICollectionViewDelegate, UIAlertViewDelegate>
 
@end
 
@implementation CarLicenseView
 
#pragma mark 界面初始化
- (id)initWithFrame:(CGRect)frame
{
    // 1、键盘按钮布局
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.itemSize = CGSizeMake(52, 52);               // 按键大小
    flowLayout.minimumInteritemSpacing = 1;                 // 按键间距
    flowLayout.minimumLineSpacing = 1;                      // 按键行距
    flowLayout.sectionInset = (UIEdgeInsets){81,1,1,1};     // 按键边距
 
    // 2、键盘附加视图
    self = [super initWithFrame:frame collectionViewLayout:flowLayout];
    if (self) {
        // 键盘背景色
        self.backgroundColor = [UIColor colorWithWhite:0.9 alpha:0.8];
 
    }
 
    // 3、注册按钮类（内部处理机制）
    [self registerClass:[SALicenseCell class] forCellWithReuseIdentifier:[SALicenseCell ID]];
    self.delegate = self;
    self.dataSource = self;
 
    return self;
}
 
#pragma mark 界面绘制方法
#pragma mark 键盘按键数目
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 30;
}
 
#pragma mark 键盘按键文字
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    SALicenseCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:[SALicenseCell ID] forIndexPath:indexPath];
    cell.backgroundColor = [UIColor blueColor];
    return cell;
}
@end

Leave a Reply