UICollectionView to read from left to right with multiple rows - ios

Question

I am creating a UICollectionView that has paging enabled and scrolls from left to right. I am using an NSFetchedResultsController to retrieve results from CoreData, which means it uses collection view sections rather than rows. The collection view has 2 rows and therefore appears like the following screenshot (where the order goes top row, bottom row, top row, bottom row etc):
However, I need the collection view to read from left to right like the following 2 screen shots:
Could you please advise on how I would do this in Swift?

Answer 1

What I would do is this:
1) Sort your data the same way you do it now so that your collection view would look like this:
---------
|0|2|4|6|
---------
|1|3|5|7|
---------
2) In your cellForIndexPath method of your collection view data source return the correct element so that your collection view turns into this:
---------
|0|1|2|3|
---------
|4|5|6|7|
---------
To do that you can use this logic:
public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
var elementIndex: Int!
if indexPath.row % 2 == 0 {
// 0 / 2 = 0
// 2 / 2 = 1
// 4 / 2 = 2, etc
elementIndex = indexPath.row / 2
}
else {
// (1 / 2) + round(8.0 / 2.0) = 4
// (3 / 2) + round(8.0 / 2.0) = 5
// (5 / 2) + round(8.0 / 2.0) = 6, etc
elementIndex = (indexPath.row / 2) + Int(round(Double(elements.count) / 2.0))
}
// Dequeue your cell
// let cell = ...
cell.element = elements[elementIndex]
return cell
}
Basically this should return your elements in the correct order.

Answer 2

First, I think it could help if you provide an example how your cells are sectioned currently (e.g. section 0: a, b, c, d, section 1: e, f, ...) and how you want the different sections to be displayed/layouted.
I'd suggest to create a custom UICollectionViewLayout subclass.
In the prepareLayout method you should calculate and cache the UICollectionViewLayoutAttributes for each cell.
Create variables:
let xOffset = 0.0 // leftContentInset within collectionView.bounds
let yOffsetRow0 = 0.0 // y offset of first row within collectionView.bounds
let yOffsetRow1 = 50.0 // y offset of second row within collectionView.bounds
var currentXOffset : CGFloat = xOffset
var currentPage : Int = 0
calculate the frames until first row is filled to right screen edge (CGRect(currentXOffset, yOffsetRow0, cellWidth, cellHeight), increase currentXOffset)
reset currentXOffset = xOffset
repeat 1. with yOffsetRow1 for second row
increment currentPage += 1
reset currentXOffset = xOffset + (collectionView.frame.width * currentPage) // for next page
repeat steps 1-5 until layout for all cells is calculated

Answer 3

As you said, you need
1. Paging enabled
2. Scrolling from left to right
3. Multiple sections.
It's a little bit confusing what exactly you want to design. It will be much better if can share proper UI screenshot.
As I understand your problem.
let layout = UICollectionViewFlowLayout()
layout.scrollDirection = .horizontal
let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
Check have you assign the horizontal layout to your collectionView.