1、创建与基础设置
// 创建网格视图布局对象，可以设置滑动方向，cell 的间距等
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
// 两个cell之间最小的行间距
flowLayout.minimumLineSpacing = 0;
// 两个cell之间最小的间距
flowLayout.minimumInteritemSpacing = 0;
// cell的滚动排布方向
flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
// 创建网格视图对象，必须带上布局对象
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];
// 添加到父控件
[self.view addSubview:collectionView];
// 设置数据源
collectionView.dataSource = self;
// 设置代理
collectionView.delegate = self;
// 设置位置尺寸
collectionView.frame = self.view.bounse;
// 设置网格背景颜色
collectionView.backgroundColor = [UIColor clearColor];
// UICollectionView继承于UIScrollView，可使用父类设置属性
// 开启分页效果
collectionView.pagingEnabled = YES;
// 关闭弹簧效果
collectionView.bounces = NO;
// 不要显示水平滚动条
collectionView.showsHorizontalScrollIndicator = NO;
// 注册自定义表格视图
[collectionView registerClass:[CustomCollectionCell class] forCellWithReuseIdentifier:CustomCollectionCellID];
2、设置数据源与代理方法
// 设置分段数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 3;
}
// 设置网格数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.myDataArray.count;
}
// 设置网格大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)
indexPath {
return CGSizeMake((self.view.bounds.size.width - 40) / 3, 150);
}
// 设置每个网格的内容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
// 使用自定义 Cell 创建，cell 必须用注册的方式定义
CustomCollectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CustomCollectionCellID forIndexPath:indexPath];
// 数据模型
CustomItem *dataItem = self.myDataArray[indexPath.row];
// 设置 Cell 数据模型
cell.dataItem = dataItem;
return cell;
}
// 设置最小网格间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
/*
垂直滑动时，系统会根据屏幕宽度和网格（cell）的宽度在大于等于最小网格（cell）间距的范围内自动调整。
水平滑动时，系统会根据屏幕高度和网格（cell）的高度在大于等于最小网格（cell）间距的范围内自动调整。
*/
return 10;
}
// 设置最小行间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
return 10;
}
// 设置分段周边距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
// 上，左，下，右
return UIEdgeInsetsMake(20, 10, 20, 10);
}
// 网格点击
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
}
// 网格取消点击，点击另一个表格的时候触发
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath {
}
3、自定义cell
-
3.1 CustomCollectionCell.h
@class CustomItem;
@interface CustomCollectionCell : UICollectionViewCell
@property(nonatomic, strong) CustomItem *dataItem;
@end
-
3.2 CustomCollectionCell.m
@interface CustomCollectionCell ()
@end
@implementation CustomCollectionCell
- (instancetype)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
// 添加子控件
}
return self;
}
// 设置数据
- (void)setDataItem:(CustomItem *)dataItem {
_dataItem = dataItem;
}
// 布局子控件位置
- (void)layoutSubviews {
[super layoutSubviews];
}
@end
4、自定义分段头尾的创建与引用
-
4.1 引用
// 注册分段头视图
[collectionView registerClass:[myHeaderFooterView1 class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
// 注册分段尾视图
[collectionView registerClass:[myHeaderFooterView1 class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];
// 设置分段头大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)
section {
/*
width 为水平滑动时，间距有效。height 为垂直滑动时，间距有效。
*/
return CGSizeMake(20, 30);
}
// 设置分段尾大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)
section {
/*
width 为水平滑动时，间距有效。height 为垂直滑动时，间距有效。
*/
return CGSizeMake(20, 30);
}
// 设置分段头尾的内容
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)
indexPath {
// collectionView 分段头尾的设置注册复用
myHeaderFooterView1 *view = nil;
// 分段头
if (kind == UICollectionElementKindSectionHeader) {
// 创建分段头视图
view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
// 设置分段头的内容
view.nameLabel.text = [NSString stringWithFormat:@"第 %ld 段 Header", indexPath.section];
}
// 分段尾
else {
// 创建分段尾视图
view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer" forIndexPath:indexPath];
// 设置分段尾视图的内容
view.nameLabel.text = [NSString stringWithFormat:@"第 %ld 段结束 Footer", indexPath.section];
}
return view;
}
-
4.2 创建
@interface myHeaderFooterView : UICollectionReusableView
@property(nonatomic, retain)UILabel *nameLabel;
@end
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
_nameLabel = [[UILabel alloc] initWithFrame:self.bounds];
_nameLabel.textAlignment = NSTextAlignmentCenter;
_nameLabel.backgroundColor = [UIColor lightGrayColor];
[self addSubview:_nameLabel];
}
return self;
}
5、自定义布局风格
@interface CustomLayout : UICollectionViewLayout
@implementation CustomLayout
// 设置网格视图的大小
- (CGSize)collectionViewContentSize {
// 每行显示 3 个图标,1大2小
return CGSizeMake(self.collectionView.bounds.size.width, [self.collectionView numberOfItemsInSection:0 / 3] * 200 + 200);
}
// 设置单元格的位置属性
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
NSMutableArray *attributesArray = [[NSMutableArray alloc] init];
NSUInteger cellCount = [self.collectionView numberOfItemsInSection:0];
for (int i = 0; i < cellCount; i++) {
UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
[attributesArray addObject:attributes];
}
return attributesArray;
}
// 设置单元格的位置与大小
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
// 获取当前单元格布局属性
UICollectionViewLayoutAttributes *attribute = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
// 单元格边长
CGFloat largeCellSide = 200;
CGFloat smallCellSide = 100;
// 单元格间距
// NSUInteger itemSpacing = 2;
NSUInteger lineSpacing = 5;
// 边距
UIEdgeInsets insets = UIEdgeInsetsMake(2, 20, 2, 20);
// 当前行数
/*
每行显示 3 个图片，1 大 2 小
*/
NSInteger line = indexPath.item / 3;
// 当前行的 Y 坐标
CGFloat lineOriginY = insets.top + largeCellSide * line + lineSpacing * line;
// 右侧单元格 X 坐标
/*
这里按左右对齐，所以中间空隙大
*/
CGFloat rightLargeX = self.collectionView.bounds.size.width - largeCellSide - insets.right;
CGFloat rightSmallX = self.collectionView.bounds.size.width - smallCellSide - insets.right;
// 每行 2 个图片，2 行循环一次，一共 6 种位置
if (indexPath.item % 6 == 0) {
attribute.frame = CGRectMake(insets.left, lineOriginY, largeCellSide, largeCellSide);
}
else if (indexPath.item % 6 == 1) {
attribute.frame = CGRectMake(rightSmallX, lineOriginY, smallCellSide, smallCellSide);
}
else if (indexPath.item % 6 == 2) {
attribute.frame = CGRectMake(rightSmallX, lineOriginY + smallCellSide + insets.top, smallCellSide, smallCellSide);
}
else if (indexPath.item % 6 == 3) {
attribute.frame = CGRectMake(insets.left, lineOriginY, smallCellSide, smallCellSide);
}
else if (indexPath.item % 6 == 4) {
attribute.frame = CGRectMake(insets.left, lineOriginY + smallCellSide + insets.top, smallCellSide, smallCellSide);
}
else if (indexPath.item % 6 == 5) {
attribute.frame = CGRectMake(rightLargeX, lineOriginY, largeCellSide, largeCellSide);
}
return attribute;
}
CustomLayout *layout = [[CustomLayout alloc] init];
UICollectionView *myCollectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 20, self.view.bounds.size.width, self.view.bounds.size.height - 20) collectionViewLayout:layout];