Ограничения программного макета в Xamarin.iOS

Статья
03/05/2024

В этом руководстве представлены ограничения автоматического макета iOS в коде C#, а не создание их в конструкторе iOS.

Автоматический макет (также называемый адаптивным макетом) — это подход к адаптивному проектированию. В отличие от переходной системы макета, где расположение каждого элемента жестко закодировано до точки на экране, автострока относится к отношениям — позиция элементов относительно других элементов в области конструктора. В основе автоматического макета лежит идея ограничений или правил, определяющих размещение элемента или набора элементов в контексте других элементов на экране. Так как элементы не привязаны к определенной позиции на экране, ограничения помогают создать адаптивный макет, который выглядит хорошо на разных размерах экрана и ориентациях устройства.

Как правило, при работе с автоматическим макетом в iOS конструктор интерфейсов Xcode используется для графического размещения ограничений макета в элементах пользовательского интерфейса. Однако в коде C# могут возникнуть случаи, когда необходимо создавать и применять ограничения. Например, при использовании динамически созданных элементов пользовательского интерфейса, добавленных в объект UIView.

В этом руководстве показано, как создавать и работать с ограничениями с помощью кода C#, а не создавать их графически в построителе интерфейсов Xcode.

Создание ограничений программным способом

Как описано выше, обычно вы будете работать с ограничениями автоматического макета в конструкторе iOS. Для тех случаев, когда вам придется создавать ограничения программным способом, вы можете выбрать один из трех вариантов:

Привязки макета. Этот API предоставляет доступ к свойствам привязки (например TopAnchor, BottomAnchor или HeightAnchor) элементов пользовательского интерфейса, которые ограничены.
Ограничения макета — можно создавать ограничения непосредственно с помощью NSLayoutConstraint класса.
Язык визуального форматирования — предоставляет искусство ASCII, например метод для определения ограничений.

В следующих разделах подробно рассматриваются все варианты.

Привязки макета

Используя NSLayoutAnchor класс, у вас есть простой интерфейс для создания ограничений на основе свойств привязки элементов пользовательского интерфейса. Например, направляющие верхнего и нижнего макета контроллера представления предоставляют свойства привязкиHeightAnchor, а представление предоставляет TopAnchorBottomAnchor края, центр, размер и базовые свойства.

Внимание

Помимо стандартного набора свойств привязки, представления iOS также включают LayoutMarginsGuides и ReadableContentGuide свойства. Эти свойства предоставляют UILayoutGuide объекты для работы с полями представления и читаемыми руководствами по содержимому соответственно.

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

ConstraintEqualTo — определяет связь, в которой first attribute = second attribute + [constant] при необходимости указано constant значение смещения.
ConstraintGreaterThanOrEqualTo — определяет связь, в которой first attribute >= second attribute + [constant] при необходимости указано constant значение смещения.
ConstraintLessThanOrEqualTo — определяет связь, в которой first attribute <= second attribute + [constant] при необходимости указано constant значение смещения.

Например:

// Get the parent view's layout
var margins = View.LayoutMarginsGuide;

// Pin the leading edge of the view to the margin
OrangeView.LeadingAnchor.ConstraintEqualTo (margins.LeadingAnchor).Active = true;

// Pin the trailing edge of the view to the margin
OrangeView.TrailingAnchor.ConstraintEqualTo (margins.TrailingAnchor).Active = true;

// Give the view a 1:2 aspect ratio
OrangeView.HeightAnchor.ConstraintEqualTo (OrangeView.WidthAnchor, 2.0f);

Обычное ограничение макета можно выразить просто как линейное выражение. Возьмем следующий пример:

Который будет преобразован в следующую строку кода C# с помощью привязок макета:

PurpleView.LeadingAnchor.ConstraintEqualTo (OrangeView.TrailingAnchor, 10).Active = true;

Где части кода C# соответствуют заданным частям уравнения следующим образом:

Уравнение	Код
Пункт 1	Пурпурное представление
Атрибут 1	LeadingAnchor
Отношение	ConstraintEqualTo
Множитель	Значение по умолчанию — 1.0, поэтому не указано
Пункт 2	OrangeView
Атрибут 2	TrailingAnchor
Константа	10.0

Помимо предоставления только параметров, необходимых для решения заданного уравнения ограничения макета, каждый из методов привязки макета обеспечивает безопасность типов параметров, переданных им. Таким образом, привязки горизонтального ограничения, такие как LeadingAnchor или TrailingAnchor могут использоваться только с другими горизонтальными типами привязки и умножениями, предоставляются только для ограничений размера.

Ограничения макета

Ограничения автоматического NSLayoutConstraint макета можно добавить вручную, непосредственно создав код C#. В отличие от использования привязок макета, необходимо указать значение для каждого параметра, даже если оно не будет влиять на определенное ограничение. В результате вы в конечном итоге будете производить значительное количество трудно прочитать, стандартный код. Например:

//// Pin the leading edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, View, NSLayoutAttribute.LeadingMargin, 1.0f, 0.0f).Active = true;

//// Pin the trailing edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, View, NSLayoutAttribute.TrailingMargin, 1.0f, 0.0f).Active = true;

//// Give the view a 1:2 aspect ratio
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Height, NSLayoutRelation.Equal, OrangeView, NSLayoutAttribute.Width, 2.0f, 0.0f).Active = true;

NSLayoutAttribute Где перечисление определяет значение полей представления и соответствует LayoutMarginsGuide таким свойствам, как Left, RightTop и NSLayoutRelationBottom перечисление определяет связь, которая будет создана между заданными атрибутами как Equal, LessThanOrEqual или GreaterThanOrEqual.

В отличие от API привязки макета, NSLayoutConstraint методы создания не выделяют важные аспекты определенного ограничения и нет проверка времени компиляции, выполняемых с ограничением. В результате легко создать недопустимое ограничение, которое вызовет исключение во время выполнения.

Язык визуального формата

Язык визуального формата позволяет определять ограничения с помощью искусства ASCII, таких как строки, которые предоставляют визуальное представление создаваемого ограничения. Это имеет следующие преимущества и недостатки:

Язык визуального формата применяет только создание допустимых ограничений.
Ограничения автоматического макета выводятся в консоль с помощью языка визуального форматирования, поэтому сообщения отладки будут похожи на код, используемый для создания ограничения.
Язык визуального формата позволяет одновременно создавать несколько ограничений с очень компактным выражением.
Так как в среде выполнения нет проверки на стороне компиляции строк языка визуального формата, проблемы могут быть обнаружены только во время выполнения.
Так как язык визуального формата подчеркивает визуализацию над полнотой некоторых типов ограничений нельзя создать с ним (например, коэффициенты).

При использовании языка визуального форматирования для создания ограничения выполните следующие действия.

NSDictionary Создайте объект представления и направляющие макетов и строковый ключ, который будет использоваться при определении форматов.
При необходимости создайте NSDictionary набор ключей и значений (NSNumber), используемых в качестве значения константы для ограничения.
Создайте строку форматирования для разметки одного столбца или строки элементов.
FromVisualFormat Вызовите метод NSLayoutConstraint класса для создания ограничений.
ActivateConstraints Вызовите метод класса для активации NSLayoutConstraint и применения ограничений.

Например, чтобы создать как начальный, так и конечный ограничения в языке визуального формата, можно использовать следующее:

// Get views being constrained
var views = new NSMutableDictionary (); 
views.Add (new NSString ("orangeView"), OrangeView);

// Define format and assemble constraints
var format = "|-[orangeView]-|";
var constraints = NSLayoutConstraint.FromVisualFormat (format, NSLayoutFormatOptions.AlignAllTop, null, views);

// Apply constraints
NSLayoutConstraint.ActivateConstraints (constraints);

Так как язык визуального формата всегда создает ограничения нулевой точки, присоединенные к полям родительского представления при использовании интервала по умолчанию, этот код создает идентичные результаты, представленные выше.

Для более сложных макетов пользовательского интерфейса, таких как несколько дочерних представлений в одной строке, язык визуального формата задает как горизонтальные интервалы, так и вертикальное выравнивание. Как и в приведенном выше примере, где он указывает AlignAllTopNSLayoutFormatOptions выравнивание всех представлений в строке или столбце в их верхней части.

Примеры указания общих ограничений и грамматики строки визуального формата См. в приложении языка визуального формата Apple.

Итоги

В этом руководстве представлено создание и работа с ограничениями автоматического макета в C# в отличие от их графического создания в конструкторе iOS. Во-первых, он рассмотрел использование привязок макета (NSLayoutAnchor) для обработки автоматического макета. Далее он показал, как работать с ограничениями макета (NSLayoutConstraint). Наконец, он представлен с помощью языка визуального формата для автоматического макета.