NSLayoutConstraint, язык визуального формата и др.

Чтобы создать адаптивный пользовательский интерфейс, который должным образом реагирует на изменения размера экрана и ориентации устройства, мы используем Auto Layout, систему макета на основе ограничений. В этой статье дается обзор пяти различных подходов к программному добавлению ограничений.

Почему автоматический макет?

Без использования Auto Layout положение вложенного представления, добавляемого в представление, фиксируется. Если мы добавим подвид с красным фоном в центр iPhone 11, центр X будет жестко закодирован в точке 207, а центр Y жестко закодирован в точке 448, поскольку экран iPhone 11 состоит из 414 точек ( или 828 пикселей) по горизонтали и 896 точек (или 1792 пикселей) по вертикали.

Запустив его с помощью симуляторов iPhone SE, 8, 12 и iPad pro, вы получите результаты, в которых субпредставление смещено по центру:

При повороте на iPhone 11 подпредставление будет выходить за пределы экрана:

1. Автоматическая компоновка с использованием NSLayoutConstraint

NSLayoutConstraint определяет отношения между двумя объектами пользовательского интерфейса с помощью линейного уравнения в следующем формате:

item1.attribute1 = multiplier × item2.attribute2 + constant
  • attribute1 и attribute2 - это переменные, которые Auto Layout может регулировать при решении этих ограничений. Например, left, right, top, bottom, leading, trailing, width, height, centerX, centerY и lastBaseLine и т. Д.
  • multiplier и constant определяют относительное положение двух атрибутов.

Для примера subview мы используем следующий код для добавления Auto Layout:

  • translatesAutoresizingMaskIntoConstraints имеет значение false, чтобы игнорировать поведение, заданное маской автоматического изменения размера представления. Он также игнорирует изменение размера и местоположения представления с помощью свойств frame, bounds и center.
  • Код создает ограничения ширины, высоты, centerX и centerY, задав относительное положение атрибутов.

2. Автоматическая компоновка с использованием языка визуального формата

Большинство ограничений, которые полезны в реальных пользовательских интерфейсах, могут быть выражены с помощью языка визуального формата Auto Layout. Грамматику Visual Format String можно найти в Руководстве по автоматической компоновке.

  • views определяет пару "ключ-значение" каждого представления в иерархии.
  • Мы используем metrics для динамического вычисления width подпредставления.
  • H определяет горизонтальные ограничения, а V определяет вертикальные.

3. Автоматическая компоновка с помощью AutoresizingMask

AutoresizingMask определяет, как изменится размер получателя при изменении границ супервизора. Когда границы представления изменяются, это представление автоматически изменяет размер своих подпредставлений в соответствии с маской автоматического изменения размера каждого подпредставления. Вы указываете значение этой маски, комбинируя константы, описанные в UIView.AutoresizingMask, с помощью оператора C поразрядного ИЛИ. Комбинирование этих констант позволяет указать, какие размеры представления должны увеличиваться или уменьшаться относительно суперпредставления. Согласно документации разработчика Apple.

  • Чтобы использовать AutoresizingMask, важно установить translatesAutoresizingMaskIntoConstraints на true.
  • Мы указываем subView границы и центрируем их на superView.
  • Мы даем ему гибкие поля сверху, слева, справа и снизу, чтобы сохранить subView одинакового размера и по центру.

4. Автоматическая компоновка с использованием NSLayoutAnchor

NSLayoutAnchor создает ограничение, начиная с объекта представления и выбирая одно из свойств привязки этого объекта. Эти свойства соответствуют основным значениям NSLayoutConstraint.Attribute, используемым в Auto Layout, и обеспечивают соответствующий подкласс NSLayoutAnchor для создания ограничений для этого атрибута. Согласно документации разработчика Apple.

5. Автоматическая компоновка с использованием intrinsicContentSize

intrinsicContentSize - свойство UIView только для получения.

Это позволяет настраиваемому представлению сообщать системе макета, какой размер он хотел бы иметь на основе его содержимого. Этот внутренний размер не должен зависеть от фрейма контента, потому что нет возможности динамически передавать измененную ширину в систему макета на основе, например, измененной высоты. Единственный способ использовать intrinsicContentSize - создать подкласс UIView. Согласно документации разработчика Apple.

Заключение

В статье описаны пять различных подходов к достижению автоматического макета в Swift. Вышеупомянутый код можно найти в этом репозитории GitHub.

Спасибо за прочтение. Я хотел бы услышать ваши мысли и ответить на любые ваши вопросы!