CollectionView - Different number of columns in each section

Question

I want to have a collection view of following sample. But not able to figure out how can I implement it the way it is. It has 3 columns in first section and 2 columns in second section.

Any help please!!!

Answer 1

Here is a complete example displaying different cell sizes based on section.

import UIKit

class ViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {

    let data: [ (headerTitle: String, items: [String]) ] = [
        // Section 1
        ("Header 1", ["cell1", "cell2", "cell3", "cell4", "cell5", "cell6"]),

        // Section 2
        ("Header 2", ["cell1", "cell2", "cell3", "cell4", "cell5", "cell6"])
    ]

    // Create collectionView
    lazy var collectionView: UICollectionView = {
        let cv: UICollectionView = UICollectionView(frame: .zero, collectionViewLayout: self.layout)
        cv.contentInset.left = self.layout.minimumInteritemSpacing
        cv.contentInset.right = self.layout.minimumInteritemSpacing

        // register cell class
        cv.register(Cell.self, forCellWithReuseIdentifier: Cell.id)

        // register header
        cv.register(Header.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: Header.id)

        // set data source
        cv.dataSource = self
        cv.delegate = self

        return cv
    }()

    // Create collection view layout
    lazy var layout: UICollectionViewFlowLayout = {
        let l: UICollectionViewFlowLayout = UICollectionViewFlowLayout()
        l.minimumInteritemSpacing = 5 // horizontal space between cells
        l.minimumLineSpacing = 5 // vertical space between cells

        return l
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        collectionView.backgroundColor = .white
        view.addSubview(collectionView)
    }

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()
        collectionView.frame = view.bounds
    }

    var threeRowsSize: CGSize {
        // Tell layout to put 3 items in a row
        let width: CGFloat = collectionView.bounds.width/3 - (2 * layout.minimumInteritemSpacing)
        return CGSize(width: width, height: width)
    }

    var twoRowsSize: CGSize {
        // Tell layout to put 2 items in a row
        let width: CGFloat = collectionView.bounds.width/2 - (2 * layout.minimumInteritemSpacing)
        return CGSize(width: width, height: width)
    }

    func numberOfSections(in collectionView: UICollectionView) -> Int {
        return data.count
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return data[section].items.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: Cell.id, for: indexPath) as! Cell
        cell.textLable.text = data[indexPath.section].items[indexPath.row]

        return cell
    }

    func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        let header = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: Header.id, for: indexPath) as! Header

        header.textLable.text = data[indexPath.section].headerTitle

        return header
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        return CGSize(width: collectionView.bounds.width, height: 50)
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,   sizeForItemAt indexPath: IndexPath) -> CGSize {
        if indexPath.section == 0 {
            return threeRowsSize//threeRowsSize
        }
        return twoRowsSize
    }

    // Cell
    final class Cell: UICollectionViewCell {
        static let id: String = "cellId"

        let textLable: UILabel = UILabel()

        override init(frame: CGRect) {
            super.init(frame: frame)
            textLable.textAlignment = .center
            contentView.addSubview(textLable)
            textLable.backgroundColor = .lightGray
        }

        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }

        override func layoutSubviews() {
            super.layoutSubviews()
            textLable.frame = bounds

            // Make it somewhat circular
            textLable.layer.cornerRadius = textLable.bounds.width/3
            textLable.layer.masksToBounds = true
        }
    }

    // Header
    final class Header: UICollectionReusableView {
        static let id: String = "headerId"

        let textLable: UILabel = UILabel()

        override init(frame: CGRect) {
            super.init(frame: frame)
            backgroundColor = .cyan
            textLable.textAlignment = .left
            addSubview(textLable)
        }

        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }

        override func layoutSubviews() {
            super.layoutSubviews()
            textLable.frame = bounds
        }

    }
}

Answer 2

Override sizeForItemAtIndexPath and do the following:

- (NSInteger)itemPerRow:(UICollectionView *)collectionView forSection:(NSInteger)section {
    if (section == 0) {
        return 3;
    }

    return 2;
}

- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {

    NSInteger itemsPerRow = [self itemsPerRow:collectionView forSection:indexPath.section];

    CGFloat itemSpacing = ((UICollectionViewFlowLayout *)collectionViewLayout).minimumInteritemSpacing;

    UIEdgeInsets insets = [self collectionView:collectionView layout:collectionViewLayout insetForSectionAtIndex:indexPath.section];

    CGFloat width = (collectionView.bounds.size.width - (itemSpacing * (itemsPerRow - 1))) - (insets.left + insets.right);
    width /= itemsPerRow;
    return CGSizeMake(floor(width), floor(width));
}

- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {

    return UIEdgeInsetsMake(20.0, 20.0, 20.0, 20.0);
}

This calculates the size of each item based on the number of items per row in a section AND based on the inter-item spacing as well as the section insets. It will "floor" the itemWidth to make sure that X amount of items fit (due to rounding issues).