Автоматический макет в конструкторе Xamarin для iOSAuto Layout with the Xamarin Designer for iOS

Автоматический макет (также называется «адаптивный макет») — это гибкий Дизайн подход.Auto Layout (also called “adaptive layout”) is a responsive design approach. В отличие от системы transitional макета, где каждый элемент расположение — это жестко в точку на экране, автоматический макет посвящен связи -позиции элементов относительно других элементов в рабочей области конструирования.Unlike the transitional layout system, where each element’s location is hard-coded to a point on the screen, Auto Layout is about relationships - the positions of elements relative to other elements on the design surface. В сердце автоматический макет является идея ограничения или правила, определяющие расположение элемента или набора элементов в контексте других элементов на экране.At the heart of Auto Layout is the idea of constraints or rules that define the placement of an element or set of elements in the context of other elements on the screen. Так как элементы не привязаны к конкретной должности на экране, ограничения помогают создать адаптивный макет, который хорошо выглядит на экранах различных размеров и ориентации устройства.Because the elements are not tied to a particular position on the screen, constraints help create an adaptive layout that looks good on different screen sizes and device orientations.

В этом руководстве мы представляем, ограничения и способы работы с ними в конструкторе iOS Xamarin.In this guide, we introduce constraints and how to work with them in the Xamarin iOS Designer. В этом руководстве не рассматривается работа с ограничениями программным способом.This guide does not cover working with constraints programmatically. Сведения об использовании автоматический макет программными средствами см. документации Apple.For information on using Auto Layout programmatically, refer to the Apple documentation.

ТребованияRequirements

Конструктор Xamarin для iOS доступен в Visual Studio для Mac в Visual Studio 2017 и более поздней версии на Windows.The Xamarin Designer for iOS is available in Visual Studio for Mac in Visual Studio 2017 and later on Windows.

В этом руководстве предполагается знание компоненты конструктора из введение в конструктор iOS руководства.This guide assumes knowledge of the Designer's components from the Introduction to the iOS Designer guide.

Введение ограниченийIntroduction to Constraints

Ограничение — математическое представление связи между двумя элементами на экране.A constraint is a mathematical representation of the relationship between two elements on the screen. Представляющий пользовательский Интерфейс положение элемента как математическую связь позволяет решить несколько проблем, связанных с жестко запрограммированного расположение элемент пользовательского интерфейса.Representing a UI element’s position as a mathematical relationship solves several problems associated with hard-coding a UI element’s location. Например если поместить 20px кнопку в нижней части экрана в книжной ориентации, положения кнопки будет на экране в альбомной ориентации.For example, if we were to place a button 20px from the bottom of the screen in portrait mode, the button’s position would be off the screen in landscape mode. Чтобы избежать этого, нам удалось задать ограничение, которое помещает нижнего края 20px кнопку в нижней части представления.To avoid this, we could set a constraint that places the bottom edge of the button 20px from the bottom of the view. Позиция для края кнопки затем будет вычисляться как button.bottom = view.bottom - 20px, который следует поместить 20px кнопку в нижней части представления в режиме книжной и альбомной ориентации.The position for the button edge would then be calculated as button.bottom = view.bottom - 20px, which would place the button 20px from the bottom of the view in both portrait and landscape mode. Возможность размещения, основанной на отношении математические вычисления это и делает ограничения настолько полезен при разработке пользовательского интерфейса.The ability to calculate placement based on a mathematical relationship is what makes constraints so useful in UI design.

Если установить значение ограничения, мы создадим NSLayoutConstraint объекта, который принимает в качестве аргументов, объекты для ограничения и свойства, или атрибуты, будет действовать ограничение.When we set a constraint, we create an NSLayoutConstraint object which takes as arguments the objects to be constrained and the properties, or attributes, that the constraint will act on. В конструкторе iOS атрибуты включают границ, таких как левой, правой, верхней, и нижней элемента.In the iOS designer, attributes include edges such as the left, right, top, and bottom of an element. Они также включают атрибуты размера например высота и шириныи расположение, точки центра centerX и centerY.They also include size attributes such as height and width, and the center point location, centerX and centerY. Например при добавлении ограничения на положение левой границы из двух кнопок, конструктор создает следующий код на самом деле:For example, when we add a constraint on the position of the left boundary of two buttons, the Designer is generating the following code under the covers:

View.AddConstraint (NSLayoutConstraint.Create (Button1, NSLayoutAttribute.Left, NSLayoutRelation.Equal, Button2, NSLayoutAttribute.Left, 1, 10));

Следующий раздел рассматривается работа с ограничениями, с помощью iOS Designer, включая Включение и отключение автоматического макета и используя панель инструментов ограничений.The next section covers working with constraints using the iOS Designer, including enabling and disabling Auto Layout and using the Constraints Toolbar.

Включить автоматический макетEnable Auto Layout

Конфигурация по умолчанию для конструктора iOS был включен режим ограничений.The default iOS Designer configuration has constraint mode enabled. Тем не менее, если для вас для включения или отключения его вручную, это можно сделать в два этапа:However, should you need to enable or disable it manually, you can do so in two steps:

  1. Щелкните пустое место на поверхности разработки.Click on an empty space on the design surface. Это отменяет выделение какие-либо элементы и свойства для документа раскадровки можно открыть.This deselects any elements and brings up the properties for the Storyboard document.

  2. Установите или снимите флажок Автомакет используйте флажок на панели свойств:Check or uncheck the Use Autolayout checkbox in the property panel:

По умолчанию никаких ограничений, созданный или он отображается в рабочей области.By default, no constraints are created or visible on the surface. Вместо этого они автоматически вывести из сведений о кадре во время компиляции.Instead, they are automatically inferred from the frame information at compile time. Чтобы добавить ограничения, нам нужно выберите элемент в области конструктора и добавьте его ограничения.To add constraints, we need to select an element on the design surface and add constraints to it. Мы можно сделать с помощью инструментов ограничение.We can do that using the Constraint Toolbar.

Панель инструментов ограниченийConstraints Toolbar

Панель инструментов ограничений был обновлен и теперь состоит из двух основных частей:The constraints toolbar has been updated and now consists of two main parts:

  • Кнопка переключателя режима ограничений: Ранее вы включения режима ограничений требовалось повторно щелкать выбранное представление на поверхности разработки.A Constraints mode button toggle: Previously, you entered the constraints mode by clicking again on a selected view on the design surface. Теперь следует использовать выключателя на панели ограничения:You should now use this toggle button in the constraints bar:

    Переключить режимы ограничения

  • Кнопка «Ограничения обновления»: Очень важно Обратите внимание, что изменения в зависимости от того, если вы в ограничениях режима редактирования.An "Update Constraints" button: It's important to note that the changes depending on if you are in constraints editing mode.

    • В режиме редактирования ограничение нажатием этой кнопки изменяется ограничения для сопоставления элемента фрейма.In Constraint editing mode this button adjusts the constraints to match the element frame.
    • В режиме редактирования кадре нажатием этой кнопки изменяется элемент кадр в соответствии с указанной позиции определении ограничения.In Frame editing mode this button adjusts the element frame to match the position the constraints are defining.

Ограничение на основе область редактированияSurface-Based Constraint Editing

В предыдущем разделе мы узнали, как добавить ограничения по умолчанию и удалите ограничения, используя панель инструментов ограничений.In the previous section, we learned to add default constraints and remove constraints using the Constraints Toolbar. Для более тонкой настройки ограничения редактирования, могут взаимодействовать ограничения непосредственно на поверхности разработки.For more fine-tuned constraint editing, we can interact with constraints directly on the design surface. Этот раздел содержит базовые ограничения на основе область редактирования, в том числе элементов управления, областей и работа с различных типов ограничений пробельного ПИН-код.This section introduces the basics of surface-based constraint editing, including pin-spacing controls, drop areas, and working with different types of constraints.

Создание ограниченияCreating Constraints

Средство конструктора iOS предлагает два типа элементов управления для управления элементами в области конструктора.The iOS Designer tool offers two types of controls for manipulating elements on the design surface. Перетаскивание элементов управления и интервал ПИН-код элементов управления, как показано на следующем рисунке:Dragging controls and pin-spacing controls, as illustrated in the following image:

элементы управления представления

Они переключаются, нажав кнопку режим ограничения в строке ограничения.These are toggled by selecting the constraints mode button in the constraints bar.

Определите 4 T-образный дескрипторы каждой стороны элемента верхней, правой, нижней, и левой краями элемента для ограничение.The 4 T-shaped handles on each side of the element define the top, right, bottom, and left edges of the element for a constraint. Я форме маркеры справа и внизу элемента определяют высота и ширины ограничение соответственно.The two I-shaped handles at the right and bottom of the element define height and width constraint respectively. Средний квадрат обрабатывает оба centerX и centerY ограничения.The middle square handles both centerX and centerY constraints.

Чтобы создать ограничение, выберите маркер и перетащите его где-то в области конструктора.To create a constraint, pick a handle and drag it somewhere on the design surface. При запуске перетаскивания, ряд зеленые линии или прямоугольники будут отображаться в области, о том, что вы можете ограничить.When you start the drag, a series of green lines/boxes will appear on the surface telling you what you can constrain. Например в нашем примере мы ограничиваемого верхней части средней кнопки:For example, in the screenshot below, we are constraining the top side of the middle button:

Обратите внимание три пунктирные линии зеленый через две другие кнопки.Note the three dashed green lines across the other two buttons. Зеленые линии обозначают областей, или других элементов, к которым можно ограничить атрибуты.The green lines indicate drop areas, or the attributes of other elements to which we can constrain. На снимке экрана выше, две другие кнопки предлагают 3 вертикальной областей ( нижней, centerY, верхней) для ограничения наши кнопки.In the screenshot above, the other two buttons offer 3 vertical drop areas ( bottom, centerY, top) to constrain our button. Пунктирной зеленой линией в верхней части представления означает, что контроллер представления предлагает ограничение в верхней части представления, а сплошной зеленой рамкой означает, что контроллер представления предлагает ограничение ниже Верхняя направляющая макета.The dashed green line at the top of the view means the view controller offers a constraint at the top of the view, and the solid green box means the view controller offers a constraint below the top layout guide.

Важно!

Направляющие разметки — это особые типы ограничения целевых объектов, которые позволяют создать верхней и нижней ограничения, которые учитывают наличие полос системы, например строки состояния или панели инструментов.Layout guides are special types of constraint targets that allow us to create top and bottom constraints that take into account the presence of system bars, such as status bars or toolbars. Одним из основных применений является совместимость между iOS 6 и iOS 7 приложения с момента последней версии имеет представление контейнера, расположенного под строке состояния.One of the main uses is to have an app compatible between iOS 6 and iOS 7 since the newest version has the container view extending below the status bar. Дополнительные сведения о Верхняя направляющая макета, см. документации Apple.For more information on the top layout guide, refer to the Apple documentation.

Следующих трех разделах представлена работа с различных типов ограничений.The next three sections introduce working with different types of constraints.

Ограничения размераSize Constraints

С ограничениями размера - высота и ширины -можно двумя способами.With size constraints - height and width - you have two options. Первый вариант — перетащите маркер, чтобы ограничить размер элемента соседа, в том случае, как показано в приведенном выше примере.The first option is to drag the handle to constrain to a neighbor element size, as illustrated by the example above. Другой вариант — дважды щелкните маркер, чтобы создать ограничение self.The other option is to double-click the handle to create a self-constraint. Это позволяет указать значение постоянного размера, как показано на снимке экрана ниже:This allows us to specify a constant size value, as illustrated by the screenshot below:

Ограничения CenterCenter Constraints

Квадратный маркер создаст centerX или centerY ограничение, в зависимости от контекста.The square handle will create a centerX or centerY constraint, depending on the context. Квадратный маркер перетаскивания работают и другие элементы предложить оба вертикальные и горизонтальные областей, как показано на снимке экрана ниже:Dragging the square handle will light up the other elements to offer both vertical and horizontal drop areas, as illustrated by the screenshot below:

При выборе вертикальная область, centerY создается ограничение.If you choose a vertical drop area, a centerY constraint will be created. Если горизонтальная область, ограничение будет основываться на centerX.If you choose a horizontal drop area, the constraint will be based on centerX.

Комбинированные ограниченияCombinational Constraints

Чтобы создать выравнивания и размера ограничения проверки на равенство между двумя элементами, можно выбрать элементы из верхней части панели инструментов для указания — в порядке: выравнивание по горизонтали, выравнивание по вертикали и размер равенства, как показано на снимке экрана ниже:To create both alignment and size equality constraints between two elements, you can select items from a top toolbar to specify - in order - horizontal alignment, vertical alignment and size equalities, as illustrated by the screenshot below:

Визуализации и редактирования ограниченияVisualizing and Editing Constraints

При добавлении ограничения, он отображается в области конструктора как синяя линия при выборе элемента:When you add a constraint, it will be displayed on the design surface as a blue line when you select an item:

Ограничение можно выбрать, щелкнув синяя линия и редактирования значений ограничений непосредственно на панели «Свойства».You can select a constraint by clicking on a blue line and editing the constraint values directly in the property panel. Кроме того щелкнув синяя линия приведет к появлению контекстном, которая позволяет изменять значения непосредственно в области конструктора:Alternatively, double-clicking on a blue line will bring up a popover that lets you edit the values directly on the design surface:

Проблемы ограниченияConstraint Issues

Несколько видов проблемы могут возникнуть при использовании ограничения:Several types of issues can arise when using constraints:

  • Конфликтующие ограничения — это происходит, когда несколько ограничений принудительно элемента может содержать конфликтующие значения для атрибута, а ограничение обработчику не удалось согласовать их.Conflicting constraints — This happens when multiple constraints force the element to have conflicting values for an attribute and the constraint engine is unable to reconcile them.
  • Underconstrained элементы — свойства элемента ("Расположение" + "размер") должен быть полностью охвачен от свой набор ограничений и внутренние размеры для ограничений был допустимым.Underconstrained items — An element’s properties (location + size) must be entirely covered by its set of constraints and intrinsic sizes for the constraints to be valid. Если эти значения являются неоднозначными, считается, что элемент быть underconstrained.If these values are ambiguous, the item is said to be underconstrained.
  • Frame потери портативного компьютера — это происходит, когда фрейма элемента и его набор ограничений определяют два разных итоговый прямоугольника.Frame misplacement — This occurs when an element’s frame and its set of constraints define two different resulting rectangles.

В этом разделе описываются три перечисленных выше проблем и приведены сведения о том, как их обрабатывать.This section elaborates on the three issues listed above, and provides details on how to handle them.

Конфликтующие ограниченияConflicting Constraints

Конфликтующие ограничения помечаются красным цветом и иметь символ предупреждения.Conflicting constraints are marked in red and have a warning symbol. При наведении курсора на символы предупреждения можно открыть контекстном с информацией о конфликте:Hovering over the warning symbols brings up a popover with information about the conflict:

Underconstrained элементовUnderconstrained Items

Underconstrained элементы выделены оранжевым цветом и активировать внешний вид значка оранжевый маркера в строке объекта контроллера представления:Underconstrained items appear in orange and trigger the appearance of an orange marker icon in the view controller object bar:

Если щелкнуть этот значок маркера можно получить сведения о underconstrained элементы в сцене и решить проблемы, либо полностью ограничение их, или удалив их ограничения, как показано на снимке экрана ниже:If you click on that marker icon, you can get information about underconstrained items in the scene and solve the issues by either fully constraining them or by removing their constraints, as illustrated by the screenshot below:

Кадр потери портативного компьютераFrame Misplacement

Потери портативного компьютера кадров использует один и тот же код цвета underconstrained элементами.Frame misplacement uses the same color code as underconstrained items. Элемент всегда отображается в рабочей области с помощью его фрейм машинного кода, но в случае потери портативного компьютера кадра красный прямоугольник помечает где элемента будет в итоге при запуске приложения, как показано на снимке экрана ниже:The item will always be rendered on the surface using its native frame, but in the case of a frame misplacement a red rectangle will mark where the item will end up when the application runs, as illustrated by the screenshot below:

Для устранения ошибок потери портативного компьютера кадров выберите обновления кадры на основе ограничений кнопки на панели инструментов ограничений (правой кнопки):To resolve frame misplacement errors, select the Update Frames Based on Constraints button from the constraints toolbar (far right button):

Это автоматически настроит фрейма элемента в соответствии с позициях, определенных в элементах управления.This will automatically adjust the element frame to match the positions defined by the controls.

Изменение ограничений в кодеModifying Constraints in Code

Зависимости от требований вашего приложения, возможны ситуации при необходимости изменить ограничение в коде.Based on the requirements of your app, there might be times when you need to modify a constraint in code. Например чтобы изменить размер или положение представления ограничение, чтобы изменить приоритет ограничения или полностью отключить ограничение.For example, to resize or reposition the View a Constraint is attached to, to change a Constraint's priority or deactivate a Constraint altogether.

Для доступа к ограничение в коде, сначала необходимо предоставить его в конструкторе iOS следующим образом:To access a Constraint in code, you first have to expose it in the iOS Designer by doing the following:

  1. Создайте ограничение в обычном режиме (с помощью любого из перечисленных выше методов).Create the Constraint as normal (using any of the methods listed above).

  2. В обозреватель документов структуры, найти нужное ограничение и выберите его:In the Document Outline Explorer, find the desired Constraint and select it:

  3. Затем назначить имя ограничения в мини-приложение вкладке обозревателе свойств:Next, assign a Name to the Constraint in the Widget tab of the Properties Explorer:

  4. Сохраните изменения.Save your changes.

С помощью изменения на месте можно использовать ограничение в коде и изменять его свойства.With the above changes in place, you can access the Constraint in code and modify its properties. Например можно использовать следующие задать высоту вложенные представления до нуля:For example, you can use the following to set the height of the attached View to zero:

ViewInfoHeight.Constant = 0;

Рассмотрим следующий параметр для ограничения в конструкторе iOS:Given the following setting for the Constraint in the iOS Designer:

Отложенное прохода макетаThe Deferred Layout Pass

Вместо мгновенно обновления вложенные представления в ответ на изменения ограничения, обработчик макетов автоматически планирует прохода макета отложенный в ближайшем будущем.Instead of instantly updating the attached View in response to Constraint changes, the Auto Layout Engine schedules a Deferred Layout Pass for the near future. Во время этого этапа отложенного не только — ограничение, заданное представление обновлены, ограничения, каждого представления в иерархии будут пересчитаны и обновлены с учетом нового макета.During this deferred pass, not only is the given View's Constraint updated, the Constraints for every View in the hierarchy are recalculated and updated to adjust for the new layout.

В любой момент вы можете запланировать собственные прохода макета отложенный путем вызова SetNeedsLayout или SetNeedsUpdateConstraints методы родительского представления.At any point, you can schedule your own Deferred Layout Pass by calling the SetNeedsLayout or SetNeedsUpdateConstraints methods of the parent View.

Проход разметки отложенный состоит из двух уникальных проходит через иерархию представлений:The Deferred Layout Pass consists of two unique passes through the view hierarchy:

  • На проход обновления -в течение этого прохода обработчик макетов автоматически проходит через иерархию представлений и вызывает UpdateViewConstraints метод на все контроллеры представлений и UpdateConstraints метод для всех представлений.The Update Pass - In this pass, the Auto Layout Engine traverses the view hierarchy and invokes the UpdateViewConstraints method on all View Controllers and the UpdateConstraints method on all Views.
  • Проход разметки — опять же, обработчик макетов автоматически проходит через иерархию представлений, но этот раз вызывает ViewWillLayoutSubviews метод на все контроллеры представлений и LayoutSubviews метод для всех представлений.The Layout Pass - Again, the Auto Layout Engine traverses the view hierarchy, but this time invokes the ViewWillLayoutSubviews method on all View Controllers and the LayoutSubviews method on all Views. LayoutSubviews Метод обновляет Frame свойства каждого вложенное представление с прямоугольником, вычисляются механизмом формирования структуры автоматически.The LayoutSubviews method updates the Frame property of each subview with the rectangle calculated by the Auto Layout Engine.

Анимация изменения ограниченияAnimating Constraint Changes

Помимо изменения свойств ограничения, можно использовать базовой анимации для анимации изменения представления ограничений.In addition to modifying Constraint properties, you can use Core Animation to animate changes to a View's Constraints. Пример:For example:

UIView.BeginAnimations("OpenInfo");
UIView.SetAnimationDuration(1.0f);
ViewInfoHeight.Constant = 237;
View.LayoutIfNeeded();

//Execute Animation
UIView.CommitAnimations();

Основная идея вызывает LayoutIfNeeded метод родительского представления внутри блока анимации.The key here is calling the LayoutIfNeeded method of the parent view inside of the animation block. Это указывает представлению для рисования каждого «frame» анимированных расположение или изменения размера.This tells the view to draw each "frame" of the animated location or size change. Без этой строки представление будет просто прикрепляются к окончательной версии без анимации.Without this line, the View would simply snap to the final version without animating.

СводкаSummary

Это руководство содержит общие iOS Auto (или «adaptive») макет и концепция ограничения как математические представления связей между элементами в области конструктора.This guide introduced iOS Auto (or “adaptive”) Layout and the concept of constraints as mathematical representations of relationships between elements on the design surface. Оно было описано, как включить автоматический макет в конструкторе iOS, работа с панель инструментов ограниченийи изменение ограничений по отдельности в рабочей области конструирования.It described how to enable Auto Layout in the iOS designer, working with the Constraints toolbar, and editing constraints individually on the design surface. Затем он было рассмотрено, как устранить три распространенные неполадки, ограничения.Next, it explained how to troubleshoot three common constraints issues. Наконец показал, как изменить ограничения в коде.Finally, it showed how to modify constraints in code.