Sobes.tech
Middle+

Pasakokite apie Composition Layout iOS ir jo naudojimą sudėtingų vartotojo sąsajų kūrimui.

sobes.tech AI

Atsakymas iš AI

Suvienojamais 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 pielāgojamu lietotāja saskarnes izveidi.

Galvenās priekšrocības:

  • Bloku veidošana: Izkārtojums tiek būvēts no mazākiem elementiem (items, groups, sections).
  • Elastība: Atbalsta dažādus izkārtojumu tipus (saraksti, režģi, grupas ar vertikālo/horizontālo ritināšanu) vienā kolekcijā.
  • Pielāgojamība: 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 nekā tradicionālais 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 grupu, kurā tas atrodas.
  • NSCollectionLayoutGroup: Apraksta elementu grupu. Var būt vertikāla, horizontāla vai pielāgota. Nosaka grupas izmēru attiecībā pret to sekciju, kurā tā atrodas.
  • NSCollectionLayoutSection: Apraksta sekciju kolekcijā. Satur grupas un pārvalda to izvietojumu. Nosaka sekcijas uzvedību (piemēram, ritināšanu).
  • NSCollectionLayoutBoundarySupplementaryItem: Izmanto, lai pievienotu papildu elementus sekcijai (virsraksti, apakšvirsraksti).
  • UICollectionViewCompositionalLayout: Izkārtojuma klase, kas apvieno sekcijas galīgā izkārtojumā.

Piemērs, kā izveidot vienkāršu sekciju ar horizontālo 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) // Attālums starp elementiem grupā

    // Sekcija
    let section = NSCollectionLayoutSection(group: group)
    section.orthogonalScrollingBehavior = .continuous // Horizontālais ritinājums
    section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10) // Iekšējie atstarpes
    section.interGroupSpacing = 10 // Attālums starp grupām

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

Lai izveidotu sarežģītākas saskarnes, var kombinēt dažādu grupu un sekciju tipus, pievienot dekoratīvus elementus un izmantot papildus elementus.

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