How to make UICollectionView new cells load from bottom in Swift

Question

I have a collectionview to display a list of comments, but I want the cells to start displaying from bottom, a pattern seen in the WhatsApp and Telegram App for iOS (new messages starts from the bottom and populate upwards), like in the image below.

I was searching online but couldn't find something that worked. I tried this code below from one answer I saw on SO but it didn't work as well.

let contentSize = collectionView.collectionViewLayout.collectionViewContentSize
    if contentSize.height > collectionView.bounds.size.height {
        collectionView.contentOffset = CGPoint(x: 0, y: contentSize.height - collectionView.bounds.size.height)
    }

How do I achieve this?

You can do buy adding empty cell with calculated height as the first cell. Or for a wild idea, transform table (rotate) 180 degree and transform each cells (180 degree) just before presenting (tableView(_:willDisplay:forRowAt:) ). I actually did this long time ago for some smaller project. :) — RJE, Jan 15 '18 at 12:58

iVarun · Accepted Answer · 2018-01-15T13:03:31.250

7

You need to transform your collection and it's cell. Use below code to rotate your collection view:

yourCollectionView.transform = CGAffineTransform.init(rotationAngle: (-(CGFloat)(Double.pi)))

For cell use below code:

cell.transform = CGAffineTransform(rotationAngle: CGFloat.pi)

edited Jan 15 '18 at 13:03

answered Jan 15 '18 at 12:57

iVarun

6,496
2
26
34

1

you probably have to transform each cell also before presenting (for table you have to - not sure about collection view) – RJE Jan 15 '18 at 13:00
@RJE yes you are right also need to transform cell. Updated my answer – iVarun Jan 15 '18 at 13:04
it kind of works. but now new cells are added to the top instead of to the bottom of the earlier ones... how do I fix that? – Oluwatobi Omotayo Jan 15 '18 at 14:44
@OluwatobiOmotayo did you apply transform on collectionView? – iVarun Jan 15 '18 at 14:55
yes I did, could it be because of the negative value? – Oluwatobi Omotayo Jan 15 '18 at 15:01
removing it didn't change anything – Oluwatobi Omotayo Jan 15 '18 at 15:07
make sure you are not reversing your data source array. – iVarun Jan 15 '18 at 15:35
I did not reverse my source array, just that new cells are added at the top of the older cells and pushing them downwards – Oluwatobi Omotayo Jan 15 '18 at 15:47
1

@OluwatobiOmotayo how you are adding new cells ? – Prashant Tukadiya Jan 17 '18 at 07:26
using `cellForRowAtIndexPath` the source is an array of comments – Oluwatobi Omotayo Jan 17 '18 at 07:28
@PrashantTukadiya please check comment. – iVarun Jan 17 '18 at 07:29
@OluwatobiOmotayo You said that **it kind of works. but now new cells are added to the top instead of to the bottom of the earlier ones... how do I fix that?** Please add the code for same – Prashant Tukadiya Jan 17 '18 at 07:32
I don't know what code you want me to show, but what happens is that normally new cells should be added to the bottom of older cells (in a collection view) but since it has been inverted via the transform, the first cell added at the bottom has an index 0, and the newer ones are added at the top of it, which would be normal if one inverts the collectionview back to the way it was... – Oluwatobi Omotayo Jan 17 '18 at 07:37
now I've fixed this. I was adding items to the comments array with `comments.append(newElement)` so I changed that to `comments.insert(comment, at: 0)` – Oluwatobi Omotayo Jan 17 '18 at 07:49

score 0 · Answer 2 · answered Sep 13 '20 at 12:13

0

For those who don't want to use graphics workaround to fix what should be a matter of model, just override layoutAttributesForItem function in a custom UICollectionViewFlowLayout

answered Sep 13 '20 at 12:13

Hocine B

391
2
8

How to make UICollectionView new cells load from bottom in Swift

2 Answers2

Linked