布局UIConllectionView

1.在UIView/.h文件中声明属性

// 声明集合视图属性
@property (nonatomic, strong) UICollectionView *collectionView;

// UICollectionViewFlowLayout 用来给collectionView布局
@property (nonatomic, strong) UICollectionViewFlowLayout *myFlowLayout;

2.在UIView/.m文件中重写init方法布局UIConllectionView

- (void)initLayout
{
    // 1. 定义collectionView样式
    
    self.myFlowLayout = [[UICollectionViewFlowLayout alloc] init];
    
    // 设置属性
    self.myFlowLayout.itemSize = CGSizeMake((self.bounds.size.width - 20 - 20.1) / 7, (self.bounds.size.width - 20 - 20.1) / 7);
    
    // 每两个Item的最小间隙(垂直滚动)
    self.myFlowLayout.minimumInteritemSpacing = 10;
    // 每两个Item的最小间隙(水平滚动)
    self.myFlowLayout.minimumLineSpacing = 10;
    // 设置滚动方向
    self.myFlowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;// 垂直方向
    // 设置视图的内边距(上左下右)
    self.myFlowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
    
    // 布局头视图尺寸
    self.myFlowLayout.headerReferenceSize = CGSizeMake(30, 80);
    
    // 布局尾视图尺寸
    self.myFlowLayout.footerReferenceSize = CGSizeMake(30, 40);
    
    // 2. 布局collectionView
    // 创建对象并指定样式
    self.collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:self.myFlowLayout];
    self.collectionView.backgroundColor = [UIColor cyanColor];
    [self addSubview:self.collectionView];
    
    
}

3.布局UICollectionReusableView

3.1.h文件

@interface HeaderReusableView : UICollectionReusableView

@property (nonatomic, strong) UILabel *headerLable;

3.2.m文件

@implementation HeaderReusableView


- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // 布局子视图
        [self initLayout];
    }
    return self;
}

// 布局子视图
- (void)initLayout
{
    self.headerLable = [[UILabel alloc] initWithFrame:self.bounds];
    self.headerLable.backgroundColor = [UIColor blueColor];
    self.headerLable.textAlignment = NSTextAlignmentCenter;
    [self addSubview:self.headerLable];
    
}

 

4.在ViewController中实现以下方法

#import "RootViewController.h"
#import "RootView.h"
#import "RootCell.h"
#import "HeaderReusableView.h"
#import "SecondViewController.h"
// 遵守协议
@interface RootViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
@property (nonatomic,strong) RootView *rootView;
@end

@implementation RootViewController

- (void)loadView
{
    self.rootView = [[RootView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.view = self.rootView;
}

// 定义全局的重用标识符
static NSString *const identifier_cell = @"identifier_cell";

- (void)viewDidLoad {
    [super viewDidLoad];
    // 设置代理
    self.rootView.collectionView.delegate = self;
    self.rootView.collectionView.dataSource = self;
    
    // 第一步: 注册cell
    [self.rootView.collectionView registerClass:[RootCell class] forCellWithReuseIdentifier:identifier_cell];
    
    // 注册头视图 头视图和尾视图都是继承与UICollectionReusableView
    [self.rootView.collectionView registerClass:[HeaderReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
    // 注册尾视图
    [self.rootView.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];
}


#pragma mark UICollectionViewDataSource Method-----
// 设置多少分区
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 3;
}


// 设置每个分区里面有几个Item
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 10;
}


// 返回每一个Item的cell对象
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    // 第二步: 重用cell
    RootCell *cell =[collectionView dequeueReusableCellWithReuseIdentifier:identifier_cell forIndexPath:indexPath];
    cell.backgroundColor = [UIColor orangeColor];
    if (indexPath.section == 0) {
        cell.photoImage.image = [UIImage imageNamed:@"111.jpg"];

    }
    if (indexPath.section == 1) {
        cell.photoImage.image = [UIImage imageNamed:@"2.jpg"];
    }
    
    if (indexPath.section == 2) {
        cell.photoImage.image = [UIImage imageNamed:@"111111.jpg"];

    }
    
    
    return cell;
}

// 返回头视图和尾视图

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    // 判断是头视图还是尾视图
    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
      HeaderReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"headerView" forIndexPath:indexPath];
        headerView.backgroundColor = [UIColor redColor];
        switch (indexPath.section) {
            case 0:
                headerView.headerLable.text = @"女神";

                break;
            case 1:
                headerView.headerLable.text = @"兵哥哥";
                break;  
            case 2:
                headerView.headerLable.text = @"男神";
            default:
                break;
        }
        
        
        return headerView;
    }
    
   
        UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footerView" forIndexPath:indexPath];
    footerView.backgroundColor = [UIColor greenColor];

    
    return footerView;
    
}

// 点击Item

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    SecondViewController *secondVC = [[SecondViewController alloc] init];
    [self.navigationController pushViewController:secondVC animated:YES];
    
    //[collectionView deselectItemAtIndexPath:indexPath animated:YES];
}