[CollectionView] Support for different rowHeights per row template

[wouter-willems]

Based on the example in the documentation, it seems like it is not possible to have different heights per rows. For example:

https://github.com/nstudio/nativescript-ui-kit/blob/feat/ui-collectionview/packages/ui-collectionview/README.md#templates-example-1

<CollectionView row="1" [items]="items" colWidth="33%" rowHeight="100" [itemTemplateSelector]="templateSelector">
    <ng-template cvTemplateKey="Defender" let-item="item" let-odd="odd">
        <StackLayout [nsRouterLink]="['/item', item.id]" borderColor="blue" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
        <Label verticalAlignment="center" [text]="item.name" class="list-group-item-text" textWrap="true"></Label>
        </StackLayout>
    </ng-template>

    <ng-template cvTemplateKey="Goalkeeper" let-item="item" let-odd="odd">
        <StackLayout [nsRouterLink]="['/item', item.id]" borderColor="black" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
        <Label verticalAlignment="center" [text]="item.name" class="list-group-item-text" textWrap="true"></Label>
        </StackLayout>
    </ng-template>

    <ng-template cvTemplateKey="Midfielder" let-item="item" let-odd="odd">
        <StackLayout [nsRouterLink]="['/item', item.id]" borderColor="yellow" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
        <Label verticalAlignment="center" [text]="item.name" class="list-group-item-text" textWrap="true"></Label>
        </StackLayout>
    </ng-template>

    <ng-template cvTemplateKey="Forward" let-item="item" let-odd="odd">
        <StackLayout [nsRouterLink]="['/item', item.id]" borderColor="red" borderWidth="2" borderRadius="5" verticalAlignment="stretch" class="list-group-item" [class.odd]="odd">
        <Label verticalAlignment="center" [text]="item.name" class="list-group-item-text" textWrap="true"></Label>
        </StackLayout>
    </ng-template>
</CollectionView>

I would love to have support to either have 1 of 2 things (or both if possible):

• set different row height per template
• leave out rowHeight and let it work dynamically

Now currently, I can leave out the rowHeight, and it does render each row correctly. However, it makes the collectionView extremely slow on load. After investigation, I noticed it accessed the properties of all the items, also outside what was rendered. If I had to guess, It tries to calculate all the heights, and then decide how many rows it needs to instantiate (which it will then recycle when scrolling). But, if only 10 items fit, it should stop calculating after that. What it does now is keep going for all items you provide, in my case, about 100 items. This problem blows up further if I scroll all the way down and load more items, increasing the collection to 200. As soon as I start adding the rowHeight, the whole problem goes away.

[NathanWalker]

This may be helpful @wouter-willems - you can configure the layoutStyle to do deep collectionview customizations with it's layout. see this: https://blog.nativescript.org/collectionview-power/#taking-things-further-with-customizations-to-collectionview

this section that creates the custom layout: https://blog.nativescript.org/collectionview-power/#implement-uicollectionviewcompositionallayout-for-swipeable-cells

Quite a lot you can do with layoutStyle setups: https://github.com/NathanWalker/ns-collection-view-extra/blob/main/src/app/config/collectionview-layout.ios.ts