How to set custom collectionView Cell Frame?

Question

I want first UICollectionViewCell by full width of screen and further UICOllectionViewCell is 2*2.

For that i have tried below code.

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

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    if indexPath.item == 0 {
        let cell : FirstCell = collectionView.dequeueReusableCell(withReuseIdentifier: "FirstCell", for: indexPath) as! FirstCell

        cell.layoutSubviews()
        return cell
    }
    else {
        let cell : SecondCell = collectionView.dequeueReusableCell(withReuseIdentifier: "SecondCell", for: indexPath) as! SecondCell

        cell.layoutSubviews()
        return cell
    }
}

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

    if indexPath.item == 0 {
        let width   = (UIScreen.main.bounds.size.width - 16)
        return CGSize(width: width, height: 200)
    }
    else {
        let width   = (UIScreen.main.bounds.size.width - 24) / 2
        let height  = (UIScreen.main.bounds.size.width * 200) / 320
        return CGSize(width: width, height: height)
    }
}

But the Output comes as below.

Requirement: First Green Cell is of full Width and 2nd Yellow cell comes not from Center but it comes from left side and 3rd, 4th and so on cell comes 2*2

Any help will be appreciated.

Thanks in Advance.

You will need to create your own flow layout. Please check your options here: https://stackoverflow.com/questions/22539979/left-align-cells-in-uicollectionview — inokey, Sep 21 '18 at 11:22
may be you should take a look over https://github.com/nicklockwood/iCarousel — Vikram Sinha, Sep 21 '18 at 12:04
@inokey, Thanks for suggestion, i will try and let you know. — Denis, Sep 22 '18 at 06:09
@vikramsingh, Thanks for suggestion but i want to use `UICollectionView`. — Denis, Sep 22 '18 at 06:10

score 0 · Answer 1 · answered Sep 21 '18 at 12:22

To achieve this, you should take 3 section in collection view.

section 1 - 1 cell
section 2 - 1 cell (width should be less than half of available width for collection cell)
section 3 - number of cell you wanted

extension ViewController: UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

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

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return section == 2 ? 4 : 1
    }

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

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        switch indexPath.section {
        case 0:
            return CGSize(width: UIScreen.main.bounds.width - 20, height: 200)
        case 1:
            return CGSize(width: (UIScreen.main.bounds.width - 30) / 2, height: 200)
        default:
            return CGSize(width: (UIScreen.main.bounds.width - 30) / 2, height: 200)
        }
    }

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

Your view will look like:

How to set custom collectionView Cell Frame?

1 Answers1