如何在 Swift3.0 中居中对齐 UICollectionView 的单元格？
How to center align the cells of a UICollectionView in Swift3.0?
描述：
Objective-C 和 Swift2.0 的答案：How to center align the cells of a UICollectionView?
我通常会尝试将 Swift2.0 答案转换为 Swift3.0 解决方案，但是方法：
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
let edgeInsets = (screenWight - (CGFloat(elements.count) * 50) - (CGFloat(elements.count) * 10)) / 2
return UIEdgeInsetsMake(0, edgeInsets, 0, 0);
}
在 Swift3.0 中似乎不存在，我发现唯一有用的其他方法是：
func collectionView(_ collectionView: UICollectionView, transitionLayoutForOldLayout fromLayout: UICollectionViewLayout, newLayout toLayout: UICollectionViewLayout) -> UICollectionViewTransitionLayout {
<#code#>
}
但我不确定如何正确实施它。
问题：
如何在 Swift3.0 中居中对齐 UICollectionView 的单元格？
（iOS 和 tvOS 的简单通用解决方案将是完美的）
您要查找的方法在 Swift 3 中以不同的签名存在。新签名是这样的：
optional public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets
P.S: 此方法存在于 UICollectionViewDelegateFlowLayout 协议中。
希望这会有所帮助。
假设你符合UICollectionViewDelegateFlowLayout，应该是：
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let edgeInsets = (screenWight - (CGFloat(elements.count) * 50) - (CGFloat(elements.count) * 10)) / 2
return UIEdgeInsets(top: 0, left: edgeInsets, bottom: 0, right: 0)
}
这最终成为我使用的解决方案。阅读代码注释以获得更好的理解。 Swift 5
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
//Where elements_count is the count of all your items in that
//Collection view...
let cellCount = CGFloat(elements_count)
//If the cell count is zero, there is no point in calculating anything.
if cellCount > 0 {
let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
let cellWidth = flowLayout.itemSize.width + flowLayout.minimumInteritemSpacing
//20.00 was just extra spacing I wanted to add to my cell.
let totalCellWidth = cellWidth*cellCount + 20.00 * (cellCount-1)
let contentWidth = collectionView.frame.size.width - collectionView.contentInset.left - collectionView.contentInset.right
if (totalCellWidth < contentWidth) {
//If the number of cells that exists take up less room than the
//collection view width... then there is an actual point to centering them.
//Calculate the right amount of padding to center the cells.
let padding = (contentWidth - totalCellWidth) / 2.0
return UIEdgeInsets(top: 0, left: padding, bottom: 0, right: padding)
} else {
//Pretty much if the number of cells that exist take up
//more room than the actual collectionView width, there is no
// point in trying to center them. So we leave the default behavior.
return UIEdgeInsets(top: 0, left: 40, bottom: 0, right: 40)
}
}
return UIEdgeInsets.zero
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
let allCellWidth = KcellWidth * numberOfCell
let cellSpacingWidth = CellSpacing * (numberOfCell - 1)
let leftInset = (collectionViewWidth - CGFloat(allCellWidth + cellSpacingWidth)) / 2
let rightInset = leftInset
return UIEdgeInsetsMake(0, leftInset, 0, rightInset)
}
虽然 答案很好，但它有一个额外的间距错误，并且没有使用很多可用的 swift 3 语法。我已经解决了这个问题并减少了对局部变量的依赖数量。
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
// Make sure that the number of items is worth the computing effort.
guard let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout,
let dataSourceCount = collectionView.dataSource?.collectionView(collectionView, numberOfItemsInSection: section),
dataSourceCount > 0 else {
return .zero
}
let cellCount = CGFloat(dataSourceCount)
let itemSpacing = flowLayout.minimumInteritemSpacing
let cellWidth = flowLayout.itemSize.width + itemSpacing
var insets = flowLayout.sectionInset
// Make sure to remove the last item spacing or it will
// miscalculate the actual total width.
let totalCellWidth = (cellWidth * cellCount) - itemSpacing
let contentWidth = collectionView.frame.size.width - collectionView.contentInset.left - collectionView.contentInset.right
// If the number of cells that exist take up less room than the
// collection view width, then center the content with the appropriate insets.
// Otherwise return the default layout inset.
guard totalCellWidth < contentWidth else {
return insets
}
// Calculate the right amount of padding to center the cells.
let padding = (contentWidth - totalCellWidth) / 2.0
insets.left = padding
insets.right = padding
return insets
}
N.B.: 此代码段仅适用于水平滚动，但可以轻松调整。
@rottenoats 回答的轻微改编。这更通用。
最重要的是记住让你的视图控制器符合 UICollectionViewDelegateFlowLayout 协议。
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
guard let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout else {
return .zero
}
let cellCount = CGFloat(collectionView.numberOfItems(inSection: section))
if cellCount > 0 {
let cellWidth = flowLayout.itemSize.width + flowLayout.minimumInteritemSpacing
let totalCellWidth = cellWidth * cellCount
let contentWidth = collectionView.frame.size.width - collectionView.contentInset.left - collectionView.contentInset.right - flowLayout.headerReferenceSize.width - flowLayout.footerReferenceSize.width
if (totalCellWidth < contentWidth) {
let padding = (contentWidth - totalCellWidth + flowLayout.minimumInteritemSpacing) / 2.0
return UIEdgeInsetsMake(0, padding, 0, 0)
}
}
return .zero
}
您需要遵守 到UICollectionViewDelegateFlowLayout 协议才能找到collectionView(_:layout:insetForSectionAt:) 方法，它已在此处定义。对于水平 collectionView
，以下实现在 swift 4 中工作正常
extension YourViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let cellWidth = CGFloat(integerLiteral: YourCellsWidth)
let count = self.YourCollectionViewDataSource.count
let top = CGFloat(integerLiteral: 0) // I don't need to set top and bottom spacing
let cellsAccumulatedWidth = CGFloat(integerLiteral: count) * cellWidth
let cellsSpacingAccumulatedWidth = CGFloat(integerLiteral: (count - 1) * 5)
let left = (self.collectionView.frame.size.width - cellsAccumulatedWidth - cellsSpacingAccumulatedWidth) / 2
let bottom = top
let right = left
return UIEdgeInsetsMake(top, left, bottom, right);
}
}
此代码应水平居中任何类型的集合视图，即使在 Swift 4.0:
中有额外项目
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
let cellWidth: CGFloat = flowLayout.itemSize.width
let cellSpacing: CGFloat = flowLayout.minimumInteritemSpacing
let cellCount = CGFloat(collectionView.numberOfItems(inSection: section))
var collectionWidth = collectionView.frame.size.width
if #available(iOS 11.0, *) {
collectionWidth -= collectionView.safeAreaInsets.left + collectionView.safeAreaInsets.right
}
let totalWidth = cellWidth * cellCount + cellSpacing * (cellCount - 1)
if totalWidth <= collectionWidth {
let edgeInset = (collectionWidth - totalWidth) / 2
return UIEdgeInsetsMake(flowLayout.sectionInset.top, edgeInset, flowLayout.sectionInset.bottom, edgeInset)
} else {
return flowLayout.sectionInset
}
}
如果您没有订阅 class，请不要忘记 UICollectionViewController，请确保您的 class 符合 UICollectionViewDelegateFlowLayout 协议
这是最近的解决方案，适用于 Swift 5.0
extension YourViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
insetForSectionAt section: Int) -> UIEdgeInsets {
let itemWidth = 80
let spacingWidth = 4
let numberOfItems = collectionView.numberOfItems(inSection: section)
let cellSpacingWidth = numberOfItem * spacingWidth
let totalCellWidth = numberOfItems * itemWidth + cellSpacingWidth
let inset = (collectionView.layer.frame.size.width - CGFloat(totalCellWidth)) / 2
return UIEdgeInsets(top: 5, left: inset, bottom: 5, right: inset)
}
}
使用此解决方案进行居中对齐的水平滚动。
let totalCellWidth = Int(collectionView.frame.height * CGFloat(numberOfItems()))
// if total width is greater than collection's width, then no need to align center
if totalCellWidth > Int(collectionView.frame.width) {
return UIEdgeInsets.zero
}
let totalSpacingWidth = cellSpacing * (numberOfItems() - 1)
let leftInset = (collectionView.frame.width - CGFloat(totalCellWidth + totalSpacingWidth)) / 2
let rightInset = leftInset
return UIEdgeInsets(top: 0, left: leftInset, bottom: 0, right: rightInset)
如果您的 collectionView 有一行，我认为最简单的解决方案是用滚动视图中的 stackView 代替它，这样您就可以设置视图之间所需的间距。
此外，如果你想要一些填充，你可以应用它。
描述：
Objective-C 和 Swift2.0 的答案：How to center align the cells of a UICollectionView?
我通常会尝试将 Swift2.0 答案转换为 Swift3.0 解决方案，但是方法：
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
let edgeInsets = (screenWight - (CGFloat(elements.count) * 50) - (CGFloat(elements.count) * 10)) / 2
return UIEdgeInsetsMake(0, edgeInsets, 0, 0);
}
在 Swift3.0 中似乎不存在，我发现唯一有用的其他方法是：
func collectionView(_ collectionView: UICollectionView, transitionLayoutForOldLayout fromLayout: UICollectionViewLayout, newLayout toLayout: UICollectionViewLayout) -> UICollectionViewTransitionLayout {
<#code#>
}
但我不确定如何正确实施它。
问题：
如何在 Swift3.0 中居中对齐 UICollectionView 的单元格？
（iOS 和 tvOS 的简单通用解决方案将是完美的）
您要查找的方法在 Swift 3 中以不同的签名存在。新签名是这样的：
optional public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets
P.S: 此方法存在于 UICollectionViewDelegateFlowLayout 协议中。
希望这会有所帮助。
假设你符合UICollectionViewDelegateFlowLayout，应该是：
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let edgeInsets = (screenWight - (CGFloat(elements.count) * 50) - (CGFloat(elements.count) * 10)) / 2
return UIEdgeInsets(top: 0, left: edgeInsets, bottom: 0, right: 0)
}
这最终成为我使用的解决方案。阅读代码注释以获得更好的理解。 Swift 5
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
//Where elements_count is the count of all your items in that
//Collection view...
let cellCount = CGFloat(elements_count)
//If the cell count is zero, there is no point in calculating anything.
if cellCount > 0 {
let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
let cellWidth = flowLayout.itemSize.width + flowLayout.minimumInteritemSpacing
//20.00 was just extra spacing I wanted to add to my cell.
let totalCellWidth = cellWidth*cellCount + 20.00 * (cellCount-1)
let contentWidth = collectionView.frame.size.width - collectionView.contentInset.left - collectionView.contentInset.right
if (totalCellWidth < contentWidth) {
//If the number of cells that exists take up less room than the
//collection view width... then there is an actual point to centering them.
//Calculate the right amount of padding to center the cells.
let padding = (contentWidth - totalCellWidth) / 2.0
return UIEdgeInsets(top: 0, left: padding, bottom: 0, right: padding)
} else {
//Pretty much if the number of cells that exist take up
//more room than the actual collectionView width, there is no
// point in trying to center them. So we leave the default behavior.
return UIEdgeInsets(top: 0, left: 40, bottom: 0, right: 40)
}
}
return UIEdgeInsets.zero
}
func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets {
let allCellWidth = KcellWidth * numberOfCell
let cellSpacingWidth = CellSpacing * (numberOfCell - 1)
let leftInset = (collectionViewWidth - CGFloat(allCellWidth + cellSpacingWidth)) / 2
let rightInset = leftInset
return UIEdgeInsetsMake(0, leftInset, 0, rightInset)
}
虽然
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
// Make sure that the number of items is worth the computing effort.
guard let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout,
let dataSourceCount = collectionView.dataSource?.collectionView(collectionView, numberOfItemsInSection: section),
dataSourceCount > 0 else {
return .zero
}
let cellCount = CGFloat(dataSourceCount)
let itemSpacing = flowLayout.minimumInteritemSpacing
let cellWidth = flowLayout.itemSize.width + itemSpacing
var insets = flowLayout.sectionInset
// Make sure to remove the last item spacing or it will
// miscalculate the actual total width.
let totalCellWidth = (cellWidth * cellCount) - itemSpacing
let contentWidth = collectionView.frame.size.width - collectionView.contentInset.left - collectionView.contentInset.right
// If the number of cells that exist take up less room than the
// collection view width, then center the content with the appropriate insets.
// Otherwise return the default layout inset.
guard totalCellWidth < contentWidth else {
return insets
}
// Calculate the right amount of padding to center the cells.
let padding = (contentWidth - totalCellWidth) / 2.0
insets.left = padding
insets.right = padding
return insets
}
N.B.: 此代码段仅适用于水平滚动，但可以轻松调整。
@rottenoats 回答的轻微改编。这更通用。
最重要的是记住让你的视图控制器符合 UICollectionViewDelegateFlowLayout 协议。
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
guard let flowLayout = collectionViewLayout as? UICollectionViewFlowLayout else {
return .zero
}
let cellCount = CGFloat(collectionView.numberOfItems(inSection: section))
if cellCount > 0 {
let cellWidth = flowLayout.itemSize.width + flowLayout.minimumInteritemSpacing
let totalCellWidth = cellWidth * cellCount
let contentWidth = collectionView.frame.size.width - collectionView.contentInset.left - collectionView.contentInset.right - flowLayout.headerReferenceSize.width - flowLayout.footerReferenceSize.width
if (totalCellWidth < contentWidth) {
let padding = (contentWidth - totalCellWidth + flowLayout.minimumInteritemSpacing) / 2.0
return UIEdgeInsetsMake(0, padding, 0, 0)
}
}
return .zero
}
您需要遵守 到UICollectionViewDelegateFlowLayout 协议才能找到collectionView(_:layout:insetForSectionAt:) 方法，它已在此处定义。对于水平 collectionView
extension YourViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let cellWidth = CGFloat(integerLiteral: YourCellsWidth)
let count = self.YourCollectionViewDataSource.count
let top = CGFloat(integerLiteral: 0) // I don't need to set top and bottom spacing
let cellsAccumulatedWidth = CGFloat(integerLiteral: count) * cellWidth
let cellsSpacingAccumulatedWidth = CGFloat(integerLiteral: (count - 1) * 5)
let left = (self.collectionView.frame.size.width - cellsAccumulatedWidth - cellsSpacingAccumulatedWidth) / 2
let bottom = top
let right = left
return UIEdgeInsetsMake(top, left, bottom, right);
}
}
此代码应水平居中任何类型的集合视图，即使在 Swift 4.0:
中有额外项目func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
let cellWidth: CGFloat = flowLayout.itemSize.width
let cellSpacing: CGFloat = flowLayout.minimumInteritemSpacing
let cellCount = CGFloat(collectionView.numberOfItems(inSection: section))
var collectionWidth = collectionView.frame.size.width
if #available(iOS 11.0, *) {
collectionWidth -= collectionView.safeAreaInsets.left + collectionView.safeAreaInsets.right
}
let totalWidth = cellWidth * cellCount + cellSpacing * (cellCount - 1)
if totalWidth <= collectionWidth {
let edgeInset = (collectionWidth - totalWidth) / 2
return UIEdgeInsetsMake(flowLayout.sectionInset.top, edgeInset, flowLayout.sectionInset.bottom, edgeInset)
} else {
return flowLayout.sectionInset
}
}
如果您没有订阅 class，请不要忘记 UICollectionViewController，请确保您的 class 符合 UICollectionViewDelegateFlowLayout 协议
这是最近的解决方案，适用于 Swift 5.0
extension YourViewController: UICollectionViewDelegateFlowLayout {
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
insetForSectionAt section: Int) -> UIEdgeInsets {
let itemWidth = 80
let spacingWidth = 4
let numberOfItems = collectionView.numberOfItems(inSection: section)
let cellSpacingWidth = numberOfItem * spacingWidth
let totalCellWidth = numberOfItems * itemWidth + cellSpacingWidth
let inset = (collectionView.layer.frame.size.width - CGFloat(totalCellWidth)) / 2
return UIEdgeInsets(top: 5, left: inset, bottom: 5, right: inset)
}
}
使用此解决方案进行居中对齐的水平滚动。
let totalCellWidth = Int(collectionView.frame.height * CGFloat(numberOfItems()))
// if total width is greater than collection's width, then no need to align center
if totalCellWidth > Int(collectionView.frame.width) {
return UIEdgeInsets.zero
}
let totalSpacingWidth = cellSpacing * (numberOfItems() - 1)
let leftInset = (collectionView.frame.width - CGFloat(totalCellWidth + totalSpacingWidth)) / 2
let rightInset = leftInset
return UIEdgeInsets(top: 0, left: leftInset, bottom: 0, right: rightInset)
如果您的 collectionView 有一行，我认为最简单的解决方案是用滚动视图中的 stackView 代替它，这样您就可以设置视图之间所需的间距。 此外，如果你想要一些填充，你可以应用它。