Что такое Compositional Layout в UIKit?

«Что такое Compositional Layout в UIKit?» — вопрос из категории UIKit, который задают на 10% собеседований IOS Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Compositional Layout — это декларативный API для построения сложных, адаптивных и высокопроизводительных макетов UICollectionView, представленный в iOS 13. Вместо единого объекта UICollectionViewLayout он использует композицию из независимых компонентов.

Ключевые компоненты:

  1. NSCollectionLayoutSize — определяет размеры элемента с использованием размерных правил (.absolute, .estimated, .fractionalWidth/Height).
  2. NSCollectionLayoutItem — представляет отображаемый элемент (ячейку). Создается на основе NSCollectionLayoutSize.
  3. NSCollectionLayoutGroup — контейнер, который организует элементы (NSCollectionLayoutItem) по горизонтали, вертикали или пользовательскому правилу. Группы могут быть вложенными.
  4. NSCollectionLayoutSection — создается на основе группы и определяет поведение секции (интервалы, заголовки, фоны, ортоганальную прокрутку).
  5. UICollectionViewCompositionalLayout — финальный объект макета, инициализируемый одной или несколькими секциями.

Пример создания простого макета с двумя ячейками в строке:

// 1. Размер ячейки: 50% ширины группы, 100% высоты.
let itemSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(0.5),
    heightDimension: .fractionalHeight(1.0)
)
let item = NSCollectionLayoutItem(layoutSize: itemSize)
item.contentInsets = .init(top: 8, leading: 8, bottom: 8, trailing: 8)

// 2. Группа: занимает всю ширину, фиксированная высота 100pt.
let groupSize = NSCollectionLayoutSize(
    widthDimension: .fractionalWidth(1.0),
    heightDimension: .absolute(100)
)
let group = NSCollectionLayoutGroup.horizontal(
    layoutSize: groupSize,
    subitems: [item, item] // Две ячейки в группе
)

// 3. Секция на основе группы.
let section = NSCollectionLayoutSection(group: group)
section.interGroupSpacing = 16

// 4. Финальный макет.
let layout = UICollectionViewCompositionalLayout(section: section)
collectionView.collectionViewLayout = layout

Преимущества перед UICollectionViewFlowLayout:

  • Гибкость — легкое создание сложных, вложенных и адаптивных интерфейсов.
  • Интеграция с Diffable Data Source — идеально работает для анимированных обновлений данных.
  • Производительность — макет вычисляется эффективно.
  • Декларативность — код макета более читаем и модулен.