Sobes.tech
Middle+

Реци о Composition Layout у iOS-у и његовој употреби за креирање сложених корисничких интерфејса.

sobes.tech АИ

Одговор од АИ

Kompozicioni raspored — to je fleksibilan mehanizam za kreiranje rasporeda kolekcija (UICollectionView), predstavljen u iOS 13. Omogućava deklarativno opisivanje strukture sekcija i elemenata, pojednostavljujući kreiranje složenih i prilagodljivih korisničkih interfejsa.

Glavne prednosti:

  • Izgradnja od blokova: Raspored se sastavlja od manjih delova (items, groups, sections).
  • Fleksibilnost: Podržava različite tipove rasporeda (liste, mreže, grupe sa vertikalnim/horizontalnim skrolovanjem) u jednoj kolekciji.
  • Prilagodljivost: Lako se prilagođava promenama veličine ekrana i orijentacije uređaja.
  • Deklarativnost: Opis rasporeda je jasniji i izražajniji u poređenju sa tradicionalnim UICollectionViewFlowLayout.
  • Performanse: Optimizovano za rad sa velikim brojem elemenata.

Ključne komponente:

  • NSCollectionLayoutItem: Opisuje element u kolekciji. Određuje njegovu veličinu u odnosu na grupu kojoj pripada.
  • NSCollectionLayoutGroup: Opisuje grupu elemenata. Može biti vertikalna, horizontalna ili prilagođena. Određuje veličinu grupe u odnosu na sekciju koja je sadrži.
  • NSCollectionLayoutSection: Opisuje sekciju u kolekciji. Sadrži grupe i upravlja njihovim rasporedom. Određuje ponašanje sekcije (npr., skrolovanje).
  • NSCollectionLayoutBoundarySupplementaryItem: Koristi se za dodavanje dodatnih elemenata sekciji (zaglavlja, podnožja).
  • UICollectionViewCompositionalLayout: Klasa rasporeda koja sastavlja sekcije u finalni raspored.

Primer kreiranja jednostavne sekcije sa horizontalnim skrolovanjem:

import UIKit

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

    // Grupa
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.9),
                                          heightDimension: .absolute(200))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,
                                                    subitems: [item])
    group.interItemSpacing = .fixed(10) // Razmak između elemenata u grupi

    // Sekcija
    let section = NSCollectionLayoutSection(group: group)
    section.orthogonalScrollingBehavior = .continuous // Horizontalno skrolovanje sekcije
    section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10) // Margine sekcije
    section.interGroupSpacing = 10 // Razmak između grupa u sekciji

    // Raspored
    let layout = UICollectionViewCompositionalLayout(section: section)
    return layout
}

Za kreiranje složenijih interfejsa, možete kombinovati različite tipove grupa i sekcija, dodavati dekorativne elemente i koristiti dopunske elemente.

Kompozicioni raspored je usko povezan sa Diffable Data Sources (UICollectionViewDiffableDataSource), što olakšava upravljanje podacima kolekcije i animacije promena. Kombinovanjem ove dve tehnologije možete kreirati savremene, efikasne i lako održive korisničke interfejse.