How to show two columns in a CollectionView using swift4 in all devices

Question

To show only two columns in a collectionView i am using this piece of code

    let layout = self.collectionView.collectionViewLayout as! UICollectionViewFlowLayout
    layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0)
    layout.minimumInteritemSpacing = 4
    layout.itemSize = CGSize(width:(self.collectionView.frame.size.width - 10)/2,height: (self.collectionView.frame.size.height)/3)

but it is only showing properly on 5s, not on every iphone. please help.

i want to show my view controller like this image. please help anyone

Krunal · Answer 1 · 2018-03-30T13:04:02.350

52

You must be missing UICollectionViewDelegateFlowLayout

Try this and see:

// Source code
import UIKit

class CollectionVC: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    @IBOutlet var collection: UICollectionView!
    override func viewDidLoad() {
        super.viewDidLoad()
        collection.delegate = self
        collection.dataSource = self
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        //collection.reloadData()
    }

    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let flowayout = collectionViewLayout as? UICollectionViewFlowLayout
        let space: CGFloat = (flowayout?.minimumInteritemSpacing ?? 0.0) + (flowayout?.sectionInset.left ?? 0.0) + (flowayout?.sectionInset.right ?? 0.0)
        let size:CGFloat = (collection.frame.size.width - space) / 2.0
        return CGSize(width: size, height: size)
    }


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

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

}

// Interface Design

Result:

edited Mar 30 '18 at 13:04

answered Mar 30 '18 at 12:25

Krunal

77,632
48
245
261

can you tell me how reduce the space between two items. – Gorib Developer Mar 30 '18 at 12:31
done it accordingly but the space between two items is not reducing sir – Gorib Developer Mar 30 '18 at 12:35
@GoribDeveloper - Copy my full code and design your interface exactly I've shown in interface builder design. – Krunal Mar 30 '18 at 12:50
Create a new sample project and try this code and in it. May be other extension features affecting in your existing project – Krunal Mar 30 '18 at 12:53
yes.i also thought that.. okay doing it accordingly – Gorib Developer Mar 30 '18 at 12:54
2

This is a pretty elegant answer - I like how it takes into the account whatever insets you may set - thank you! – mrkot Jan 23 '20 at 17:01
This does not work on iOS 14.6 unfortunately. I get 3 columns with it instead of two – Deepak Sharma Jun 28 '21 at 08:38
@DeepakSharma - Let me check for iOS 14 and get back to you. – Krunal Jul 03 '21 at 05:32

score 14 · Answer 2 · edited Feb 02 '21 at 05:45

14

Make sure your protocol confirms to your ViewController,

class ViewController: UIViewController,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout

And set flow layout to your collectionview object

In viewDidLoad

let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .vertical //.horizontal
layout.minimumLineSpacing = 5
layout.minimumInteritemSpacing = 5
collectionView.setCollectionViewLayout(layout, animated: true)

And implement following methods

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAt section: Int) -> UIEdgeInsets {
    return UIEdgeInsets(top: 1.0, left: 1.0, bottom: 1.0, right: 1.0)//here your custom value for spacing
}

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let lay = collectionViewLayout as! UICollectionViewFlowLayout
    let widthPerItem = collectionView.frame.width / 2 - lay.minimumInteritemSpacing
    
    return CGSize(width:widthPerItem, height:100)
}

edited Feb 02 '21 at 05:45

aturan23

4,798
4
28
52

answered Mar 30 '18 at 12:13

karthikeyan

3,821
3
22
45

doing it accordingly – Gorib Developer Mar 30 '18 at 12:19
@karthikeyani am saying that i am following your steps – Gorib Developer Mar 30 '18 at 12:22
yes.. it is coming..can you tell me how reduce the space between two items. – Gorib Developer Mar 30 '18 at 12:23
let us know, if that helps you – karthikeyan Mar 30 '18 at 12:23
change your values here return UIEdgeInsets(top: 1.0, left: 1.0, bottom: 1.0, right: 1.0) – karthikeyan Mar 30 '18 at 12:23
the space is not reducing sir – Gorib Developer Mar 30 '18 at 12:25
give layout.minimumLineSpacing = 10 layout.minimumInteritemSpacing = 10 UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0) – karthikeyan Mar 30 '18 at 12:27
adjust your values depends upon your need, this is the proper way to adding flowlayout programmatically – karthikeyan Mar 30 '18 at 12:29
are you adding like this let widthPerItem = collectionView.frame.width / 2 - lay.minimumInteritemSpacing – karthikeyan Mar 30 '18 at 12:32
what is your result now – karthikeyan Mar 30 '18 at 12:33
the space is not reducing.. between two items let size = (self.collectionView.frame.size.width - 30) / 2.0 return CGSize(width: size, height: size) – Gorib Developer Mar 30 '18 at 12:34
Never give static values like 30 – karthikeyan Mar 30 '18 at 12:36
okay sir doing this let lay = collectionViewLayout as! UICollectionViewFlowLayout let widthPerItem = collectionView.frame.width / 2 - lay.minimumInteritemSpacing return CGSize(width:widthPerItem, height:100) – Gorib Developer Mar 30 '18 at 12:38
Work for me. The CollectionView is inside UITableCellView – Jhonattan Aug 29 '18 at 14:44
Working Solution – Naveed Ahmad Mar 29 '20 at 21:22

tailor · Accepted Answer · 2018-03-30T12:28:54.420

add this code to viewDidLoad. change height according to you.

try this!

if let layout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout{
        layout.minimumLineSpacing = 10
        layout.minimumInteritemSpacing = 10
        layout.sectionInset = UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 10)
        let size = CGSize(width:(collectionView!.bounds.width-30)/2, height: 250)
        layout.itemSize = size
}

Sagar Chauhan · Answer 4 · 2018-03-30T12:02:31.783

1

I have following code which I have implemented to display two column in collection view.

Add UICollectionViewDelegateFlowLayout’s following method method:

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    let size = (collectionView.frame.size.width - 30) / 2
    return CGSize(width: size, height: size)
}

Where 30 stand for left, right and middle space between cell.

i.e Cell should be add 10 pixel on left Side, 10 pixel on right side and 10 pixel in between two cell.

Select you collectionview from storyboard and from Size Inspector set following minimum spacing.

I hope this will fix you issue.

Let me know if any query.

edited Mar 30 '18 at 12:02

answered Mar 30 '18 at 11:59

Sagar Chauhan

5,715
2
22
56

What happening ? – Sagar Chauhan Mar 30 '18 at 12:06
posting screenshot – Gorib Developer Mar 30 '18 at 12:07
Have you connected collectionView’s Delegate ? – Sagar Chauhan Mar 30 '18 at 12:09
where i have to give 30? – Gorib Developer Mar 30 '18 at 12:11
Can you share your demo if not a project ? – Sagar Chauhan Mar 30 '18 at 12:11

score 1 · Answer 5 · answered Feb 02 '21 at 05:56

Update for Swift 5 and XCode 12.4

    import UIKit

class TwoColumnViewController: UIViewController {

    enum Section {
        case main
    }

    var dataSource: UICollectionViewDiffableDataSource<Section, Int>! = nil
    var collectionView: UICollectionView! = nil

    override func viewDidLoad() {
        super.viewDidLoad()
        navigationItem.title = "Two-Column Grid"
        configureHierarchy()
        configureDataSource()
    }
}

extension TwoColumnViewController {
    /// - Tag: TwoColumn
    func createLayout() -> UICollectionViewLayout {
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                             heightDimension: .fractionalHeight(1.0))
        let item = NSCollectionLayoutItem(layoutSize: itemSize)

        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                              heightDimension: .absolute(44))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitem: item, count: 2)
        let spacing = CGFloat(10)
        group.interItemSpacing = .fixed(spacing)

        let section = NSCollectionLayoutSection(group: group)
        section.interGroupSpacing = spacing
        section.contentInsets = NSDirectionalEdgeInsets(top: 0, leading: 10, bottom: 0, trailing: 10)

        let layout = UICollectionViewCompositionalLayout(section: section)
        return layout
    }
}

extension TwoColumnViewController {
    func configureHierarchy() {
        collectionView = UICollectionView(frame: view.bounds, collectionViewLayout: createLayout())
        collectionView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        collectionView.backgroundColor = .systemBackground
        view.addSubview(collectionView)
    }
    func configureDataSource() {
        let cellRegistration = UICollectionView.CellRegistration<TextCell, Int> { (cell, indexPath, identifier) in
            // Populate the cell with our item description.
            cell.label.text = "\(identifier)"
            cell.contentView.backgroundColor = .cornflowerBlue
            cell.layer.borderColor = UIColor.black.cgColor
            cell.layer.borderWidth = 1
            cell.label.textAlignment = .center
            cell.label.font = UIFont.preferredFont(forTextStyle: .title1)
        }
        
        dataSource = UICollectionViewDiffableDataSource<Section, Int>(collectionView: collectionView) {
            (collectionView: UICollectionView, indexPath: IndexPath, identifier: Int) -> UICollectionViewCell? in
            // Return the cell.
            return collectionView.dequeueConfiguredReusableCell(using: cellRegistration, for: indexPath, item: identifier)
        }

        // initial data
        var snapshot = NSDiffableDataSourceSnapshot<Section, Int>()
        snapshot.appendSections([.main])
        snapshot.appendItems(Array(0..<94))
        dataSource.apply(snapshot, animatingDifferences: false)
    }
}

How to show two columns in a CollectionView using swift4 in all devices

5 Answers5

Linked