SWIFT: How to make UICollectionView items fill row before returning to line

Question

This is what I have implemented:

See the black space on the right, it could still hold two extra items. But for some reason, starting from the 7th item, the rendering starts at the next line.
My layout configuration only changes two parameters:

class CarouselFlowLayout: UICollectionViewFlowLayout {
    override init() {
        super.init()
        minimumLineSpacing = 40
        minimumInteritemSpacing = 20
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func prepare() {
        super.prepare()
    }
}

Any idea, which parameters should I configure in order to force the collectionView to fill each "row" before returning to the next line?

What does the view debugger say about it. It almost looks as if the bounds of the collection is wrong / not full width. — Warren Burton, Nov 06 '20 at 14:06
If I create a collection view with 24 elements, the elements reach the edge as each row contains 8 elements. So the collectionView width is the full width of the contentView — AG_HIHI, Nov 06 '20 at 14:10
Debug the View Hierarchy (cf https://developer.apple.com/library/archive/documentation/DeveloperTools/Conceptual/debugging_with_xcode/chapters/special_debugging_workflows.html#//apple_ref/doc/uid/TP40015022-CH9-SW2) to check if it's just simply your width of the collectionView that is causing the issue. — Larme, Nov 06 '20 at 14:10
FYI, I'm colouring the collectionView border and it matches the view that contains it. So I don't think that's the case. — AG_HIHI, Nov 06 '20 at 14:11
I found out the reason is that the collectionView fills the items by column. and then moves to the next column — AG_HIHI, Nov 06 '20 at 14:47

score 0 · Answer 1 · answered Nov 06 '20 at 16:18

All I needed to do is set scrollDirection to horizontal:

  override init() {
        super.init()
        // This needs to be vertical in order for the collectionView to fill rows before columns in the case of displaying the whole collection view as a grid like in VoirTout page
        scrollDirection = .vertical
        minimumLineSpacing = 40
        minimumInteritemSpacing = 20
    }

SWIFT: How to make UICollectionView items fill row before returning to line

1 Answers1