UICollectionViewCell 填充

Posted 2023-03-12

【中文标题】UICollectionViewCell 填充

【英文标题】：UICollectionViewCell Padding

【发布时间】：2013-01-03 18:58:34

【问题描述】：

我正在尝试在集合视图单元格上设置零填充，我已将视图控制器上的“最小间距”设置为：

但单元格之间仍然存在间隙：

我也希望单元格根据框架的宽度很好地包裹，例如每个单元格的宽度为 50px，所以如果有六个单元格并且我将框架宽度设置为 150px，它将显示两个三个细胞系。

但是，如果我通过以下方式将框架宽度设置为 150：

- (void)viewDidLoad

    [super viewDidLoad];

    CGRect frame = self.collectionView.frame;
    frame.size.width = 150;
    self.collectionView.frame = frame;

看起来像上面的屏幕截图（太宽了）。

如果我将它设置为小得离谱的值，例如 10，它会在某种程度上换行：

UICollectionViewCell 设置为 50 x 50：

我也尝试过以编程方式设置单元格的大小，并且还删除了 UIEdgeInset：

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section 
    return UIEdgeInsetsMake(0, 0, 0, 0);

我已禁用自动布局，以防有任何干扰。关于如何移除填充并根据框架宽度/高度将它们包裹起来的任何建议？

【问题讨论】：

我无法重现此问题。我用单个视图开始了一个空项目，添加了一个集合视图作为子视图，将设置设置为与上面显示的相同，并将情节提要中的框架设置为 175x175。这将单元格隔开（流程布局自然会这样做）。我使用您的代码更改 viewDidLoad 中的帧大小，它更改为 150 宽，并且单元格填补了空白。您的问题中未包含其他内容。

啊！您正在使用 UICollectionViewController。这样，您就无法更改集合视图的大小。它总是填满屏幕（除非您将它嵌入到容器视图控制器中）。让我看看插图是否可以调整...

@jrturton 感谢您花时间尝试重现此内容。我刚刚重新开始，尽管问题仍然存在。我在这里上传了一个可能有用的例子：dl.dropbox.com/u/71160589/example.zip

【参考方案1】：

您正在使用 UICollectionViewController，它与 UITableViewController 一样，具有集合视图（或表视图）作为视图控制器的基本 view 属性。这意味着它不能从视图控制器中调整大小；它的大小由它的超级视图控制——在这种情况下，窗口可以是根视图控制器，也可以是父视图控制器（如果您要嵌入它）。

如果您想缩小集合视图区域以使单元格彼此邻接，您可以在情节提要中修改集合视图的部分插图。在您的情况下，左右插入 15 个单元将单元格组合在一起 - 这是 9 * 50 (450) 加上 30 = 480，这是横向 3.5 英寸 iPhone 的宽度。

显然，这在 iPhone 5 或 iPad 中会有所不同。您可以在运行时计算插入，使用标准 UIViewController 子类中保存的集合视图，或将 UICollectionViewController 保存为嵌入式视图控制器。后两者将使您只需指定一个大小，这可能比计算插图更好。

【讨论】：

非常感谢，我快到了，我在标准 UIViewController 子类中添加了一个 UICollectionView，但是我仍然无法调整 UICollectionView 的大小：dl.dropbox.com/u/71160589/example2.zip

我暂时无法查看它，但您要么没有连接插座，要么您已打开 Autolayout 并且仍在设置框架而不是编辑约束。

我在 UIViewController 中有 UICollectionView - 这不允许我调整 UICollectionView 的大小。但是，我添加了另一个视图，因此层次结构现在看起来像 UIViewController -> UIView -> UICollectionView。然后我调整了 UIView 的大小，它起作用了。最后 :) 感谢您的帮助。

【参考方案2】：

我不确定屏幕截图中的那些单元格是 50x50（编辑：我猜它们是......）。

检查是否连接了 UICollectionViewDelegate 和 UICollectionViewDataSource。

这是你需要实现的方法

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath 
    CGSize retval = CGSizeMake(50, 50);
    return retval;

如果不起作用，请尝试将此代码放入 viewDidLoad

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
[flowLayout setMinimumInteritemSpacing:0.0f];
[flowLayout setMinimumLineSpacing:0.0f];
[flowLayout setItemSize:CGSizeMake(50.0f, 50.0f)];
[self.collectionView setCollectionViewLayout:flowLayout];

【讨论】：

这是一个 4 英寸的视网膜横屏；尺寸对我来说很合适。而且您的建议只是在代码中重新实现应该从笔尖设置的内容。

哦，是的。我没有注意到它处于横向模式。大小看起来确实合适。但是，他的第二个屏幕截图中的集合视图的宽度不是 150 磅。关于建议的代码，我很清楚这只是重新实现他认为他在故事板文件中所做的事情。

感谢您的建议，尽管问题仍然存在，但我已经使用您的代码重新实现了它。我在这里上传了一个显示错误的示例项目：dl.dropbox.com/u/71160589/example.zip

【参考方案3】：

在你的 ViewController 中实现这个方法

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section

   return 2; //the spacing between cells is 2 px here

【参考方案4】：

minimumInteritemSpacing 就是一个最小值，所以如果 UICollectionViewLayout 类决定它需要更大，它可以更大

要纠正这个问题，您可以创建自己的布局子类，并实现- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath 方法，类似于this question 的答案（请参阅第二个问题，而不是标记为正确的问题）

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath 
    UICollectionViewLayoutAttributes* atts =
    [super layoutAttributesForItemAtIndexPath:indexPath];

    if (indexPath.item == 0) // degenerate case 1, first item of section
        return atts;

    NSIndexPath* ipPrev =
    [NSIndexPath indexPathForItem:indexPath.item-1 inSection:indexPath.section];

    CGRect fPrev = [self layoutAttributesForItemAtIndexPath:ipPrev].frame;
    CGFloat rightPrev = fPrev.origin.x + fPrev.size.width + 10;
    if (atts.frame.origin.x <= rightPrev) // degenerate case 2, first item of line
        return atts;

    CGRect f = atts.frame;
    f.origin.x = rightPrev;
    atts.frame = f;
    return atts;