布局UIConllectionView

1 // 声明集合视图属性
2 @property (nonatomic, strong) UICollectionView *collectionView;
3 
4 // UICollectionViewFlowLayout 用来给collectionView布局
5 @property (nonatomic, strong) UICollectionViewFlowLayout *myFlowLayout;

 1 - (void)initLayout
 2 {
 3     // 1. 定义collectionView样式
 4     
 5     self.myFlowLayout = [[UICollectionViewFlowLayout alloc] init];
 6     
 7     // 设置属性
 8     self.myFlowLayout.itemSize = CGSizeMake((self.bounds.size.width - 20 - 20.1) / 7, (self.bounds.size.width - 20 - 20.1) / 7);
 9     
10     // 每两个Item的最小间隙(垂直滚动)
11     self.myFlowLayout.minimumInteritemSpacing = 10;
12     // 每两个Item的最小间隙(水平滚动)
13     self.myFlowLayout.minimumLineSpacing = 10;
14     // 设置滚动方向
15     self.myFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;// 垂直方向
16     // 设置视图的内边距(上左下右)
17     self.myFlowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
18     
19     // 布局头视图尺寸
20     self.myFlowLayout.headerReferenceSize = CGSizeMake(30, 80);
21     
22     // 布局尾视图尺寸
23     self.myFlowLayout.footerReferenceSize = CGSizeMake(30, 40);
24     
25     // 2. 布局collectionView
26     // 创建对象并指定样式
27     self.collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:self.myFlowLayout];
28     self.collectionView.backgroundColor = [UIColor cyanColor];
29     [self addSubview:self.collectionView];
30     
31     
32 }

@interface HeaderReusableView : UICollectionReusableView

@property (nonatomic, strong) UILabel *headerLable;

 1 @implementation HeaderReusableView
 2 
 3 
 4 - (instancetype)initWithFrame:(CGRect)frame
 5 {
 6     self = [super initWithFrame:frame];
 7     if (self) {
 8         // 布局子视图
 9         [self initLayout];
10     }
11     return self;
12 }
13 
14 // 布局子视图
15 - (void)initLayout
16 {
17     self.headerLable = [[UILabel alloc] initWithFrame:self.bounds];
18     self.headerLable.backgroundColor = [UIColor blueColor];
19     self.headerLable.textAlignment = NSTextAlignmentCenter;
20     [self addSubview:self.headerLable];
21     
22 }

  1 #import "RootViewController.h"
  2 #import "RootView.h"
  3 #import "RootCell.h"
  4 #import "HeaderReusableView.h"
  5 #import "SecondViewController.h"
  6 // 遵守协议
  7 @interface RootViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
  8 @property (nonatomic,strong) RootView *rootView;
  9 @end
 10 
 11 @implementation RootViewController
 12 
 13 - (void)loadView
 14 {
 15     self.rootView = [[RootView alloc] initWithFrame:[UIScreen mainScreen].bounds];
 16     self.view = self.rootView;
 17 }
 18 
 19 // 定义全局的重用标识符
 20 static NSString *const identifier_cell = @"identifier_cell";
 21 
 22 - (void)viewDidLoad {
 23     [super viewDidLoad];
 24     // 设置代理
 25     self.rootView.collectionView.delegate = self;
 26     self.rootView.collectionView.dataSource = self;
 27     
 28     // 第一步: 注册cell
 29     [self.rootView.collectionView registerClass:[RootCell class] forCellWithReuseIdentifier:identifier_cell];
 30     
 31     // 注册头视图 头视图和尾视图都是继承与UICollectionReusableView
 32     [self.rootView.collectionView registerClass:[HeaderReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
 33     // 注册尾视图
 34     [self.rootView.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];
 35 }
 36 
 37 
 38 #pragma mark UICollectionViewDataSource Method-----
 39 // 设置多少分区
 40 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
 41 {
 42     return 3;
 43 }
 44 
 45 
 46 // 设置每个分区里面有几个Item
 47 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
 48 {
 49     return 10;
 50 }
 51 
 52 
 53 // 返回每一个Item的cell对象
 54 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
 55 {
 56     // 第二步: 重用cell
 57     RootCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:identifier_cell forIndexPath:indexPath];
 58     cell.backgroundColor = [UIColor orangeColor];
 59     if (indexPath.section == 0) {
 60         cell.photoImage.image = [UIImage imageNamed:@"111.jpg"];
 61 
 62     }
 63     if (indexPath.section == 1) {
 64         cell.photoImage.image = [UIImage imageNamed:@"2.jpg"];
 65     }
 66     
 67     if (indexPath.section == 2) {
 68         cell.photoImage.image = [UIImage imageNamed:@"111111.jpg"];
 69 
 70     }
 71     
 72     
 73     return cell;
 74 }
 75 
 76 // 返回头视图和尾视图
 77 
 78 - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
 79 {
 80     // 判断是头视图还是尾视图
 81     if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
 82       HeaderReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"headerView" forIndexPath:indexPath];
 83         headerView.backgroundColor = [UIColor redColor];
 84         switch (indexPath.section) {
 85             case 0:
 86                 headerView.headerLable.text = @"女神";
 87 
 88                 break;
 89             case 1:
 90                 headerView.headerLable.text = @"兵哥哥";
 91                 break;  
 92             case 2:
 93                 headerView.headerLable.text = @"男神";
 94             default:
 95                 break;
 96         }
 97         
 98         
 99         return headerView;
100     }
101     
102    
103         UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footerView" forIndexPath:indexPath];
104     footerView.backgroundColor = [UIColor greenColor];
105 
106     
107     return footerView;
108     
109 }
110 
111 // 点击Item
112 
113 - (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
114 {
115     SecondViewController *secondVC = [[SecondViewController alloc] init];
116     [self.navigationController pushViewController:secondVC animated:YES];
117     
118     //[collectionView deselectItemAtIndexPath:indexPath animated:YES];
119 }