UICollectionView 3 列网格，1px space?? （包括图像）

Question

我设置了一个带有 FlowLayout 的 UICollectionView，它在垂直或水平方向的单元格之间没有留下 space。

我一切正常，但在第 2 列和第 3 列之间有一个奇怪的 1px space，我不知道为什么！？我已经验证了 iOS 模拟器和真实设备上都出现了 1px 的差距。有人经历过吗？

我的 UIViewController 是以下的 delegate/datasource：

class MyViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout

我已经实现了删除任何间距的必要功能（并通过打印语句验证它们是运行），以及对彼此相邻排列的单元格进行视觉确认：

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
    return UIEdgeInsetsZero
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat {
    return 0
}

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat {
    return 0
}

最后，我打印出要返回的单元格的宽度（每个颜色方块）以验证它是 (view.frame.width / 3) 或 (320/3)，即 106.666667

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

    var totalHeight: CGFloat = (self.view.frame.width / 3)
    var totalWidth: CGFloat = (self.view.frame.width / 3)

    println(totalWidth) // this prints 106.666666667

    return CGSizeMake(totalWidth, totalHeight)
}

Answer 1

在类似情况下最好避免数字的双精度类型。使用：

return CGSizeMake(ceil(totalWidth), ceil(totalHeight))

Answer 2

我遇到了同样的问题，我用下面的代码修复了它：

 func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {

    let paddingSpace = sectionInsets.left * 4
    let availableWidth = view.frame.width - paddingspace
    let widthPerItem  = availableWidth/3

    return CGSizeMake(width: widthPerItem, height: widthPerItem)
}

并在 class 的开头定义以下变量：

fileprivate let sectionInsets = UIEdgeInsets(top: 0.0, left: 0.5, bottom: 0.0, right: 0.0)

Answer 3

这是我的解决方案，仅在方法 collectionView 布局中制作宽度为 106 的中间单元格和其他两个宽度为 107 的单元格

NSInteger numColumns = 3;
CGSize deviceSize;
CGFloat width = self.view.frame.size.width / numColumns;
CGFloat height = width ;
NSInteger rem = (int)self.view.frame.size.width%numColumns; 
if(indexPath.row == (1 + numColumns*counter) && rem != 0) {  

    deviceSize = CGSizeMake(floor (width), ceil(height));
    counter++;
}
else {

    deviceSize = CGSizeMake(ceil (width), ceil(height));
}
deviceSize = CGSizeMake(deviceSize.width, deviceSize.height);

Answer 4

例如，您的屏幕宽度 = 320，当您将它除以 3 时，您得到 106.6666。如果将其视为 Int，我们有：106 * 3 = 318。我们需要将 2 个像素按 1 px 添加到前两个单元格，因为 320 - 318 = 2。请尝试下面的解决方案。

public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let columns = 3 
    let width = Int(UIScreen.main.bounds.width)
    let side = width / columns
    let rem = width % columns
    let addOne = indexPath.row % columns < rem
    let ceilWidth = addOne ? side + 1 : side
    return CGSize(width: ceilWidth, height: side)
}

UICollectionView 3 列网格，1px space?? （包括图像）

UICollectionView 3 column grid, 1px space?? (image included)

ios

uicollectionview

uicollectionviewcell

swift