【控件】UICollectionView

最新推荐文章于 2022-11-28 22:25:33 发布

原创最新推荐文章于 2022-11-28 22:25:33 发布 · 464 阅读

0 ·

CC 4.0 BY-SA版权

iphone开发学习和总结同时被 2 个专栏收录

24 篇文章

订阅专栏

控件

6 篇文章

订阅专栏

本文详细介绍了如何使用UICollectionView来展示多行多列的内容，并提供了从初始化到实现复杂布局的完整步骤。包括UICollectionView的创建、注册单元格、设置代理方法、自定义cell尺寸及间距等关键环节。

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

当列表需要展示多行多列内容时，可以考虑使用UICollectionView，相比UITableView，collectionView帮我们省去了很多需要自己去计算的点，用法大同小异。

创建：

1、首先遵循代理

<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>

2、初始化

    UICollectionViewFlowLayout *myLayout = [[UICollectionViewFlowLayout alloc]init];
    myCollectionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) collectionViewLayout:myLayout];
    myCollectionView.dataSource = self;
    myCollectionView.delegate = self;
    [self.view addSubview:myCollectionView];

3、注册类（cell）

    // 注册类，纯代码
    [myCollectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"CellIdentifier"];
    //注册类，xib
    [myCollectionView registerNib:[UINib nibWithNibName:@"CollectionViewCell" bundle:nil] forCellWithReuseIdentifier:@"CellIdentifier"];

4、

#pragma mark - UICollectionViewDataSource
// Section个数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 3;
}
// 每个section中的cell的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 10;
}
// 显示collectionViewCell
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    MyCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"CellIdentifier" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor lightGrayColor];
    cell.textLabel.text = [NSString stringWithFormat:@"(%ld , %ld)", indexPath.section, indexPath.row];
    
    return cell;
}

5、

#pragma mark - UICollectionViewDelegateFlowLayout
// 每个cell的宽高
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake((self.view.frame.size.width - 30)/2, 100);
}
// 设置每个cell上左下右相距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(10, 10, 10, 10);
}
// header size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section {
    return CGSizeMake(self.view.frame.size.width, 20);
}
// footer size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section {
    return CGSizeMake(self.view.frame.size.width, 0.01);
}
#pragma mark - UICollectionViewDelegate
// 选中操作
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    MyCollectionViewCell *cell = (MyCollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
    cell.backgroundColor = [UIColor greenColor];
}

效果如图：

上述代码里贴了下面这两个方法，用来设置 section 的 header 和 footer 的宽和高，但是 UICollectionView 没有提供像 UITableView 一样的，配置 headerView 和 footView 的方法，比如我要在 header 上加一行标题，貌似不太容易实现。在网上查了一下，暂时没有发现很好的方法，有说用xib或storyBord实现，也有用纯代码的，自己研究出的效果还不是很理想，个人还是比较倾向于纯代码实现。

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

一种可能的可行性方法如下（存在复用问题，暂时木有解决..）:

注册cell类的同时，注册header和footer

    [myCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerIdentifier"];
    [myCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerIdentifier"];

then~

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    NSString *reuseIdentifier;
    if ([kind isEqualToString:UICollectionElementKindSectionFooter])
    {
        reuseIdentifier = @"footerIdentifier";
    }else
    {
        reuseIdentifier = @"headerIdentifier";
    }
    UICollectionReusableView *view =  [collectionView dequeueReusableSupplementaryViewOfKind :kind   withReuseIdentifier:reuseIdentifier   forIndexPath:indexPath];
    if ([kind isEqualToString:UICollectionElementKindSectionHeader])
    {
        view.backgroundColor = [UIColor redColor];
        UILabel *label = [[UILabel alloc] init];
        label.frame = CGRectMake(10, 0, self.view.frame.size.width - 20, 20);
        label.text = [NSString stringWithFormat:@"这是header:%ld",indexPath.section];
        [view addSubview:label];
        return view;
    }
    else
    {
        view.backgroundColor = [UIColor clearColor];
        return view;
    }
}

第一次接触UICollectionView，感觉确实很好用，但是还没有吃透，继续查资料学习ing~

后续研究方向还有如何根据cell内容高度自定义等宽布局等。