Sobes.tech
Middle+

Pověz o Composition Layout v iOS a jeho použití pro tvorbu složitých uživatelských rozhraní.

sobes.tech AI

Odpověď od AI

Kompozitní rozvržení — je flexibilní mechanismus pro tvorbu rozložení kolekcí (UICollectionView), představený v iOS 13. Umožňuje deklarativně popisovat strukturu sekcí a prvků, což zjednodušuje tvorbu složitých a adaptivních uživatelských rozhraní.

Hlavní výhody:

  • Stavba z bloků: Rozvržení je sestavováno z menších částí (items, groups, sections).
  • Flexibilita: Podporuje různé typy rozložení (seznamy, mřížky, skupiny s vertikálním/horizontálním posuvem) v jedné kolekci.
  • Adaptabilita: Snadno se přizpůsobí změnám velikosti obrazovky a orientace zařízení.
  • Deklarativnost: Popis rozložení je srozumitelnější a výstižnější ve srovnání s tradičním UICollectionViewFlowLayout.
  • Výkon: Optimalizováno pro práci s velkým množstvím prvků.

Klíčové komponenty:

  • NSCollectionLayoutItem: Popisuje prvek v kolekci. Určuje jeho velikost vzhledem ke skupině, kterou obsahuje.
  • NSCollectionLayoutGroup: Popisuje skupinu prvků. Může být vertikální, horizontální nebo vlastní. Určuje velikost skupiny vzhledem k sekci, kterou obsahuje.
  • NSCollectionLayoutSection: Popisuje sekci v kolekci. Obsahuje skupiny a řídí jejich uspořádání. Určuje chování sekce (například posuv).
  • NSCollectionLayoutBoundarySupplementaryItem: Používá se k přidání doplňkových prvků k sekci (záhlaví, zápatí).
  • UICollectionViewCompositionalLayout: Třída rozvržení, která skládá sekce do finálního rozložení.

Příklad vytvoření jednoduché sekce s horizontálním posuvem:

import UIKit

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

    // Skupina
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.9),
                                          heightDimension: .absolute(200))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,
                                                    subitems: [item])
    group.interItemSpacing = .fixed(10) // Mezery mezi prvky ve skupině

    // Sekce
    let section = NSCollectionLayoutSection(group: group)
    section.orthogonalScrollingBehavior = .continuous // Horizontální posuv sekce
    section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10) // Okraje sekce
    section.interGroupSpacing = 10 // Mezery mezi skupinami v sekci

    // Rozvržení
    let layout = UICollectionViewCompositionalLayout(section: section)
    return layout
}

Pro tvorbu složitějších rozhraní lze kombinovat různé typy skupin a sekcí, přidávat dekorativní prvky a používat doplňkové prvky.

Kompozitní rozvržení je úzce spojeno s Diffable Data Sources (UICollectionViewDiffableDataSource), což usnadňuje správu dat kolekce a animaci změn. Kombinace těchto dvou technologií umožňuje vytvářet moderní, efektivní a snadno udržovatelné uživatelské rozhraní.