IOS巅峰之UICollectionView详解

本文详细介绍了如何使用UICollectionViewFlowLayout进行 UICollectionView 的布局设置,包括行间距、列间距、宽高、滑动方向、表头表尾设置及内边距等,并提供了注册单元格及补充视图的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

UICollectionView 集合视图
遵守三个代理方法:<UICollectionViewDataSource, UICollectionViewDelegate, UICollectionDelegateFlowLayout>
//  UICollectionViewDelegateFlowLayout 点进去发现, 该类遵守了UICollectionViewDelegate
// 实际上 UICollectionViewDelegateFlowLayout 这个协议是UICollectionViewDelegate 的子协议
// 创建一个集合视图
- (void)addSubViews
{
// UICollectionViewLayout是一个抽象类, 本身没有具体功能, 其功能是由其子类实现的
// Item布局(网格状的布局)
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
// 行间距(相当于上下滚动)如果左右滑动就是列间距
layout.minimumLineSpacing = 30;
// 列间距(相当于上下滚动)如果左右滑动就是行间距
layout.minimumInteritemSpacing = 30;
// 设置宽高
layout.itemSize = CGSizeMake(150, 200);
// 设置滑动方向(默认是上下的)
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
// 设置表头, 只有高度影响
layout.headerReferenceSize = CGSizeMake(0, 100);
// 设置表尾, 只有高度影响
layout.footerReferenceSize = CGSizeMake(0, 100);
// 设置内边距
layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
// 初始化, 集合视图
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:[UIScreen mainScreen].bounds collectionViewLayout:layout];
// 设置代理
collectionView.delegate = self;
collectionView.dataSource = self;
// 显示到数据上
[self.view addSubview:collectionView];
// collectionView 默认是黑色
// 注册你要用的cell
// Identifier 重用标示符, 要一致
// Class 你的cell是哪个类, 就添哪个类
// 使用系统就注册系统的, 如果自定义的话, 就注册自定义的
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@“MyCell”];
[collectionView registerClass:[UICollectionViewCell class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@“MyHeader”];
[collectionView registerClass:[UICollectionViewCell class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseldentifier:@“MyFooter”]; 
}

// 必须实现的方法, 跟tableView一样
// 返回每个分区的Item数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return 10;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
// 返回每个Item方法
// 这个方法包括了, 咱们之前创建的tableView写的一堆
// 必须有一步:必须要注册cell
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@“MyCell” forIndexPath:indexPath];
// 系统没有像tableView一样, 给咱们提供布局方式
// 咱们要使用UICollectionViewCell 一般都是自定义在使用, 跟tableView一样, 所有的自定义控件都要加在contentView上面
cell.contentView.backgroundColor = [UIColor purpleColor];
// 注册表头
return cell;
}
// 分区, 跟tableView默认就一个分区
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 1;
}
// 设置表头表尾, 通过代理方法来实现
- (UICollectionReuseableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
// 通过kind判断表头表尾
// 因为是字符串的, 判断相同不能等号
if ([kind isEqualToString:UICollectionElementKindSectionHeader]){
// 返回表头
// 需要去复用集合中得到
UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@“MyHeader” forIndexPath:indexPath];
// 加个颜色
headerView.backgroundColor = [UIColor redColor];
return headerView;
} else {
// 返回表尾
UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@“MyFooter” forIndexPath:indexPath];
// 加个颜色
footerView.backgroundColor = [UIColor redColor];
return footerView;
}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值