Group Group Group Group Group Group Group Group Group

Modern Collection Views with Compositional Layouts | raywenderlich.com

In this tutorial, you’ll learn how to build beautiful, modern UICollectionView layouts using iOS 13’s new declarative UICollectionViewCompositionalLayout API.


This is a companion discussion topic for the original entry at https://www.raywenderlich.com/5436806-modern-collection-views-with-compositional-layouts

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.

:thinking:

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

ehi @tomelliott

It’s work!

Great!

Thank you for your Idea

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

ezgif.com-video-to-gif

@tomelliott Can you please help with this when you get a chance? Thank you - much appreciated! :]