In this tutorial, you’ll learn how to build beautiful, modern UICollectionView layouts using iOS 13’s new declarative UICollectionViewCompositionalLayout API.
Hi @tomelliott, thank you very much for your tutorial. I’m updating my app and I need to create some custom layout to my collection view and UICollectionViewCompositionalLayout APIs let me to create great layouts.
bu I 've a question:
I need to create a particular layout and I don’t know If I can with CompositionalLayout.
Let’s me explain:
I would like create a spreadsheet layout. with one nested group to top and below some groups with 2 o 3 Items. but I want that the nested group to be only at the top of the section. Like an header of the spreadsheet
is it possible?
Thank you
Hi @rufy glad you liked it :]
Any chance you could send me a picture of what you’re trying to achieve please? You could host it on https://pasteboard.co/ or similar. Thanks!
here is the picture.
If you need other explanation, ask me
Thanks @rufy.
Thinking about this quickly - if it’s for a header view you should probably use the Collection Views header view functionality and just use a custom view class for the header.
See https://www.raywenderlich.com/9477-uicollectionview-tutorial-reusable-views-selection-and-reordering for an example of how to do that.
So, your suggestion is:
for header of spreadsheet is create a custom reausableHeaderView and
for simple cell use CompositionalLayout?
It might work!
I’ll try it
Thank you for your answer @tomelliott
Any reason you add all of the FeaturedAlbumItemCell views the contentContainerView and you also add the featurePhotoView to the contentView of the cell and the contentContainerView?
If you remove the line of code where you add the featurePhotoView to the contentView of the cell, they don’t seem to size appropriately and the labels are hidden.
hi @tomelliott,
how are you?
I’ve a problem with the the estimateValue.
In the video Configuring the Layout Object of “Beginning of collection view” By Pasan Premaratne
Pasan at minute 4:40 explains the three type of size and he says:“it is useful when dealing with item that display content. By providing and estimated size, you allow the collection view to initially draw the Item which can then be adjusted to the size of the content it contains”. But if you see the image, base 2 has the same height of other cell and the text is truncated.
this is the code that I use for these spreadsheet
let leftItem = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1/3), heightDimension: .fractionalHeight(1.0)))
let rightItem = NSCollectionLayoutItem(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(2/3), heightDimension: .fractionalHeight(1.0)))
let groupDoubleItem = NSCollectionLayoutGroup.horizontal(layoutSize: NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0), heightDimension: .estimated(160)), subitems: [leftItem, rightItem])
section = NSCollectionLayoutSection(group: groupDoubleItem)
if I set an higher estimate value all the cells become higher. but I would like that the cell fits its content.
how can I fix this problem?
There appears to be a leak. If you scroll a group off screen and repeat the action over and over again, memory will leak. I’ve tried using the simpler version of this setup and it seems to cause cell reuse to stop working.
Calling this causes layouts to seemingly dump cells and never reuse them. It’s kind of a bummer:
collectionView.collectionViewLayout = (isTall) ? layout1 : layout2
Any ideas on how to fix the leak?
Hi
I tried using this Compositional Layout. So I am creating an app in which there is a view in which there are 3 sections.
Section 1 - Horizonatal Scrollable list (just like featured Cell)
Section 2 - normal list (just like tableView )
Section 3 - (whose header I want to stick to top ) Vertical List with pagination
I have implemented this behaviour, but the thing is when i enable orthogonalScrollingBehavior in section 1 for horizontal scrolling , my header of section 3 does not stick to top. And when i remove orthogonalScrollingBehavior from section 1, it works fine.
The View in purple color is my header which i want to stick to top.
Is there anything which I must be missing which is causing this issue
Hey @tomelliott,
thx a lot for the great tutorial. I have run into a problem however. When trying to get dynamic type to work with the example I hit a dead-end. I expected e.g. to be able to change the absolute height of the group dimension in the generateSharedlbumsLayout method to .estimated(186) (so that the horizontal scroll view could adapt in height to larger fonts). However, instead of the horizontal scroll view adapting in height, only the texts grow and the image gets smaller. Is there a trick to get the .estimated stuff working so that the horizontal scroll views just adopt to the content they contain?
Cheers
Great one.
Well, I have one question here:
In SharedAlbumItemCell.swift, you did contentView.addSubview(featuredPhotoView) while featuredPhotoView is also the subview of contentContainer. Why is that?
Also, if I comment it, the layout will be totally changed, and two bottom UILabel will not be displayed . Can you please explain ?
Thanks for this! I think I have a good handle on the compositional layouts now. However, and I know this is tangential, but I can’t for the life of me figure out what defines whether an album is Featured or Shared, or just a regular ol’ “My Album”. What part of the code defines that Cairngorms is Featured but not Shared, for example?
OK. I figured that out.
New problem… what if I wanted a section of the same CollectionView that showed images rather than albums? So most sections show albums, but now I want one new section that shows all the images from all the albums in a row instead…
Can that be done?