UI基础 - UICollectionView 02：定制单元格

■ UICollectionViewCell

1. 准备工作

单元格 CustomCell：是 UICollectionViewCell 的子类

区头/区尾 HeaderView：是 UICollectionReusableView 的子类

图片详情页面 SecondViewController：点击单张图片则进入详情页 

2. 代码示例：具体实现

// - CustomCell.h

#import <UIKit/UIKit.h>
@interface CustomCell : UICollectionViewCell

@property(nonatomic,strong)UILabel *aLabel;
@property(nonatomic,strong)UIImageView *imageView;

@end

// - CustomCell.m

#import "CustomCell.h"
@implementation CustomCell

- (id)initWithFrame:(CGRect)frame{

    self = [super initWithFrame:frame];
    if (self) {

        self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height)];
        [self addSubview:_imageView];

        self.aLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 70, self.bounds.size.width, 30)];
        _aLabel.font = [UIFont systemFontOfSize:14];
        [self addSubview:_aLabel];
    }
    return self;
}

@end

// - HeaderView.h

#import <UIKit/UIKit.h>
@interface HeaderView : UICollectionReusableView

@property(nonatomic,strong)UILabel *aLabel;// 内含一个 label

@end

// - HeaderView.m

#import "HeaderView.h"
@implementation HeaderView

- (id)initWithFrame:(CGRect)frame{

    self = [super initWithFrame:frame];
    if (self) {

        self.aLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 5, self.bounds.size.width, 20)];
        _aLabel.backgroundColor = [UIColor grayColor];
        _aLabel.font = [UIFont systemFontOfSize:14];
        [self addSubview:_aLabel];
    }
    return self;
}

@end

// - SecondViewController.h

#import <UIKit/UIKit.h>
@interface SecondViewController : UIViewController

@property(nonatomic,strong)UIImage *aImage;       // pic
@property(nonatomic,strong)UIImageView *imageView;// picView
@property(nonatomic,strong)UIScrollView *scrollView;


@end

// - SecondViewController.m

#import "SecondViewController.h"
@implementation SecondViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    self.navigationItem.title = @"图片详情";
    [self.view addSubview:self.scrollView];
    // 是否自动适应 ScrollView 的内移量：内容视图是否下移 64 开始显示，默认 YES
    self.automaticallyAdjustsScrollViewInsets = NO;
}

- (UIImageView *)imageView{

    if (_imageView == nil) {

        self.imageView = [[UIImageView alloc] initWithImage:self.aImage];// 图片有多大，imageView 的尺寸就有多大
    }
    return _imageView;
}

- (UIScrollView *)scrollView{

    if (_scrollView == nil) {

        self.scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
        self.scrollView.contentSize = self.aImage.size;
        [self.scrollView addSubview:self.imageView];
    }
    return _scrollView;
}

@end

// - ViewController.m

#import "ViewController.h"
#import "CustomCell.h"
#import "HeaderView.h"
#import "SecondViewController.h"
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UIScrollViewDelegate>

@property(nonatomic,strong)NSMutableArray *dataArray;
@property(nonatomic,strong)UIImageView *imageView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor cyanColor];
    self.navigationItem.title = @"集合视图";
    
    // 隐藏标题
    UIBarButtonItem *backItem = [[UIBarButtonItem alloc] init];
    backItem.title = @" ";
    self.navigationItem.backBarButtonItem = backItem;

    // 加载数据
    self.dataArray = [NSMutableArray array];
    for (int i =0; i < 45; i ++) {
        UIImage * aImage = [UIImage imageNamed:[NSString stringWithFormat:@"%d.JPG",i+1]];
        [self.dataArray addObject:aImage];
    }

    // Layout
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.itemSize = CGSizeMake(100, 100);// 尺寸默认是 50*50
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
    flowLayout.minimumLineSpacing = 35;// 行距
    //flowLayout.minimumInteritemSpacing = 100;// item 间距
    //flowLayout.sectionInset = UIEdgeInsetsMake(30, 0, 0, 0);// 分区偏移量
    
    // footerReferenceSize  区尾视图
    // headerReferenceSize  区头视图
    flowLayout.headerReferenceSize = CGSizeMake(self.view.bounds.size.width, 40);
    
    // UICollectionView 实例
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height) collectionViewLayout:flowLayout];
    
    // 调整 collectionView 显示内容的偏移量
    collectionView.contentInset = UIEdgeInsetsMake(5, 0, 0, 0);// 向下偏移 5 个像素
    collectionView.dataSource = self;
    collectionView.delegate = self;
    
    // 注册区头
    [collectionView registerClass:[HeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerVw"];
    // 注册 cell
    [collectionView registerClass:[CustomCell class] forCellWithReuseIdentifier:@"cell"];
    [self.view addSubview:collectionView];

}

#pragma mark - <UICollectionViewDataSource>
// 每分区有几个 Item
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{

    return self.dataArray.count;
}

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 2;
}

// 创建 cell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{

    CustomCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
    cell.aLabel.textColor = [UIColor redColor];
    cell.aLabel.text = [NSString stringWithFormat:@"s:%d,r:%d",indexPath.section,indexPath.row];
    UIImage *aImage = self.dataArray[indexPath.row];
    cell.imageView.image = aImage;
    return cell;
}

// 区头视图，同样也可以制定区尾视图（前提是先制定区头大小）
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{

    if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {

        HeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerVw" forIndexPath:indexPath];

        headerView.backgroundColor = [UIColor orangeColor];
        headerView.aLabel.text = [NSString stringWithFormat:@"第%d个区头",indexPath.section + 1];
        return headerView;
    }
    return nil;
}

#pragma mark - <UICollectionViewDelegate>
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{

    // 详情页
    UIImage *aImage = self.dataArray[indexPath.row];
    SecondViewController *secondVC = [[SecondViewController alloc] init];
    secondVC.aImage = aImage;
    [self.navigationController pushViewController:secondVC animated:YES];
}
@end

运行效果：ViewController | SecondViewController