This is a companion discussion topic for the original entry at https://www.raywenderlich.com/5429927-beginning-collection-views/lessons/24
This is a companion discussion topic for the original entry at https://www.raywenderlich.com/5429927-beginning-collection-views/lessons/24
Hi Prasan
I have a question regarding the layout of item, group and section in UICollectionViewCompositionalLayout.
So as I understand the item lies in a group and group lies in a section. Thus item is the smallest component and section is the largest container. So when we give size of fractionalWidth(1.0) and fractionalHeight(1.0) to the item that means the item takes the full size of its parent the group. Same is the case with group, when we provide NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.8), heightDimension: .fractionalHeight(0.3)) as the size of the group then the group takes 80% width of its parent section size and 30% height of the section height. So what I don’t understand here is where is the rest 70% height of the section utilized. After looking at the final layout it looks like there are 3 sections and each group in a section is taking the full width and height if the section thus comfortably fitting in a screen. Please suggest in which part is my understanding wrong here.
Thanks.
You’re correct in that the components size themselves according to the parent, but you have to keep in mind that the outer most component, the section, has no size itself. It also dynamically sizes itself according to the parameters set by its inner components. There’s no predetermined amount of space provided because even though the collection view as a whole has constraints set on it, inside the collection view we can scroll in either direction infinitely.
You can see this in effect by setting the group’s dimensions to have a .fractionalWidth of 1 and fractionalHeight of 1. The library items at this setting take up the full width and height of the screen each. This means that by increasing the group’s dimensions you have also increased the section’s height.
It’s a bit confusing to be honest, but it’s not as simple as here’s a fixed space provided by the section and the groups > items lay itself out inside it.