实现效果如下:
第一个页面:
首先有一个自定义的cell 和一个重用的头部视图.
在主页面ViewController.m 中具体的逻辑实现如下所示 :
#import "ViewController.h"//导入自定义cell
#import "CollectionViewCell.h"
//细节页面
#import "DetailCollectionViewController.h"
//添加头部视图第一步
#import "HeaderCollectionReusableView.h"static NSString *const identifier = @"cell";static NSString *const headerId = @"header";
//遵循代理
@interface ViewController ()<UICollectionViewDelegate, UICollectionViewDataSource>@end@implementation ViewController- (void)viewDidLoad {
[super viewDidLoad];
//1. 设置布局对象
UICollectionViewFlowLayout *flowLayout = [UICollectionViewFlowLayout new];
//设置item大小
flowLayout.itemSize = CGSizeMake(100, 100);
//设置列间距(设置根据屏幕大小和item的大小自动调整, 不稳定值)
flowLayout.minimumInteritemSpacing = 20;
//设置行间距
flowLayout.minimumLineSpacing = 10;
//设置滚动方向
flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
//设置分组边距(上 左 下 右)
flowLayout.sectionInset = UIEdgeInsetsMake(5, 5, 5, 5); //添加头部视图第二步 flowLayout.headerReferenceSize = CGSizeMake(414, 30);
//2. 创建UICollectionView对象
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:flowLayout];
//设置背景颜色
collectionView.backgroundColor = [UIColor colorWithRed:1.000 green:0.000 blue:0.075 alpha:1.000]; //注册cell
[collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:identifier];
//添加头部视图第三步 [collectionView registerClass:[HeaderCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerId];
//设置代理
collectionView.delegate = self; collectionView.dataSource = self;
//添加到视图上
[self.view addSubview:collectionView];
}
//协议必须实现的方法
//1. 返回每个分区内, item的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{ return 15;
}
//2. 返回cell
-
(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
//重用给定标识的cell对象
CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier forIndexPath:indexPath];cell.backgroundColor = [UIColor cyanColor];
//自定义cell中设置的属性
cell.imageView.image = [UIImage imageNamed:@"1"]; return cell;
}
//返回分组的个数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{ return 2;
}
//选中item对象触发的方法- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
//在该方法中, 要实现页面的跳转, 而跳转后的页面同样是一个collectionView, 在跳转之前我们必须对他进行布局, 否则会崩溃
UICollectionViewFlowLayout *flowLayout = [UICollectionViewFlowLayout new]; flowLayout.itemSize = CGSizeMake(40, 40); DetailCollectionViewController *detailVC = [[DetailCollectionViewController alloc] initWithCollectionViewLayout:flowLayout]; [self showViewController:detailVC sender:nil];
}
//添加头部视图第四步- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
//重用注册的头部视图对象
HeaderCollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:headerId forIndexPath:indexPath]; headerView.headrLabel.text = @"头部视图"; return headerView;
}
//返回分组的边距(上左下右的)距离- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(nonnull UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{ if (section == 0) { return UIEdgeInsetsMake(10, 10, 10, 10); } return UIEdgeInsetsMake(30, 30, 30, 30);
}
- (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated.
}
@end
*****1. 自定义cell类的实现******
*CollectionViewCell.h文件中, 给自定义的cell, 添加一个属性用来存放图片
import <UIKit/UIKit.h>@interface CollectionViewCell : UICollectionViewCell
//属性用来存放图片
@property (strong, nonatomic) UIImageView *imageView;
@end
*CollectionViewCell.m文件中, 主要是实现自定义cell中控件的布局和初始化操作
import "CollectionViewCell.h"@implementation CollectionViewCell- (instancetype) initWithFrame:(CGRect)frame{ if (self = [super initWithFrame:frame]) { self.imageView = [[UIImageView alloc] initWithFrame:CGRectZero]; self.imageView.backgroundColor = [UIColor yellowColor]; self.imageView.layer.masksToBounds = YES; self.imageView.contentMode = UIViewContentModeScaleAspectFill; [self.contentView addSubview:self.imageView]; } return self;}- (void)layoutSubviews{ self.imageView.frame = self.contentView.frame;}
@end
*****2. 重用的头部视图******
*在HeaderCollectionReusableView.h文件中, 声明一个属性,用来添加标题
import <UIKit/UIKit.h>@interface HeaderCollectionReusableView : UICollectionReusableView@property (nonatomic, strong) UILabel *headrLabel;
@end
*在HeaderCollectionReusableView.m文件中, 主要实现头部视图的布局初始化
import "HeaderCollectionReusableView.h"@implementation HeaderCollectionReusableView- (instancetype)initWithFrame:(CGRect)frame{ if (self = [super initWithFrame:frame]) { self.headrLabel = [[UILabel alloc] initWithFrame:CGRectZero]; self.headrLabel.backgroundColor = [UIColor greenColor]; [self addSubview:self.headrLabel]; } return self;}- (void)layoutSubviews{ self.headrLabel.frame = CGRectMake(0, 0, 414, 40);}
@end
第二个页面:
新建一个继承于UICollectionViewController的类,在这个类创建完成的时候, 已经生成了他所必须的部分
DetailCollectionViewController.m文件中的具体实现如下:
import "DetailCollectionViewController.h"
//导入一个工具类, 用来实现随机颜色
import "UIColor+RandomColor.h"
@interface DetailCollectionViewController ()@end@implementation DetailCollectionViewControllerstatic NSString * const reuseIdentifier = @"Cell";- (void)viewDidLoad { [super viewDidLoad]; [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:reuseIdentifier]; self.collectionView.backgroundColor = [UIColor blackColor]; //添加定时器第一步 [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(ChangeColor) userInfo:nil repeats:YES]; }//添加定时器第二步- (void)ChangeColor{ [self.collectionView reloadData];}
pragma mark <UICollectionViewDataSource>- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return 1;}
(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return 100;}- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:reuseIdentifier forIndexPath:indexPath]; cell.backgroundColor = [UIColor randomColor]; return cell;}
(void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated.
}
@end
