如何使用组合布局在 UICollectionView 中平均 space 个具有固定大小的单元格?
How to equally space cells with a fixed size inside a UICollectionView using compositional layout?
我有一个使用组合布局创建的集合视图。每个项目都有固定的宽度和高度,并且该部分占据了 table 的整个宽度(它本身占据了屏幕的整个宽度)。我正在尝试创建一种算法来计算内容和部分插图,使每个项目之间的 space 相等,屏幕边框之间的 space 相等。也就是说,所有东西之间的space应该是一样的。
计算内容和章节插图的方法如下:
// width is 414
private func getContentInsets(width: CGFloat) -> NSDirectionalEdgeInsets {
let totalItemsInRow = Int(width / 120) // 3
let totalCellWidth = 120 * totalItemsInRow // 360
let remainingSpace = width - CGFloat(totalCellWidth) // 54
let marginPerItem = remainingSpace / CGFloat(totalItemsInRow) // 18
return NSDirectionalEdgeInsets(top: 8, leading: marginPerItem / 2, bottom: 8, trailing: marginPerItem / 2)
}
// width is 414
private func getSectionContentInsets(width: CGFloat) -> NSDirectionalEdgeInsets {
let totalItemsInRow = CGFloat(Int(width / 120)) // 3
return NSDirectionalEdgeInsets(top: 0,
leading: getContentInsets(width: width).leading * totalItemsInRow, // 9 * 3 = 27
bottom: 0,
trailing: getContentInsets(width: width).trailing * totalItemsInRow) // 9 * 3 = 27
}
使用这些方法,我能够使项目之间的 space 相等。但是它们对屏幕边框有不同的 space,正如我们在下面的图像中看到的那样:
那么,我该如何更改这些算法以在项目之间以及屏幕边框之间实现相等 space(所有内容都应具有相同的间距)。
嗯..我认为你可以通过改变你的计算结束来完成它。
54 / (numberOfCells + 1) 并只分配前导这个值
感谢 Felipe 仅分配主值的想法,我得以修复算法。不幸的是,该公式并没有解决问题,因为一个小的 space 仍然留在集合视图的尾部边框处。而且我还注意到,用于在集合视图的单元格之间添加 space 的正确 属性 是 edgeSpacing
,而不是 contentInsets
.
所以我删除了插图部分,并像这样分配 edgeSpacing
:
private func getEdgeSpacing(width: CGFloat) -> NSCollectionLayoutEdgeSpacing {
let totalItemsInRow = Int(width / 120)
let totalCellWidth = 120 * totalItemsInRow
let remainingSpace = width - CGFloat(totalCellWidth)
let totalMargins = totalItemsInRow
let marginPerItem = remainingSpace / CGFloat(totalMargins)
return NSCollectionLayoutEdgeSpacing(leading: NSCollectionLayoutSpacing.fixed(marginPerItem / 2),
top: nil,
trailing: NSCollectionLayoutSpacing.fixed(marginPerItem / 2),
bottom: nil)
}
唯一的固定值是120
,这是每个单元格的固定宽度。
我有一个使用组合布局创建的集合视图。每个项目都有固定的宽度和高度,并且该部分占据了 table 的整个宽度(它本身占据了屏幕的整个宽度)。我正在尝试创建一种算法来计算内容和部分插图,使每个项目之间的 space 相等,屏幕边框之间的 space 相等。也就是说,所有东西之间的space应该是一样的。
计算内容和章节插图的方法如下:
// width is 414
private func getContentInsets(width: CGFloat) -> NSDirectionalEdgeInsets {
let totalItemsInRow = Int(width / 120) // 3
let totalCellWidth = 120 * totalItemsInRow // 360
let remainingSpace = width - CGFloat(totalCellWidth) // 54
let marginPerItem = remainingSpace / CGFloat(totalItemsInRow) // 18
return NSDirectionalEdgeInsets(top: 8, leading: marginPerItem / 2, bottom: 8, trailing: marginPerItem / 2)
}
// width is 414
private func getSectionContentInsets(width: CGFloat) -> NSDirectionalEdgeInsets {
let totalItemsInRow = CGFloat(Int(width / 120)) // 3
return NSDirectionalEdgeInsets(top: 0,
leading: getContentInsets(width: width).leading * totalItemsInRow, // 9 * 3 = 27
bottom: 0,
trailing: getContentInsets(width: width).trailing * totalItemsInRow) // 9 * 3 = 27
}
使用这些方法,我能够使项目之间的 space 相等。但是它们对屏幕边框有不同的 space,正如我们在下面的图像中看到的那样:
那么,我该如何更改这些算法以在项目之间以及屏幕边框之间实现相等 space(所有内容都应具有相同的间距)。
嗯..我认为你可以通过改变你的计算结束来完成它。
54 / (numberOfCells + 1) 并只分配前导这个值
感谢 Felipe 仅分配主值的想法,我得以修复算法。不幸的是,该公式并没有解决问题,因为一个小的 space 仍然留在集合视图的尾部边框处。而且我还注意到,用于在集合视图的单元格之间添加 space 的正确 属性 是 edgeSpacing
,而不是 contentInsets
.
所以我删除了插图部分,并像这样分配 edgeSpacing
:
private func getEdgeSpacing(width: CGFloat) -> NSCollectionLayoutEdgeSpacing {
let totalItemsInRow = Int(width / 120)
let totalCellWidth = 120 * totalItemsInRow
let remainingSpace = width - CGFloat(totalCellWidth)
let totalMargins = totalItemsInRow
let marginPerItem = remainingSpace / CGFloat(totalMargins)
return NSCollectionLayoutEdgeSpacing(leading: NSCollectionLayoutSpacing.fixed(marginPerItem / 2),
top: nil,
trailing: NSCollectionLayoutSpacing.fixed(marginPerItem / 2),
bottom: nil)
}
唯一的固定值是120
,这是每个单元格的固定宽度。