对齐集合视图单元格以恰好适合每行 3 个
Posted
技术标签:
【中文标题】对齐集合视图单元格以恰好适合每行 3 个【英文标题】：Aligning collection view cells to fit exactly 3 per row 【发布时间】：2017-03-09 15:04:09 【问题描述】：我正在尝试制作图像的集合视图，以便每行有 3 个，中间没有间距。
我的集合视图数据源是：
func numberOfSections(in collectionView: UICollectionView) -> Int
return 1
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
return posts.count
这就是它在我的故事板中的设置方式（imageView 宽度为 125，是 375 屏幕宽度的三分之一）：
但是，当我运行应用程序并添加一些照片时，它看起来像这样：
如何解决这个问题，以便每行看到 3 张图片？感谢您的帮助！
【问题讨论】：
您真的在此处需要一个集合视图吗？只需在代码中制作您所描述的图像视图网格就非常容易。如果您不需要任何其他集合视图功能，为什么还要为这么基本的东西烦恼集合视图？ 我想这将是另一种方法，我会在另一个项目中记住它。现在问题已经解决了，所以我不妨将其保留为集合视图 - 改用您的方法是否有任何优势，还是最初更容易实现？ “优势”只是您显然不知道如何制作具有所需结构的集合视图。如果问题解决了，一定要坚持下去！ 【参考方案1】：你必须实现
UICollectionViewDelegateFlowLayout
用于间距的东西。
像这样设置collectionViewCells的大小：
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
let yourWidth = collectionView.bounds.width/3.0
let yourHeight = yourWidth
return CGSize(width: yourWidth, height: yourHeight)
您还可以添加这些函数来正确设置 collectionViewCells 的间距：
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets
return UIEdgeInsets.zero
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat
return 0
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat
return 0
【讨论】：
【参考方案2】：Swift - 4.2 版
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
let noOfCellsInRow = 3
let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
let totalSpace = flowLayout.sectionInset.left
+ flowLayout.sectionInset.right
+ (flowLayout.minimumInteritemSpacing * CGFloat(noOfCellsInRow - 1))
let size = Int((collectionView.bounds.width - totalSpace) / CGFloat(noOfCellsInRow))
return CGSize(width: size, height: size)
【讨论】：
【参考方案3】：1-你要符合UICollectionViewDelegateFlowLayout
2-你应该实现collectionView(_:layout:sizeForItemAt:)方法，如下：
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
let screenWidth = UIScreen.main.bounds.width
let scaleFactor = (screenWidth / 3) - 6
return CGSize(width: scaleFactor, height: scaleFactor)
假设最小空格为8-例如-，
输出应该是每行三个项目，正方形大小。
备注：如果要将单元格之间的空格设置为零，那么scaleFactor应该是：
let scaleFactor = (screenWidth / 3)
希望这会有所帮助。
【讨论】：
【参考方案4】：你必须实现
UICollectionViewDelegateFlowLayout 对于间距的东西。
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
return 10
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "UpperCollectionViewCell", for: indexPath) as! UpperCollectionViewCell
return cell
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
return CGSize(width: (self.collectionView.frame.width/3.0) - 5 , height: (self.collectionView.frame.height/4.0))
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat
return 2
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat
return 2
【讨论】：
【参考方案5】：你可以用这个
此代码以某种方式编写，您可以更改部分 inset 或 minimumInteritemSpacing 并使用此参数计算和调整大小
您可以使用此代码或从Github下载项目
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
let flowLayout = collectionViewLayout as! UICollectionViewFlowLayout
let numberofItem: CGFloat = 3
let collectionViewWidth = self.collectionView.bounds.width
let extraSpace = (numberofItem - 1) * flowLayout.minimumInteritemSpacing
let inset = flowLayout.sectionInset.right + flowLayout.sectionInset.left
let width = Int((collectionViewWidth - extraSpace - inset) / numberofItem)
print(width)
return CGSize(width: width, height: width)
【讨论】：
以上是关于对齐集合视图单元格以恰好适合每行 3 个的主要内容，如果未能解决你的问题，请参考以下文章