How can I have image views in a collection view resize themselves depending on the screen size?

Question

I have a collection view of image views, and when run in the simulator on an iPhone 7, the layout is how I want it - images displayed 3 per line, with no spacing in between. However when I run it on my phone (iPhone 6+), there is spacing between the images.

These are the functions that set up the layout:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsetsMake(0,0,0,0)
}

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
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

    let imgWidth = view.bounds.width/3.0
    let imgHeight = imgWidth

    return CGSize(width: imgWidth, height: imgHeight)
}

I was thinking that sizeForItem would re-scale the images by stating that the width would be the screen width divided by three, and the height equal to that. But I think I'm confused about that and perhaps it's only resizing the cell, and not the image view within. However I'm not sure where I can set the image view size to scale dynamically with the screen size.

How can I change it so the image cells in the collection view resize themselves accordingly, and remain 3 per line with no spacing, regardless of screen size?

EDIT: After putting cell.postImage.contentMode = UIViewContentMode.scaleAspectFill into cellForItem method:

EDIT 2: After trying iOSFreak's solution, problem still persists:

Answer 1

You change Estimate Size "None".

Answer 2

Provided you have the imageview pinned to the collection view cell using autolayout cell 0-top,0-bottom,0-leading, and 0-trailing or autoresizing of .flexible height and .flexible width I don't see why it would not work in your example. Your methods look right.

Do you have UICollectionViewDelegateFlowLayout in the declarations example?

class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {}

Answer 3

Please try the below code

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

  let imgWidth = CGRectGetWidth(collectionView.frame)/3.0
  return CGSize(width: imgWidth, height: imgWidth)
}

if this doesn't work, Create a subClass of UICollectionViewFlowLayoutas shown below

Updated to swift 3.0

class CustomImageLayout: UICollectionViewFlowLayout {

var numberOfColumns:CGFloat = 3.0

override init() {
    super.init()
    setupLayout()
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    setupLayout()
}

override var itemSize: CGSize {
    set { }
    get {
        let itemWidth = (self.collectionView!.frame.width - (self.numberOfColumns - 1)) / self.numberOfColumns
        return CGSize(width: itemWidth, height: itemWidth)
    }
}

func setupLayout() {
    minimumInteritemSpacing = 1 // Set to zero if you want
    minimumLineSpacing = 1
    scrollDirection = .vertical
}
}

You need set collection views layout with custom layout.

class ViewController: UIViewController {

    @IBOutlet weak var colleciton: UICollectionView!

override func viewDidLoad() {
    super.viewDidLoad()
    colleciton.collectionViewLayout = CustomImageLayout()
    // Do any additional setup after loading the view, typically from a nib.
}
}