Sobes.tech
Middle+

Pastāstiet par Composition Layout iOS un tā izmantošanu sarežģītu lietotāja saskarnju izveidei.

sobes.tech AI

Atbilde no AI

Kompozicionālais izkārtojums — tas ir elastīgs mehānisms kolekciju (UICollectionView) izkārtojumu veidošanai, kas ieviests iOS 13. Tas ļauj deklaratīvi aprakstīt sekciju un elementu struktūru, vienkāršojot sarežģītu un adaptīvu lietotāja saskarnes izveidi.

Galvenās priekšrocības:

  • Veidošana no blokiem: Izkārtojums tiek veidots no mazākiem sastāvdaļas elementiem (item, groups, sections).
  • Elastība: Atbalsta dažādus izkārtojumu tipus (saraksti, režģi, grupas ar vertikālu/horizontālu ritināšanu) vienā kolekcijā.
  • Adaptīvums: Viegli pielāgojas ekrāna izmēra un ierīces orientācijas izmaiņām.
  • Deklaratīvs: Izkārtojuma apraksts ir saprotamāks un izteiksmīgāks salīdzinājumā ar tradicionālo UICollectionViewFlowLayout.
  • Veiktspēja: Optimizēts darbam ar lielu elementu skaitu.

Galvenās sastāvdaļas:

  • NSCollectionLayoutItem: Apraksta elementu kolekcijā. Nosaka tā izmēru attiecībā pret to saturo grupu.
  • NSCollectionLayoutGroup: Apraksta elementu grupu. Var būt vertikāla, horizontāla vai pielāgota. Nosaka grupas izmēru attiecībā pret tās saturo sekciju.
  • NSCollectionLayoutSection: Apraksta kolekcijas sekciju. Satur grupas un pārvalda to izvietojumu. Nosaka sekcijas uzvedību (piemēram, ritināšanu).
  • NSCollectionLayoutBoundarySupplementaryItem: Izmanto, lai pievienotu papildu elementus sekcijai (virsraksti, kājenes).
  • UICollectionViewCompositionalLayout: Izkārtojuma klase, kas apvieno sekcijas galīgajā izkārtojumā.

Piemērs vienkāršas sekcijas izveidei ar horizontālu ritināšanu:

import UIKit

func createLayout() -> UICollectionViewLayout {
    // Elements
    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) // Starp elementiem grupā

    // Sekcija
    let section = NSCollectionLayoutSection(group: group)
    section.orthogonalScrollingBehavior = .continuous // Horizontāla ritināšana
    section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10) // Sekcijas ieliktņi
    section.interGroupSpacing = 10 // Starp grupām sekcijā

    // Izkārtojums
    let layout = UICollectionViewCompositionalLayout(section: section)
    return layout
}

Lai izveidotu sarežģītākus interfeisus, var kombinēt dažādu tipu grupas un sekcijas, pievienot dekoratīvus elementus un izmantot papildus elementus.

Kompozicionālais izkārtojums cieši saistīts ar Diffable Data Sources (UICollectionViewDiffableDataSource), kas atvieglo datu pārvaldību kolekcijā un animāciju izmaiņām. Šo divu tehnoloģiju apvienojums ļauj izveidot mūsdienīgas, efektīvas un viegli uzturamas lietotāja saskarnes.