27

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

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

enter image description here

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

enter image description here

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

3
  • Do you really need a collection view here? It's so easy just to make a grid of image views such as you describe, in code. If you don't need any other collection view features, why bother with a collection view for something so basic?
    – matt
    Mar 9, 2017 at 15:19
  • I guess that would be another way to do it, I'll keep it in mind for another project. The issue is solved now so I might as well keep it as a collection view - would there be any advantage to using your approach instead, or is it just easier to implement initially?
    – KingTim
    Mar 9, 2017 at 15:22
  • The "advantage" would only have been that you clearly didn't know how to make a collection view with the desired structure. Stay with it if the problem is solved, by all means!
    – matt
    Mar 9, 2017 at 15:27

5 Answers 5

66

You have to implement the

UICollectionViewDelegateFlowLayout

for the spacing stuff.

Set the size of the collectionViewCells like this:

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:

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
}
0
37

Swift - Version 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) 
}
1
  • this works perfectly, I use this with 4 cells in row just changing the noOfCellsInRow value and shows proportional and aligned correctly.
    – Ángel B.
    Dec 12, 2022 at 18:36
8

1- You have to conform to UICollectionViewDelegateFlowLayout

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

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-,

enter image description here

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 scaleFactor should be:

let scaleFactor = (screenWidth / 3)

Hope this helped.

6

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

you can use this code or download project from 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)
    }

5

You have to implement the

UICollectionViewDelegateFlowLayout for the spacing stuff.

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
}
1
  • it works after putting Estimate size to none to show the size inspector section Sep 23 at 11:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.