Custom collection flow layout for UICollectionView in Swift

Question

i'm learning iOS with Swift, and now i wanted to create simple messenger app (very very simple version of WhatsApp). I've looked through all collection view video tutorials, but i still cannot understand how to create a layout, where cells will be on two sides of the screen (two cells couldn't be in one row). So as far as i understand, i should go with flow layout. I override layoutAttributesForElementsInRect like this:

override func layoutAttributesForElementsInRect(rect: CGRect) -> [AnyObject]? {
    let attributes = super.layoutAttributesForElementsInRect(rect) as! [UICollectionViewLayoutAttributes]
    for attribute in attributes {
        attribute.frame.origin.x = collectionView!.bounds.width - attribute.frame.width
    }
    return attributes
}

And now my cells lay under each other (for example i have 50 cells, but i could see only 10 with 5 cells in depth).

EDIT: As you can see, 5 cells lay under each other in each row, so totally i got 10 rows, not 50.

And i want to see all 50 cells from right side.

So could somebody give any advice how can i implement this layout. Thanks for any help!

It's hard to understand from your description what you want to see and what you do see. Could you please update your question with screenshots / illustrations to help explain? — Aaron Brager
I don't see where you're changing the cell origins' y values. — NRitH
Is this only way to move cells under each other? Shouldn't collection view automatically place cells under each other with equal spaces? — pavel_s

Wouter Wessels Wouter Wessels · Accepted Answer · 2017-08-29T08:41:54

Perhaps a bit late, but hopefully useful.

1) If you want to display one column of cells, why not go with a UITableView?

2) Make two cells, one 'me' cell and one 'other person' cell. They look different: Different colors perhaps but the one cell has the Labels aligned to the Left, the other to the right. When using a UICollectionView, the cells should be wider than Half the screen, so that they are automagically placed in one column. No need to override layoutAttributesForElementsInRect in a custom FlowLayout subclass.

Custom collection flow layout for UICollectionView in Swift

1 Answers