ios 对齐集合视图单元格以适合每行 3 个

Aligning collection view cells to fit exactly 3 per row

提问by KingTim

I am trying to make a collection view of images, so that there are 3 per row, with no spacing in between.

我正在尝试制作图像的集合视图，以便每行有 3 个，中间没有间距。

My collection view data sources are:

我的集合视图数据源是：

func numberOfSections(in collectionView: UICollectionView) -> Int {
    return 1
}

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return posts.count
}

and this is how it's set up in my storyboard (imageView width is 125, a third of the 375 screen width):

这就是它在我的故事板中的设置方式（imageView 宽度为 125，是 375 屏幕宽度的三分之一）：

However when I run the app and add some photos, it looks like this:

但是，当我运行应用程序并添加一些照片时，它看起来像这样：

How can I fix this so that I see 3 images per row? Thanks for any help!

我该如何解决这个问题，以便每行看到 3 个图像？谢谢你的帮助！

回答by Kingalione

You have to implement the

你必须执行

UICollectionViewDelegateFlowLayout

UICollectionViewDelegateFlowLayout

for the spacing stuff.

对于间距的东西。

Set the size of the collectionViewCells like this:

像这样设置 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)
}

You can also add these functions to get your spacing of the collectionViewCells correct:

您还可以添加这些函数以使 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
}

回答by Gagandeep Gambhir

Swift - Version 4.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) 
}

回答by Ahmad F

1-You have to conform to UICollectionViewDelegateFlowLayout

1-你必须符合UICollectionViewDelegateFlowLayout

2-You should implement collectionView(_:layout:sizeForItemAt:)method, as follows:

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)
}

Assuming that the minimum spaces are 8 -for example-,

假设最小空格为 8 - 例如 -，

the output should be three items for each row, square sized.

输出应该是每行三个项目，正方形大小。

Remark: If you want to set the spaces between the cells to be zero, then scaleFactorshould be:

备注：如果要将单元格之间的空格设置为零，scaleFactor则应为：

let scaleFactor = (screenWidth / 3)

Hope this helped.

希望这有帮助。

回答by sadegh bitarafan

you can use this

你可以用这个

This code is somehow written that you can change section inset or minimumInteritemSpacing and this calculate and resize with this parameters

这段代码以某种方式编写，您可以更改 section inset 或 minimumInteritemSpacing，并使用此参数计算和调整大小

you can use this code or download project from Github

您可以使用此代码或从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)
    }

回答by Deviyani Swami

You have to implement the

你必须执行

UICollectionViewDelegateFlowLayoutfor the spacing stuff.

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
}