Swift - UICollectionView Displaying Multiple Items In A Row

Question

I am new to both iOS and Swift. I have created a collection view, and it works fine but I want to display multiple items in a single row. I tried but its not working. Can some one help me? Thanks in advance.

This is my code:

DashBoardCollectionVC

import UIKit

class DashBoardCollectionVC: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate {

    @IBOutlet weak var main_collection_view: UICollectionView!

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

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

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

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

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        var collectionViewSize = collectionView.frame.size
        collectionViewSize.width = collectionViewSize.width/2.0 //Display Three elements in a row.
        collectionViewSize.height = collectionViewSize.height/4.0
        return collectionViewSize
    }

    func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        print("Item Clicked : \(indexPath.item)")

    }

    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {

    }

}

it looks like this

ContainerView Design

I want to display two items in a row. How can I achieve that?

see this for e.g http://zappdesigntemplates.com/create-3-column-grid-view-with-uicollectionview/ — Anbu.Karthik, Sep 20 '17 at 10:35

score 4 · Answer 1 · answered Sep 20 '17 at 14:16

I had a very similar problem some time ago, and it was in the collectionViewLayout method. My cells were completely square, so maybe this doesn't help you, or maybe you can adapt it. This is what worked for me:

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

        let width = collectionView.frame.width / 3 - 1
        return CGSize(width: width, height: width)
    }

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

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

Or if we want 2 in a row the code would be:

let width = collectionView.frame.width / 2 - 1

Also, in storyboard normally when you drag a "collection view" from the object library, the cell appear in the left corner, something like in the next image - Maybe this is not relevant and you can set everything programatically, but just in case is creating some conflicts with the autolayout.

score 1 · Answer 2 · answered Sep 20 '17 at 11:20

1

Consider margin width while calculating width of cell. you need to minus margin width i.e space between two cells and leading and trailing space of cells from your
collectionViewSize.width = collectionViewSize.width/2.0 result. Same for height.

answered Sep 20 '17 at 11:20

Aura Abhishek

76
5

mahavir jadav · Answer 3 · 2017-09-20T11:17:36.030

Use this two methods it might work for you
=======================================

    func columnWidth(for collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout) -> CGFloat 
    {
                return self.clView.frame.size.width / 2
    }

func maximumNumberOfColumns(for collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout) -> Int {
                let numColumns: Int = Int(2.0)
                return numColumns
        }

Swift - UICollectionView Displaying Multiple Items In A Row

3 Answers3