collectionview with the horizontal scroll with mulitple section

Question

I want to develop the screen(objective C) like this :

In this there are section names :

1. New Games we Love
2. New Apps We Love

Bo

Answer 1

Workaround (Using UICollectionView with Swift 4)

I am facing the same issue and can't find a way to make it work with UICollectionViewFlowLayout.

If you want to use UICollectionView, but the SupplementaryView is not flexible enough, you can do this workaround:

I have a fixed UILabel in the top-left side of the CollectionView and one floating UILabel that will move to the right accordingly. If there is only one section visible the second label will be hidden

We can intercept all cells being created/dequeued in the collectionView:cellForItemAt indexPath: method, but will will give you a lot of cell frames (many of them being prepared but still offscreen, and you will have to manage what frame corresponds to what section. This can be tricky if you have multiple rows in your horizontal scrolling collection view

You need to intercept the sections and the cell frames to found the lowest x coordinate, and the most reliable way is to inspect the .visibleCells property of the collectionView. This may be a lot of iterations (depending on the number of visible cells) and I'd love to identify a more efficient way. (a delegate method, a CollectionViewCellsDidAppear kind of notification, or being able to add an Observer to the .visibleCells property (not possible given that it is read-only)

So far this works (Swift 4), but has room for improvement:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CellID", for: indexPath) as! GalleryCell
    cell.label?.text = String((itemsArrays[indexPath.section][indexPath.row]))
    var pointsDict = Dictionary()
    for item in collectionView.visibleCells {
        let point = item.convert(CGPoint.zero, to: self.superview)
        let section = collectionView.indexPath(for: item)!.section
        if pointsDict[section] != nil {
            if point.x < pointsDict[section]! {
                pointsDict[section] = point.x
            }
        } else {
            pointsDict[section] = point.x
        }
    }
    updateLabels(dict: pointsDict)
    return cell
}

This code will give you a Dictionary with visible sections (keys) and the lowest x coordinate for each section (value) to align the floating label2 (my label1 has a fixed x at the left of the collectionView). You can also animate, hide/show the labels accordingly

This workaround is not optimal and I will post additional information if a solution using UICollectionViewFlowLayout