Что такое выравнивание?

Выравнивание в iOS-разработке относится к механизмам расположения элементов пользовательского интерфейса (UIViews) относительно друг друга или их контейнера (супервью). Основные подходы к выравниванию:

1. Фреймы (Frames): Задание позиции и размера (x, y, width, height) каждого View в координатной системе его супервью. Подходит для простых, фиксированных макетов.

   let myView = UIView(frame: CGRect(x: 10, y: 20, width: 100, height: 50))
   // myView будет расположен в точке (10, 20) относительно верхнего левого угла супервью.
   

2. Auto Layout: Декларативная система расположения элементов на основе набора правил (констрейнтов), определяющих отношения между Views. Гибкий подход для адаптивных макетов, которые подстраиваются под разные размеры экранов и ориентации.

   • Констрейнты: Правила, задающие ограничения на свойства View (например, leading, trailing, top, bottom, centerY, centerX, width, height).
   • Приоритет констрейнта: Числовое значение, указывающее важность констрейнта при разрешении конфликтов (1-1000).

   Пример констрейнтов с использованием NSLayoutConstraint:

   let myView = UIView()
   myView.translatesAutoresizingMaskIntoConstraints = false // Отключаем Auto Resizing Mask
   superview.addSubview(myView)
   
   NSLayoutConstraint.activate([
       myView.leadingAnchor.constraint(equalTo: superview.leadingAnchor, constant: 20),
       myView.trailingAnchor.constraint(equalTo: superview.trailingAnchor, constant: -20),
       myView.topAnchor.constraint(equalTo: superview.topAnchor, constant: 80),
       myView.heightAnchor.constraint(equalToConstant: 100)
   ])
   

   Пример констрейнтов с использованием Layout Anchors:

   let myView = UIView()
   myView.translatesAutoresizingMaskIntoConstraints = false
   superview.addSubview(myView)
   
   NSLayoutConstraint.activate([
       myView.centerXAnchor.constraint(equalTo: superview.centerXAnchor),
       myView.centerYAnchor.constraint(equalTo: superview.centerYAnchor),
       myView.widthAnchor.constraint(equalToConstant: 200),
       myView.heightAnchor.constraint(equalToConstant: 150)
   ])
   

   Пример констрейнтов с использованием VFL (Visual Format Language):

   let myView = UIView()
   myView.translatesAutoresizingMaskIntoConstraints = false
   superview.addSubview(myView)
   
   let views: [String: UIView] = ["myView": myView]
   let metrics: [String: CGFloat] = ["margin": 20]
   
   NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "H:|-margin-[myView]-margin-|",
                                                              options: [],
                                                              metrics: metrics,
                                                              views: views))
   NSLayoutConstraint.activate(NSLayoutConstraint.constraints(withVisualFormat: "V:|-80-[myView(100)]",
                                                              options: [],
                                                              metrics: nil,
                                                              views: views))
   

3. Autoresizing Mask: Простая система выравнивания, предшествовавшая Auto Layout. Позволяет задавать, как View должен растягиваться и сжиматься при изменении размера его супервью. Менее гибкая, чем Auto Layout, и часто отключается при использовании Auto Layout (translatesAutoresizingMaskIntoConstraints = false).

4. Stack Views (UIStackView в UIKit, VStack/HStack/ZStack в SwiftUI): Контейнеры, автоматически управляющие расположением и размером своих дочерних View (arrangedSubviews) на основе заданных свойств (axis, alignment, distribution, spacing). Упрощают создание линейных и многослойных макетов с автоматическим выравниванием.

   let stackView = UIStackView()
   stackView.axis = .vertical // Ось расположения: вертикальная
   stackView.alignment = .center // Выравнивание вдоль поперечной оси: по центру
   stackView.distribution = .equalSpacing // Распределение пространства
   stackView.spacing = 10 // Расстояние между элементами
   
   let label = UILabel()
   label.text = "Hello"
   let button = UIButton(type: .system)
   button.setTitle("Tap Me", for: .normal)
   
   stackView.addArrangedSubview(label)
   stackView.addArrangedSubview(button)
   
   superview.addSubview(stackView)
   // Добавляем констрейнты для самого stackView, чтобы расположить его в супервью
   

Выбор метода выравнивания зависит от сложности макета и требований к адаптивности. В большинстве современных приложений предпочтительным является Auto Layout, часто в сочетании со Stack Views.