iOSтогу Composition Layout жана анын кыйынчылык менен…

Композициондык макет — бул коллекторлордун (UICollectionView) жайгашуусун түзүү үчүн ийкемдүү механизм, ал iOS 13те киргизилген. Ал бөлүмдөрдүн жана элементтердин түзүлүшүн декларативдүү сүрөттөй алат, бул кыйын жана адаптацияланган UI түзүүнү жеңилдетет.

Негизги артыкчылыктары:

Блоктордон куруу: Макет кичинекей бөлүктөрдөн (items, groups, sections) турат.
Ийкемдүүлүк: Ар кандай түрдөгү жайгаштырууларды (тизмелер, торлор, вертикалдык/горизонталдык сүрүлүүчү топтомдор) бир коллекцияда колдойт.
Адаптациялык: Экрандын өлчөмү жана түзмөктүн багыты өзгөргөндө оңой ылайыкташат.
Декларативдүү: Макеттин сүрөттөлүшү түшүнүктүү жана экспрессивдүү, салттуу UICollectionViewFlowLayout менен салыштырганда.
Өндүрүмдүүлүк: Көптөгөн элементтер менен иштөө үчүн оптималдаштырылган.

Негизги компоненттер:

NSCollectionLayoutItem: Коллекциядагы элементти сүрөттөйт. Ал анын өлчөмүн камтыган топко карата аныктайт.
NSCollectionLayoutGroup: Элементтер тобун сүрөттөйт. Ал вертикалдык, горизонталдык же өзгөчө болушу мүмкүн. Ал топтун өлчөмүн камтыган бөлүмгө карата аныктайт.
NSCollectionLayoutSection: Коллекциядагы бөлүмдү сүрөттөйт. Ал топтомдорду камтыйт жана алардын жайгашуусун башкарат. Ал бөлүмдүн жүрүм-турумун аныктайт (мисалы, сүрүлүү).
NSCollectionLayoutBoundarySupplementaryItem: Бөлүмгө кошумча элементтерди кошуу үчүн колдонулат (баштар, аягтар).
UICollectionViewCompositionalLayout: Макет классы, ал бөлүмдөрдү акыркы жайгаштыруу үчүн чогултат.

Жөнөкөй горизонталдык сүрүлүүчү бөлүм түзүү үчүн мисал:

import UIKit

func createLayout() -> UICollectionViewLayout {
    // Элемент
    let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                         heightDimension: .fractionalHeight(1.0))
    let item = NSCollectionLayoutItem(layoutSize: itemSize)

    // Топ
    let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(0.9),
                                          heightDimension: .absolute(200))
    let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize,
                                                    subitems: [item])
    group.interItemSpacing = .fixed(10) // Элементтердин ортосундагы аралык

    // Бөлүм
    let section = NSCollectionLayoutSection(group: group)
    section.orthogonalScrollingBehavior = .continuous // Горизонталдык сүрүлүү
    section.contentInsets = NSDirectionalEdgeInsets(top: 10, leading: 10, bottom: 10, trailing: 10) // Аралыктар
    section.interGroupSpacing = 10 // Группалардын ортосундагы аралык

    // Макет
    let layout = UICollectionViewCompositionalLayout(section: section)
    return layout
}

Кыйынчылык жараткан интерфейстер түзүү үчүн, ар кандай топтомдор жана бөлүмдөр түрлөрүн аралаштырып, декоративдик элементтерди кошуп, кошумча элементтерди колдонсо болот.

Композициондук макет UICollectionViewDiffableDataSource менен тыгыз байланышта, ал коллекциянын маалыматтарын башкарууну жана өзгөрүүлөрдүн анимацияларын жеңилдетет. Бул эки технологияны бириктирүү заманбап, эффективдүү жана оңой тейлөөчү колдонуучу интерфейстерин түзүүгө мүмкүндүк берет.

iOSтогу Composition Layout жана анын кыйынчылык менен колдонулушу жөнүндө сүйлөңүз.