UICollectionView

 1 #import <UIKit/UIKit.h>
 2 
 3 @interface RootView : UIView
 4 
 5 // 声明集合视图属性
 6 @property (nonatomic, strong) UICollectionView *collectionView;
 7 
 8 // UICollectionViewFlowLayout 用来给 UICollectionView 布局的
 9 @property (nonatomic, strong) UICollectionViewFlowLayout *myFlowLayout;
10 
11 @end

 1 #import "RootView.h"
 2 
 3 @implementation RootView
 4 
 5 - (instancetype)initWithFrame:(CGRect)frame
 6 {
 7     self = [super initWithFrame:frame];
 8     if (self) {
 9         [self add];
10     }
11     return self;
12 }
13 
14 
15 - (void)add {
16     
17     // 1.定义collectionView的样式
18     self.myFlowLayout = [[UICollectionViewFlowLayout alloc] init];
19     
20     // 设置属性
21     self.myFlowLayout.itemSize = CGSizeMake((self.bounds.size.width - 40.01) / 3.0, (self.bounds.size.width - 40.1) / 3.0);   // 给定item的大小
22     self.myFlowLayout.minimumInteritemSpacing = 10;    // 每两个item的最小间隙（垂直方向滚动）
23     self.myFlowLayout.minimumLineSpacing = 10;     // 每两个item的最小间隙（水平方向滚动）
24     
25     // 设置滚动方向
26     self.myFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;   // 垂直方向
27     
28     // 设置视图的内边距（上左下右）
29     self.myFlowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
30     
31     
32     // 指定头视图尺寸
33     self.myFlowLayout.headerReferenceSize = CGSizeMake(100, 80);   // 宽度设置是没用的，默认有个宽度，就是屏幕宽度
34     
35     // 指定尾视图尺寸
36     self.myFlowLayout.footerReferenceSize = CGSizeMake(100, 40);   // 宽度设置是没用的，默认有个宽度，就是屏幕宽度
37     
38     
39     // 2.布局collectionView
40     // 创建对象并指定样式
41     self.collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:self.myFlowLayout];
42     
43     self.collectionView.backgroundColor = [UIColor lightGrayColor];
44     
45     [self addSubview:self.collectionView];
46     
47 }
48 
49 @end

1 #import <UIKit/UIKit.h>
2 
3 @interface RootCell : UICollectionViewCell
4 
5 // 声明imageView的子控件
6 @property (nonatomic, strong) UIImageView *imgView;
7 
8 @end

 1 #import "RootCell.h"
 2 
 3 @implementation RootCell
 4 
 5 - (instancetype)initWithFrame:(CGRect)frame
 6 {
 7     self = [super initWithFrame:frame];
 8     if (self) {
 9         [self add];
10     }
11     return self;
12 }
13 
14 
15 - (void)add {
16     
17     self.imgView = [[UIImageView alloc] initWithFrame:self.bounds];
18     [self.contentView addSubview:self.imgView];
19     
20 }
21 
22 @end

1 #import <UIKit/UIKit.h>
2 
3 @interface HeaderReusableView : UICollectionReusableView
4 
5 @property (nonatomic, strong) UILabel *headerLabel;
6 
7 @end

 1 #import "HeaderReusableView.h"
 2 
 3 @implementation HeaderReusableView
 4 
 5 - (instancetype)initWithFrame:(CGRect)frame
 6 {
 7     self = [super initWithFrame:frame];
 8     if (self) {
 9         [self add];
10     }
11     return self;
12 }
13 
14 
15 - (void)add {
16     
17     self.headerLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 200, 60)];
18     self.headerLabel.backgroundColor = [UIColor whiteColor];
19     [self addSubview:self.headerLabel];
20     
21 }
22 
23 @end

  1 #import "RootViewController.h"
  2 #import "RootView.h"
  3 #import "RootCell.h"
  4 #import "HeaderReusableView.h"
  5 #import "TestViewController.h"
  6 
  7 @interface RootViewController () <UICollectionViewDataSource, UICollectionViewDelegate>
  8 
  9 @property (nonatomic, strong) RootView *rootView;
 10 
 11 @end
 12 
 13 // 定义全局重用标识符
 14 static NSString * const identifier_cell = @"identifier_cell";
 15 
 16 @implementation RootViewController
 17 
 18 - (void)loadView {
 19     self.rootView = [[RootView alloc] initWithFrame:[UIScreen mainScreen].bounds];
 20     self.view = self.rootView;
 21 }
 22 
 23 
 24 - (void)viewDidLoad {
 25     [super viewDidLoad];
 26     // Do any additional setup after loading the view.
 27     
 28     
 29     // 设置代理
 30     self.rootView.collectionView.dataSource = self;
 31     self.rootView.collectionView.delegate = self;
 32     
 33     
 34     // 第一步：注册cell
 35     [self.rootView.collectionView registerClass:[RootCell class] forCellWithReuseIdentifier:identifier_cell];
 36     
 37     
 38     // 注册头视图和尾视图
 39     [self.rootView.collectionView registerClass:[HeaderReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
 40     
 41     [self.rootView.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];
 42     
 43 }
 44 
 45 
 46 #pragma mark - UICollectionViewDataSource的方法
 47 
 48 // 设置分区个数
 49 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
 50     
 51     return 3;
 52 }
 53 
 54 
 55 // 设置每个分区里面有几个item
 56 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
 57     
 58     return 10;
 59 }
 60 
 61 
 62 // 返回每一个item的cell对象
 63 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
 64     
 65     // 第二步：重用cell
 66     RootCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier_cell forIndexPath:indexPath];
 67     
 68     cell.backgroundColor = [UIColor orangeColor];
 69     
 70     
 71     switch (indexPath.section) {
 72         case 0:
 73             cell.imgView.image = [UIImage imageNamed:@"00.jpg"];
 74             break;
 75         case 1:
 76             cell.imgView.image = [UIImage imageNamed:@"01.jpg"];
 77             break;
 78         case 2:
 79             cell.imgView.image = [UIImage imageNamed:@"02.jpg"];
 80             break;
 81             
 82         default:
 83             break;
 84     }
 85     
 86     return cell;
 87 }
 88 
 89 
 90 // 返回头视图和尾视图
 91 - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
 92     
 93     // 判断是头视图还是尾视图
 94     if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
 95         
 96         HeaderReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];
 97         
 98         headerView.backgroundColor = [UIColor purpleColor];
 99         
100         switch (indexPath.section) {
101             case 0:
102                 headerView.headerLabel.text = @"第一个";
103                 break;
104             case 1:
105                 headerView.headerLabel.text = @"第二个";
106                 break;
107             case 2:
108                 headerView.headerLabel.text = @"第三个";
109                 break;
110                 
111             default:
112                 break;
113         }
114         
115         
116         return headerView;
117     }
118     
119     
120     if ([kind isEqualToString:UICollectionElementKindSectionFooter]) {
121         
122         UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView" forIndexPath:indexPath];
123         
124         footerView.backgroundColor = [UIColor greenColor];
125         
126         return footerView;
127     }
128     
129     return nil;
130 }
131 
132 
133 // 点击item
134 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
135     
136     TestViewController *testVC = [[TestViewController alloc] init];
137     
138     [self.navigationController pushViewController:testVC animated:YES];
139     
140 }
141 
142 @end