swift - 如何使用组合布局在 UICollectionView 内等分固定大小的单元格?
问题描述
我有一个使用组合布局创建的集合视图。每个项目都有固定的宽度和高度,部分占据表格的整个宽度(它本身占据了屏幕的整个宽度)。我正在尝试创建一种算法来计算内容和部分插图,以使每个项目之间具有相等的间距,并且屏幕边框之间的间距也相等。换句话说,一切之间的空间应该是相同的。
以下是计算内容和部分插图的方法:
// 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
}
使用这些方法,我能够在项目之间拥有相等的空间。但是它们与屏幕边框有不同的空间,如下图所示:
那么,如何更改这些算法以实现项目之间以及屏幕边框之间的相等间距(所有内容都应具有相同的间距)。
解决方案
感谢 Felipe 只分配前导值的想法,我能够修复算法。不幸的是,该公式并没有解决问题,因为在集合视图的尾部边界处仍然留下了一个小空间。而且我还注意到,用于在集合视图的单元格之间添加空间的正确属性是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
,即每个单元格的固定宽度。
推荐阅读
- ios - RxSwift:数据库事件和不同的调度问题
- amazon-web-services - 不确定为什么上传到 S3 的视频是 0 位
- excel - 有人可以查看我的 Excel 错误并提供有关代码的反馈吗?
- c# - 从另一个视图访问 _Layout 中的按钮
- vue.js - 我可以在 vue.js 中实现 has() 吗?
- java - 导入junit失败
- r - 使用 rbind 组合数据框 + 添加一个单独的列,其中包含各个数据框的名称
- typescript - 可以在 TypeScript 中将元组转换为数组吗?
- elixir - 如何在 Elixir 的地图列表中总结不同键的值
- ansible - Ansible 同步模块错误