Beszélj az iOS-ben található Composition Layout-ról…

Összetett Elrendezés — ez egy rugalmas mechanizmus a kollekciók (UICollectionView) elrendezéseinek létrehozására, amelyet az iOS 13 mutatott be. Lehetővé teszi az szekciók és elemek szerkezetének deklaratív leírását, megkönnyítve a komplex és alkalmazkodó felhasználói felületek létrehozását.

Fő előnyei:

Blokk alapú építés: Az elrendezés kisebb részekből (items, groups, sections) áll össze.
Rugalmasság: Különböző típusú elrendezéseket támogat (listák, rácsok, függőleges/ vízszintes görgetésű csoportok) egy kollekcióban.
Alkalmazkodóképesség: Könnyen alkalmazkodik a képernyő méretének és az eszköz orientációjának változásaihoz.
Deklaratív: Az elrendezés leírása áttekinthetőbb és kifejezőbb, mint a hagyományos UICollectionViewFlowLayout.
Teljesítmény: Optimalizált nagy számú elem kezelésére.

Fő komponensek:

NSCollectionLayoutItem: Leírja az elemet a kollekcióban. Meghatározza méretét a hozzá tartozó csoporthoz viszonyítva.
NSCollectionLayoutGroup: Leírja a csoportot. Lehet függőleges, vízszintes vagy egyéni. Meghatározza a csoport méretét a hozzá tartozó szekcióhoz viszonyítva.
NSCollectionLayoutSection: Leírja a szekciót a kollekcióban. Tartalmaz csoportokat és kezeli azok elrendezését. Meghatározza a szekció viselkedését (pl. görgetés).
NSCollectionLayoutBoundarySupplementaryItem: Kiegészítő elemek hozzáadására szolgál a szekcióhoz (fejléc, lábléc).
UICollectionViewCompositionalLayout: Az elrendezés osztálya, amely összerakja a szekciókat végső elrendezéssé.

Egyszerű szekció horizontális görgetéssel példakód:

import UIKit

func createLayout() -> UICollectionViewLayout {
    // Elem
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                         heightDimension: .fractionalHeight(1.0))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    // Csoport
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.9),
                                          heightDimension: .absolute(200))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,
                                                    subitems: [item])
    group.interItemSpacing = .fixed(10) // Számított távolság az elemek között a csoportban

    // Szekció
    let section = NSCollectionLayoutSection(group: group)
    section.orthogonalScrollingBehavior = .continuous // Vízszintes görgetés a szekcióban
    section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10) // Szekció margói
    section.interGroupSpacing = 10 // Távolság a csoportok között a szekcióban

    // Elrendezés
    let layout = UICollectionViewCompositionalLayout(section: section)
    return layout
}

Komplexebb felületekhez különböző csoport- és szekciótípusokat lehet kombinálni, dekoratív elemeket hozzáadni, és kiegészítő elemeket használni.

A Kompozíciós Elrendezés szorosan kapcsolódik a Diffable Data Sources (UICollectionViewDiffableDataSource) technológiához, amely megkönnyíti az adatok kezelését és az animációkat. Ezek együttes alkalmazásával modern, hatékony és könnyen karbantartható felhasználói felületek hozhatók létre.

Beszélj az iOS-ben található Composition Layout-ról és annak használatáról összetett felhasználói felületek létrehozásához.