【问题标题】:iOS - UICollectionView spacing still there when set to 0 - How to set with no spacing between cellsiOS - 设置为 0 时 UICollectionView 间距仍然存在 - 如何设置单元格之间没有间距
【发布时间】:2013-10-15 12:40:56
【问题描述】:

我有一个简单的 UICollectionView,我在 InterfaceBuilder 中设置了 0 间距,但是当我用单元格填充集合视图时,仍然有一些间距。为了实际看到一个间距为 0 的 collectionview 单元格,而不是将其设置为 0 间距,我需要做一些特别且不立即显而易见的事情吗?谢谢。

编辑*一些代码:

- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    UICollectionViewCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];

    cell.backgroundColor = [UIColor clearColor];

    UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(2, 2, cell.frame.size.width -4, cell.frame.size.height -4)];
    lbl.backgroundColor = [UIColor clearColor];
    lbl.font = [UIFont boldSystemFontOfSize:20];
    lbl.text = [NSString stringWithFormat:@"$%0.0f", [[amountsArray objectAtIndex:indexPath.row] floatValue]];
    lbl.textAlignment = NSTextAlignmentCenter;
    lbl.layer.borderWidth = 1;

    [cell addSubview:lbl];
    [lbl release];

    return cell;
}

【问题讨论】:

  • 是的。我在下面添加了一个答案。抱歉回复晚了

标签: iphone ios layout uicollectionview spacing


【解决方案1】:

查询的简单解决方案。将此添加到您的 viewController 的 .m 文件中:

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    ProductDetailViewController *HomeVC = [self.storyboard instantiateViewControllerWithIdentifier:@"ProductDetailView"];
    HomeVC.title = @"DemoProject";
    [self.navigationController pushViewController:HomeVC animated:YES];
}

- (UIEdgeInsets)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {
    return UIEdgeInsetsMake(0, 0, 0, 0); // top, left, bottom, right
}

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

    return 0.0;
}

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
    return 0.0;
}

【讨论】:

【解决方案2】:

Swift 3 版本的@MihirOza 的解决方案

适用于水平和垂直集合视图

代码

// removing spacing
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
    return 0.0
}
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
    return 0.0
}

【讨论】:

  • @Eyzuky 我很高兴它帮助了你:)
【解决方案3】:

您必须创建自定义UICollectionViewLayout

单元格之间的间距将等于cellSpacing

final class CustomFlowLayout: UICollectionViewFlowLayout {

    let cellSpacing: CGFloat = 0

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        if let attributes = super.layoutAttributesForElements(in: rect) {
            for (index, attribute) in attributes.enumerated() {
                if index == 0 { continue }
                let prevLayoutAttributes = attributes[index - 1]
                let origin = prevLayoutAttributes.frame.maxX
                if (origin + cellSpacing + attribute.frame.size.width < self.collectionViewContentSize.width) {
                    attribute.frame.origin.x = origin + cellSpacing
                }
            }
            return attributes
        }
        return nil
    }

}

【讨论】:

  • 如果您使用动态大小的单元格,这绝对是解决方案。
  • 非常适合我,谢谢!仅供参考,我将 x 和宽度更改为 y 和高度,以获得水平滚动的砖石布局。
  • 请注意,虽然这会水平适合单元格,但行之间会有间隙错误。不过还是谢谢你。
【解决方案4】:

我解决了这个问题并得到了我想要的布局:

- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath {

UICollectionViewCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];



    cell.backgroundColor = [UIColor clearColor];

    //clear any contents on the cell
    for (UIView *subView in [cell subviews]) {
    [subView removeFromSuperview];
    }


    //Label to put on the cell
    UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(2, 2, cell.frame.size.width -4, cell.frame.size.height -4)];
    lbl.backgroundColor = [UIColor clearColor];
    lbl.textColor = [UIColor colorWithRed:[CPExtras RGBtoPercent:70] green:[CPExtras RGBtoPercent:92] blue:[CPExtras RGBtoPercent:105] alpha:1];
    lbl.font = [UIFont boldSystemFontOfSize:20];
    lbl.text = @"100";
    lbl.textAlignment = NSTextAlignmentCenter;

    //Give the cell a border
    cell.layer.borderColor = [[UIColor colorWithRed:[CPExtras RGBtoPercent:70] green:[CPExtras RGBtoPercent:92] blue:[CPExtras RGBtoPercent:105] alpha:0.5] CGColor];
    cell.layer.borderWidth = 0.5;


    [cell addSubview:lbl];

    [lbl release];





return cell;
}

在 IB 中,我为 collectionview 设置了以下测量设置:

【讨论】:

  • 你在哪里看到这个视图?我在 IB 找不到类似的东西。
  • Collection View Size 位于 Collection View 的大小检查器(标尺图标)中。 Collection View Flow Layout Size 位于 Collection View Flow Layout 的大小检查器中。
  • 我认为从单元格中删除所有子视图并重新初始化它们会破坏单元格可重用模式的目的。
  • 是的,删除子视图不是应该如何编码的。我只是在这里为我的测试拼凑了一些东西,所以我没有使用你应该使用的自定义 uicollectionviewcell。
【解决方案5】:

为了实际上有零空间,单元格的数量和它们的宽度应该可以被集合视图自己的宽度整除,例如 如果您一次有 5 个宽度为 100 像素的单元格,那么您的集合视图应该有 500 像素的宽度,如果它更大,那么它将强制单元格之间有一个空间。

【讨论】:

    【解决方案6】:

    [UICollectionViewFlowLayout minimumInteritemSpacing]documentation 提到:

    这个间距是用来计算一行可以放多少个item,但是在item个数确定后,实际间距可能会向上调整。

    您可能需要实现自定义布局来执行此操作。可以在here 找到文档,并在here 找到示例。

    【讨论】: