Constraints in collectionView

Question

I want to have dynamic width and height in my collectionView cells so I have only 2 cells in every screen. And 10px from top, left, right and between them.

Example:

If I have 320px width(screen) I want 145px every cell so it would be 10px from left +145(cell) + 10px between + 145(2nd cell) + 10px from right.

Answer 1

Conform your controller to UICollectionViewDelegateFlowLayout protocol and implement the methods:

import UIKit

class ViewController: UIViewController
{
    let numberOfCells = 9
    let kCellHeight : CGFloat = 100
    let kLineSpacing : CGFloat = 10
    let kInset : CGFloat = 10

    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad()
    {
        super.viewDidLoad()
    }
}

extension ViewController : UICollectionViewDataSource
{
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int
    {
        return numberOfCells
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell
    {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "sampleCell", for: indexPath)
        return cell
    }
}

extension ViewController : UICollectionViewDelegateFlowLayout
{
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize
    {
        return CGSize(width: (UIScreen.main.bounds.width - 2*kInset - kLineSpacing)/2, height: kCellHeight)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat
    {
        return kLineSpacing
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets
    {
        return UIEdgeInsets(top: kInset, left: kInset, bottom: kInset, right: kInset)
    }
}

Here is the attached screenshot:

Answer 2

You either use stackviews or you can set width constraint of your cell and drag it into code to set the constant to half screen size.

Also why you're using constraints directly on cells when you have:

func collectionView(collectionView : UICollectionView,layout collectionViewLayout:UICollectionViewLayout,sizeForItemAtIndexPath indexPath:NSIndexPath) -> CGSize
{
    return CGSizeMake(width ,height);
}

Answer 3

Use the below code :

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize { let width = (screenSize.width - 30) / 2 let height = width * aspectRatio // aspectRatio - someValue or put height as a constant return CGSizeMake(width, height) }

this worked well for me..