如何使用 UICollectionView 创建 3 列

Posted 2023-03-11

【中文标题】如何使用 UICollectionView 创建 3 列

【英文标题】：How can I create 3 columns using UICollectionView

【发布时间】：2014-11-27 06:06:00

【问题描述】：

我想用 UICollectionView 创建一个 3 列，这是我所做的代码： 我已将 UICollectionViewFlowLayout 附加到我的 UICollectionView 并将 itemSize 设置为集合视图的宽度除以 3：

    self.collectionView.backgroundColor =  [UIColor blueColor];

    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];

    double width = self.collectionView.frame.size.width;
    width /= 3;
    [flowLayout setItemSize:CGSizeMake(width, 100)];
    [flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];

    [self.collectionView setCollectionViewLayout:flowLayout];

但是当我运行它时，我每行只看到 1 个项目，但项目的宽度设置正确。 item的右边是一堆空格。

你能告诉我我错过了什么吗？

谢谢。

更新：

我已经尝试过设置最小间距。但这仍然行不通。我只看到 1 列单元格：

self.collectionView.backgroundColor =  [UIColor blueColor];
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];

[flowLayout setItemSize:CGSizeMake(160, 160)];
[flowLayout setScrollDirection:UICollectionViewScrollDirectionHorizontal];
flowLayout.minimumInteritemSpacing = 10.0f;
flowLayout.minimumLineSpacing = 10.0f;

[self.collectionView setCollectionViewLayout:flowLayout];

当我在代码中调整间距值时，我看到屏幕上的间距发生了变化。只是它只将单元格布置在 1 列中。而不是 2

【问题讨论】：

如果你记录宽度，它会给你什么？

两个 UICollectionViewCell 之间应该有空格。例如：如果 UICollectionView 宽度为 320 像素，并且您希望两个单元格之间有 10px 的间隙，那么您应该将单元格的宽度固定为 320-40=280/ 3 像素（假设一行中有 3 个单元格）。我假设您的第一个单元格将从集合视图内的 10 像素开始。

设置minimumInterItemSpacing。

@johnykumar，确实他的数学是关闭的（除非他根本没有空格），但如果他使用默认间距（10），那并不能解释为什么他只看到一个单元格；他至少应该看到 2 个。

【参考方案1】：

在创建UICollectionViewLayout 时，您应该指定itemSize、minimumInterItemSpacing 和minimumLineSpacing，并可以选择使用此信息的集合视图布局其项目的滚动方向。

【参考方案2】：

实现<UICollectionViewDelegateFlowLayout>协议，使用这个你可以做到

collectionView:layout:insetForSectionAtIndex:
collectionView:layout:minimumInteritemSpacingForSectionAtIndex:
collectionView:layout:minimumLineSpacingForSectionAtIndex:
collectionView:layout:referenceSizeForFooterInSection:
collectionView:layout:referenceSizeForHeaderInSection:
collectionView:layout:sizeForItemAtIndexPath:

参考这个How do I create a UICollectionView with column and row headers?

【参考方案3】：

您的集合视图的尾随空间布局约束可能未正确设置为水平扩展。

换句话说，集合视图试图水平平铺项目，但右侧没有任何空间来放置其他项目，因此它会换行到下一行。