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.
Спасибо за прочтение. Я хотел бы услышать ваши мысли и ответить на любые ваши вопросы!