Embedded collectionView inside collectionViewCell not pinning to safe area layout

user_13195060 0
Viewed 186

I am trying to recreate instagrams profile screens, but I have run into an issue where I cannot pin an embedded collectionView to the safe area layout.

Here is a video of what the issues is:

https://streamable.com/gitpo0

There are 32 cells inside the embedded collectionView and when scrolling, to the bottom, you cannot see the last 5 (unless forcing the scroll upwards, as per the video).

And here is an example project:

https://github.com/mickey1980/TestProject

I thought it should be a case of pinning the embedded collectionView to the super.view.safeAreaLayoutGuide.bottomAnchor, but that doesn't seem to work.

What I did notice when running debugging the app in the simulator, is that there are extra contraints being added to the collectoinView:

enter image description here

enter image description here

which is larger than the screen.

If I add a constant height to the collectionView inside the cell, it works as expected, but that isn't quite what I want.

I appreciate there is a gap in my knowledge, hopefully someone could point me in the right direction.

I have tried to follow Apples, Modern Collection view design, so this is built with diffable data sources and composition layouts, which is very new to me.

Any help would be appreciated.

Update

Having thought about this, I think that the embedded collectionView isn't taking into consideration the header of the outer collectionView. So the height is calculated correctly albeit going off the screen due to the supplementaryHeader, which the embedded collectionView isn't aware of. I'm still a little unsure how to solve this however?

swift ios
1 Answers

If I've understood your question correctly changing this line from your repo in DemoViewController:

self.collectionView.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor).isActive = true

to

self.collectionView.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true

This should do the trick - You're pinning to the safe area rather than just to the views bottom anchor which should solve your problem.

user_156251730
Related