相信了解UICollectionView的也一定听过瀑布流吧，开始之前先提供两个瀑布流，有时间的可以深入研究研究
https://github.com/dingpuyu/WaterFall
https://github.com/zhangsuya/SYStickHeaderWaterFall
直接上代码吧，里面有注释，工程效果图：
文件目录：
思路步骤：
1.创建RootViewController，将RootViewController作为Window的根视图：代码的实现在AppDelegate.m中
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.window.backgroundColor = [UIColor whiteColor];
[self.window makeKeyAndVisible];
UINavigationController *rootNav = [[UINavigationController alloc] initWithRootViewController:[[RootViewController alloc] init]];
self.window.rootViewController = rootNav;
2.创建视图RootView替换RootViewController自带的view：在RootViewController.m中实现
- (void)loadView {
self.rootView = [[RootView alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.view = self.rootView;
}
3.创建自定义cell。
各文件的具体代码如下：
RootViewController.h
#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
//定义全局的重用标识符
static NSString *const identifier_cell = @"identifier_cell";
- (void)loadView {
self.rootView = [[RootView alloc] initWithFrame:[UIScreen mainScreen].bounds];
self.view = self.rootView;
}
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
//设置代理
self.rootView.collectionView.delegate = self;
self.rootView.collectionView.dataSource = self;
//第一步：注册cell
[self.rootView.collectionView registerClass:[RootCell class] forCellWithReuseIdentifier:identifier_cell];
//注册头视图
// [self.rootView.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
//注册尾视图
[self.rootView.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView"];
//注册自定义头视图
[self.rootView.collectionView registerClass:[HeaderReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
}
#pragma mark UICollectionViewDataSource Method------------
//设置多少个分区
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 4;
}
//设置每个分区里面有几个item（必须实现）
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 5;
}
//返回每个item的cell对象(必须实现)
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
//第二步：重用cell
RootCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:identifier_cell forIndexPath:indexPath];
cell.backgroundColor = [UIColor orangeColor];
switch (indexPath.section) {
case 0:{
cell.photoImage.image = [UIImage imageNamed:@"22"];
return cell;
}
case 1:{
cell.photoImage.image = [UIImage imageNamed:@"5"];
return cell;
}
}
cell.photoImage.image = [UIImage imageNamed:@"33"];
return cell;
}
//返回头视图和尾视图
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
//判断是头视图还是尾视图
//头视图
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
HeaderReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];
//headerView.backgroundColor = [UIColor redColor];
headerView.headerLabel.text = @"海贼王";
return headerView;
}
//尾视图
if ([kind isEqualToString:UICollectionElementKindSectionFooter]) {
UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView" forIndexPath:indexPath];
footerView.backgroundColor = [UIColor whiteColor];
return footerView;
}
return nil;
}
//点击Item实现跳转
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
SecondViewController *secondVC = [[SecondViewController alloc] init];
[self.navigationController pushViewController:secondVC animated:YES];
}
@end
RootView.h
@interface RootView : UIView
//声明集合视图属性
@property (nonatomic, strong) UICollectionView *collectionView;
//专门给cllectionView布局的（必须有）
@property (nonatomic, strong) UICollectionViewFlowLayout *myFlowLayout;
@end
RootView.m
#import "RootView.h"
@implementation RootView
-(instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
//初始化布局
[self initLayout];
}
return self;
}
//初始化布局
- (void)initLayout {
//1.定义collectionView的样式
self.myFlowLayout = [[UICollectionViewFlowLayout alloc] init];
//设置属性
//给定item的大小
self.myFlowLayout.itemSize = CGSizeMake((self.bounds.size.width - 40.1) / 3, (self.bounds.size.width - 40.1) / 3);
//垂直滚动的间隙：任意两个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(100, 100);//默认是屏幕的宽度，高度自己设定
//指定尾视图的尺寸
self.myFlowLayout.footerReferenceSize = CGSizeMake(100, 10);//默认是屏幕的宽度，高度自己设定
//2.布局collectionView
//创建对象并指定样式
self.collectionView = [[UICollectionView alloc] initWithFrame:self.bounds collectionViewLayout:self.myFlowLayout];
self.collectionView.backgroundColor = [UIColor greenColor];
//添加到父视图
[self addSubview:self.collectionView];
}
@end
RootCell.h
#import <UIKit/UIKit.h>
@interface RootCell : UICollectionViewCell
//声明imageView的子控件
@property (nonatomic, strong) UIImageView *photoImage;
@end
RootCell.m
#import "RootCell.h"
@implementation RootCell
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self initLayout];
}
return self;
}
//布局子视图
- (void)initLayout {
self.photoImage = [[UIImageView alloc] initWithFrame:self.bounds];
[self.contentView addSubview:self.photoImage];
}
@end
上面只是UICollectionView的一点基础操作，内容比较简单，但都是一些最基本的属性、方法的应用，至于复杂的功能实现，网络上有好多，根据自己的需求下载demo进行参考：最后再提供一个酷炫demo的链接：https://github.com/panghaijiao/HJCarouselDemo