CODEWITHSUNDEEP
iosswiftuicollectionviewcell
mike vorisis
mike vorisis

Reputation: 2832

Constraints in collectionView

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.

Upvotes: 0

Views: 5700

Answers (3)

PGDev
PGDev

Reputation: 24341

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:

enter image description here

Upvotes: 3

Hrishikesh Menon
Hrishikesh Menon

Reputation: 137

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

Upvotes: 0

Said Hasanein
Said Hasanein

Reputation: 320

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

Upvotes: 1

Related Questions