集合视图间距打破 ui

Question

我正在尝试创建如下所示的 UI。

为此，我使用了 UICollectionView 和 FlowLayout。

为了将第一个单元格显示为全宽并将剩余单元格显示为 3 列，我已经实现了 sizeForItemAtIndexPath: 和 minimumInteritemSpacingForSectionAtIndex 方法：

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

    if indexPath.item == 0
    {
        let width  = self.cvMedia.frame.width - 20
        let height = (width * 9)/16
        cellSize   = CGSize(width: width, height: height)
    }
    else
    {
        let width  = self.cvMedia.frame.width / 3 - 20
        let height = (width * 16)/9
        cellSize   = CGSize(width: width, height: height)
    }

    return cellSize
}



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

但我在 iPhone 6SPlus 和 iPhone 6Plus 中得到以下输出：

我尝试将项目间距从 20 更改为 19，它在模拟器上工作，但在实际设备上它仍然显示相同的行为。如果我更改间距值，我会在某些设备版本上获得正确的输出，而在某些版本上无法正常工作。我可以添加一个设备版本检查，并基于它我可以 return 该值。但这不是一个优雅的解决方案，它将在未来的版本中中断。谁能帮我解决这个问题？提前致谢。

Answer 1

查看此并将单元格和行的最小间距值更改为 0

Answer 2

制作此布局时应使用集合视图的宽度作为参数。

例如,

您需要 3 个单元格才能适合视图。
单元格之间必须有 20pt 的间距。

解法：

在运行时通过 viewWillAppear() 或 cellForRowAtIndexPath() 计算单元格的大小

场景：

设备宽度为 320pt。 Collectionview 的宽度为 300pt（间距 10pt L 和 R）间距：单元格之间的间距为 20pt。细胞需要 3!! 单元格大小：?

现在..开始用任一方法计算。

单元格间距 = (3-1) * 20 = 2 * 20 = 40pt

剩余集合视图宽度 = 300pt - 40pt = 260pt

像元大小 = 260pt/3 = 86.667 pt。（约 86 磅）。

代码中：

cellWidth = ( collectionView?.bounds.width - minimumSpacing * (numberOfCellsInARow - 1 ) ) / numberOfCellsInARow

此外，这只给出了单元格宽度。您还需要 cellHeight。您可能已经有了单元格的纵横比。使用它，也可以计算 cellHeight。

亲切的问候，
苏曼·阿迪卡里

集合视图间距打破 ui

Collection view spacing breaks the ui

ios

uicollectionview

uicollectionviewcell

uicollectionviewlayout