Stack UICollectionView sections

Question

I have a problem. I'm using a UICollectionView to display two (they will be more) arrays of images, and every array has its own section. I'd like to achieve something like:

-----------------------
Section 1:   Elements in array no. 1
-----------------------
Section 2:   Elements in array no. 2
-----------------------

But as of now I get something like

-----------------------
Section 1:  Elements in array no. 1 | Elements in array no. 2
-----------------------

How can I tell the UICollectionView to stack the two sections? I thought about putting the collection view I have now into the cell of another collection view, but I have no idea how to do that. Another solution may be to put them into the cell of a tableview, but it's best if I can avoid those workarounds.

I am not sure how to use it, but I think creating a custom layout may work, even if I need some help with that.

Also, I have been asked to not use any external library.

BTW I am programming in Objective-C.

http://stackoverflow.com/questions/20910105/uicollectionview-with-section-headers-like-a-uitableview — Wain, Apr 20 '16 at 14:57

Min Soe · Answer 1 · 2016-04-20T15:55:38.687

You can make multiple section by simply implementing UICollectionViewDataSource method numberOfSectionsInCollectionView

class ViewController: UIViewController, UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {

    let HEADER_IDENTIFIER = "header_identifier"
    let CELL_IDENTIFIER = "cell_identifier"
    lazy var collectionView:UICollectionView = {

        var cv = UICollectionView(frame: self.view.bounds, collectionViewLayout: self.flowLayout)
        cv.delegate = self
        cv.dataSource = self
        cv.registerClass(UICollectionViewCell.self, forCellWithReuseIdentifier: self.CELL_IDENTIFIER)
        cv.registerClass(UICollectionReusableView.self, forSupplementaryViewOfKind: UICollectionElementKindSectionHeader, withReuseIdentifier: self.HEADER_IDENTIFIER)
        cv.backgroundColor = UIColor(red: 230/255, green: 230/255, blue: 230/255, alpha: 1)
        return cv
    }()

    lazy var flowLayout:UICollectionViewFlowLayout = {
        var flow = UICollectionViewFlowLayout()
        flow.sectionInset = UIEdgeInsetsMake(2.0, 2.0, 2.0, 2.0)
        return flow
    }()

    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.addSubview(self.collectionView)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // MARK: UICollectionView
    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier(CELL_IDENTIFIER, forIndexPath: indexPath)
        cell.backgroundColor = UIColor.blueColor()
        return cell
    }

    func collectionView(collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, atIndexPath indexPath: NSIndexPath) -> UICollectionReusableView {
        let header = collectionView.dequeueReusableSupplementaryViewOfKind(UICollectionElementKindSectionHeader, withReuseIdentifier: HEADER_IDENTIFIER, forIndexPath: indexPath)
        header.backgroundColor = UIColor.redColor()
        return header
    }

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

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 2
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        return CGSize(width: 90, height: 90) // The size of one cell
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, referenceSizeForHeaderInSection section: Int) -> CGSize {
        return CGSizeMake(self.view.frame.width, 1)  // Header size
    }
}

And I did that. My problem is that the 2 sections don't stack, instead they line. — DarthGalm, Apr 20 '16 at 15:34
what layout are you using? Are you using Flowlayout? Can you check the connections of delegates with your collectionview? — Min Soe, Apr 20 '16 at 15:40
Yes I am using flowlayout, but I have no problem to switch to a custom layout, I'm only a newbie. Also, sorry I didn't make it clear in my question, I'm using objective-c. Also, what do you mean by connections of delegate? — DarthGalm, Apr 20 '16 at 16:04
Right click on your Collection View in Storyboard. You'll see datasource and delegate on top of the list. Hover over to the circle on the right side, you'll see `+` sign. Click the `+` sign and drag the line over to ViewController on the left side which is under View Controller Scene. Do that both for datasource and delegate. — Min Soe, Apr 20 '16 at 16:14
I see, I did that. Can you provide me a solution working in Obj-C ? — DarthGalm, Apr 21 '16 at 08:54

Stack UICollectionView sections

1 Answers1