Основные сведения о конструкторе iOSiOS Designer basics

Это руководство описывает конструктор Xamarin для iOS. Он демонстрирует, как использовать конструктор iOS для визуального размещения элементов управления, как получить доступ к эти элементы управления в коде и изменение свойств.This guide introduces the Xamarin Designer for iOS. It demonstrates how to use the iOS Designer to visually lay out controls, how to access those controls in code, and how to edit properties.

Xamarin для iOS используется конструктор визуальный интерфейс, аналогичную Interface Builder в Xcode и конструкторе Android.The Xamarin Designer for iOS is a visual interface designer similar to Xcode's Interface Builder and the Android Designer. Ниже перечислены некоторые из многих функций прозрачную интеграцию с Visual Studio для Windows и Mac, редактирования и перетаскивать, интерфейс для настройки обработчики событий и возможность отображения пользовательских элементов управления.Some of its many features include seamless integration with Visual Studio for Windows and Mac, drag-and-drop editing, an interface for setting up event handlers, and the ability to render custom controls.

ТребованияRequirements

Конструктор iOS — доступны в Visual Studio для Mac и Visual Studio 2017 и более поздней версии на Windows.The iOS Designer is available in Visual Studio for Mac and Visual Studio 2017 and later on Windows. В Visual Studio для Windows iOS Designer требуется подключение к правильно настроенные узлу сборки Mac, на то, что нет нужды выполняться Xcode.In Visual Studio for Windows, the iOS Designer requires a connection to a properly configured Mac build host, though Xcode need not be running.

В этом руководстве предполагается Знакомство с содержимым, охваченных руководства по началу работы.This guide assumes a familiarity with the contents covered in the Getting Started guides.

Как работает конструктор iOSHow the iOS Designer works

В этом разделе описывается, как конструктор iOS упрощает создание пользовательского интерфейса и привязать его к коду.This section describes how the iOS Designer facilitates creating a user interface and connecting it to code.

Конструктор iOS позволяет разработчикам визуальное проектирование пользовательского интерфейса приложения.The iOS Designer allows developers to visually design an application's user interface. Как описано в введение в раскадровки руководства вы узнаете раскадровки экраны (контроллеров представления), составляющие приложение, элементы интерфейса (представления), размещенные на этих контроллеров представлений и Общая последовательность навигации приложения .As outlined in the Introduction to Storyboards guide, a storyboard describes the screens (view controllers) that make up an app, the interface elements (views) placed on those view controllers, and the app's overall navigation flow.

Контроллер представления состоит из двух частей: визуальное представление в конструкторе iOS, а связанный класс C#:A view controller has two parts: a visual representation in the iOS Designer and an associated C# class:

В состоянии по умолчанию контроллер представления не предоставляет никакой функциональности; он должен заполняться с помощью элементов управления.In its default state, a view controller doesn't provide any functionality; it must be populated with controls. Эти элементы управления помещаются в представление контроллера представления, прямоугольной области, которая содержит все содержимое экрана.These controls are placed in the view controller's view, the rectangular area that contains all of the screen's content. Большинство контроллеров представления содержат стандартные элементы управления, такие как кнопки, метки и текстовые поля, как показано на следующем снимке экрана, показывающий контроллер представления, содержащую кнопку:Most view controllers contain common controls such as buttons, labels, and text fields, as illustrated in the following screenshot, which shows a view controller containing a button:

Некоторые элементы управления, такие как метки, содержащий статический текст, можно добавить в контроллер представлений и больше не трогать.Some controls, such as labels containing static text, can be added to the view controller and left alone. Тем не менее чаще, элементы управления должны настраиваться программно.However, more often than not, controls must be customized programmatically. Например кнопки, добавленных выше выполнения определенного действия шифрованию, поэтому необходимо добавить обработчик событий в коде.For example, the button added above should do something when tapped, so an event handler must be added in code.

Для получения доступа и управления кнопки в коде, он должен иметь уникальный идентификатор.In order to access and manipulate the button in code, it must have a unique identifier. Укажите уникальный идентификатор, нажав кнопку, открыв панели свойстви его имя на значение, например «SubmitButton»:Provide a unique identifier by selecting the button, opening the Properties Pad, and setting its Name field to a value such as "SubmitButton":

Задание имени кнопки на панели свойствSetting a button's name in the Properties Pad

Теперь, когда кнопка имеет имя, он может осуществляться в коде.Now that the button has a name, it can be accessed in code. Но как это работает?But how does this work?

В панели решения, переходе по адресу ViewController.cs и щелчке индикатора раскрытие показывают, что контроллер представления ViewController диапазонов определение класса двух файлов, каждый из которых содержит разделяемый класс определение:In the Solution Pad, navigating to ViewController.cs and clicking on the disclosure indicator reveals that the view controller's ViewController class definition spans two files, each of which contains a partial class definition:

Два файлы, которые образуют класс ViewController: ViewController.cs и ViewController.designer.csThe two files that make up the ViewController class: ViewController.cs and ViewController.designer.cs

  • ViewController.cs должны устанавливаться с пользовательским кодом, связанные с ViewController класса.ViewController.cs should be populated with custom code related to the ViewController class. В этом файле ViewController класс может реагировать на различные iOS методы жизненного цикла контроллера представления, настроить пользовательский Интерфейс и отвечать на пользовательский ввод, например нажимает кнопку.In this file, the ViewController class can respond to various iOS view controller lifecycle methods, customize the UI, and respond to user input such as button taps.

  • ViewController.designer.cs — это созданный файл, созданный конструктор для сопоставления интерфейс визуально сконструированный кода iOS.ViewController.designer.cs is a generated file, created by the iOS Designer to map the visually-constructed interface to code. Так как изменения в этот файл будут перезаписаны, его не следует изменять.Since changes to this file will be overwritten, it should not be modified. Объявления свойств в этом файле делают возможным для кода в ViewController класса к доступу по имя, набор элементов управления вверх в конструкторе iOS.Property declarations in this file make it possible for code in the ViewController class to access, by Name, controls set up in the iOS Designer. Открытие ViewController.designer.cs показывает следующий код:Opening ViewController.designer.cs reveals the following code:

namespace Designer
{
    [Register ("ViewController")]
    partial class ViewController
    {
        [Outlet]
        [GeneratedCode ("iOS Designer", "1.0")]
        UIKit.UIButton SubmitButton { get; set; }

        void ReleaseDesignerOutlets ()
        {
            if (SubmitButton != null) {
                SubmitButton.Dispose ();
                SubmitButton = null;
            }
        }
    }
}

SubmitButton Объявление свойства подключается всего ViewController класса — не просто ViewController.designer.cs файл — для кнопки, определенных в раскадровке.The SubmitButton property declaration connects the entire ViewController class - not just the ViewController.designer.cs file – to the button defined in the storyboard. Так как ViewController.cs определяет часть ViewController класс, он имеет доступ к SubmitButton.Since ViewController.cs defines part of the ViewController class, it has access to SubmitButton.

На следующем снимке экрана показано, что IntelliSense теперь распознает SubmitButton в ссылку на ViewController.cs:The following screenshot illustrates that IntelliSense now recognizes the SubmitButton reference in ViewController.cs:

В этом разделе показано, как создать кнопку в конструкторе iOS и получить доступ к этой кнопки в коде.This section has demonstrated how create a button in the iOS Designer and access that button in code.

В оставшейся части этого документа предоставляет дополнительные общие сведения о конструкторе iOS.The remainder of this document provides a further overview of the iOS Designer.

Основные сведения о конструкторе iOSiOS Designer basics

В этом разделе представлены части конструктора iOS и предоставляет обзор его возможностей.This section introduces the parts of the iOS Designer and provides a tour of its features.

Запуск конструктора iOSLaunching the iOS Designer

Проекты Xamarin.iOS, созданных с помощью Visual Studio для Mac включают в себя раскадровки.Xamarin.iOS projects created with Visual Studio for Mac include a storyboard. Чтобы просмотреть содержимое раскадровки, дважды щелкните файл .storyboard в панели решения:To view the contents of a storyboard, double-click the .storyboard file in the Solution Pad:

Раскадровка открыта в конструкторе iOSA storyboard open in the iOS Designer

функции конструктора iOSiOS Designer features

Конструктор iOS имеет шесть основных раздела:The iOS Designer has six primary sections:

Части конструктора iOSSections of the iOS Designer

  1. Область конструктора — основной рабочей областью конструктора iOS.Design Surface – The iOS Designer's primary workspace. Отображается в области документа, он позволяет визуального создания пользовательских интерфейсов.Shown in the document area, it enables the visual construction of user interfaces.
  2. Панель инструментов ограничений — позволяет переключения между различными фрейма редактирования режим и режим редактирования ограничение, два разных способа для размещения элементов в пользовательском интерфейсе.Constraints Toolbar – Allows for switching between frame editing mode and constraint editing mode, two different ways to position elements in a user interface.
  3. Панель элементов — перечислены контроллеры, объектов, элементы управления, представления данных, средства распознавания жестов, windows и полосы, можно перетащить в область конструктора и добавить к пользовательскому интерфейсу.Toolbox – Lists the controllers, objects, controls, data views, gesture recognizers, windows, and bars that can be dragged onto the design surface and added to a user interface.
  4. Панель свойств — отображаются свойства выбранного элемента управления, включая удостоверения, визуальные стили, специальных возможностей, макет и поведение.Properties Pad – Shows properties for the selected control, including identity, visual styles, accessibility, layout, and behavior.
  5. Структура документа — показано дерево элементов управления, составляющих макета для редактируемого интерфейса.Document Outline – Shows the tree of controls that compose the layout for the interface being edited. Щелкнув элемент в дереве выбирает его в конструкторе iOS и показывает его свойства в панели свойств.Clicking on an item in the tree selects it in the iOS Designer and shows its properties in the Properties Pad. Это удобно для выбора конкретного элемента управления в интерфейсе пользователя с глубоким вложением.This is handy for selecting a specific control in a deeply-nested user interface.
  6. Нижняя панель инструментов — содержит параметры для изменения, как конструктор iOS отображает .storyboard или .xib файла, включая устройства, ориентации и масштаба.Bottom Toolbar – Contains options for changing how the iOS Designer displays the .storyboard or .xib file, including device, orientation, and zoom.

Рабочий процесс разработкиDesign workflow

Добавление элемента управления интерфейсAdding a control to the interface

Чтобы добавить элемент управления интерфейса, перетащите его из элементов и поместите его в рабочей области конструирования.To add a control to an interface, drag it from the Toolbox and drop it on the design surface. При добавлении или элементов управления, рекомендации по вертикали и горизонтали выделите позиции часто используемых макета, например по вертикали по центру, в середине и поля:When adding or positioning a control, vertical and horizontal guidelines highlight commonly-used layout positions such as vertical center, horizontal center, and margins:

Синяя линия пунктирная, в примере выше рекомендации, в середине визуальную компоновку для облегчения размещение кнопки.The blue dotted line in the example above provides a horizontal center visual alignment guideline to help with the button placement.

Команды контекстного менюContext menu commands

Контекстное меню доступна как в рабочей области конструирования, так и в Структура документа.A context menu is available both on the design surface and in the Document Outline. В этом меню доступны команды для выбранного элемента управления и его родительский элемент, что полезно при работе с представлениями во вложенной иерархии:This menu provides commands for the selected control and its parent, which is helpful when working with views in a nested hierarchy:

В контекстном меню в области конструктораThe context menu on the design surface

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

Панель инструментов ограничений был обновлен и теперь состоит из двух элементов управления: кадра, в режиме редактирования / ограничение редактирования переключиться в режим и ограничения обновления / обновить кадры кнопки.The constraints toolbar has been updated and now consists of two controls: the frame editing mode / constraint editing mode toggle and the update constraints / update frames button.

Режим редактирования кадров / переключиться в режим редактирования ограничениеFrame editing mode / constraint editing mode toggle

В предыдущих версиях конструктора iOS щелкните уже выбранный представление на поверхности разработки переключаться между фрейма редактирования и режим редактирования ограничение.In previous versions of the iOS Designer, clicking an already-selected view on the design surface toggled between frame editing mode and constraint editing mode. Теперь элемент управления "выключатель" на панели инструментов ограничений переключается между режимами редактирования.Now, a toggle control in the constraints toolbar switches between these editing modes.

  • Режим редактирования кадров:Frame editing mode:
  • Режим редактирования ограничение:Constraint editing mode:

Обновить ограничения / обновить кадры кнопкиUpdate constraints / update frames button

Ограничения обновления и обновления кадров находится кнопка справа от фрейма, в режиме редактирования / переключиться в режим редактирования ограничение.The update constraints / update frames button sits to the right of the frame editing mode / constraint editing mode toggle.

  • В режим редактирования кадров при нажатии этой кнопки корректирует кадры любых выбранных элементов в соответствии с их ограничений.In frame editing mode, clicking this button adjusts the frames of any selected elements to match their constraints.
  • В режиме редактирования ограничение при нажатии этой кнопки корректирует ограничения любых выбранных элементов в соответствии с их кадры.In constraint editing mode, clicking this button adjusts the constraints of any selected elements to match their frames.

Нижняя панель инструментовBottom toolbar

Нижняя панель инструментов предоставляет возможность выбора устройства, ориентации и масштабирования, используемый для просмотра файла storyboard "или".xib в конструкторе iOS:The bottom toolbar provides a way to select the device, orientation, and zoom used to view a storyboard or .xib file in the iOS Designer:

Устройства и ориентацияDevice and orientation

При развертывании в нижней панели инструментов отображает все устройства, ориентации или адаптации, применимые к текущему документу.When expanded, the bottom toolbar displays all devices, orientations, and/or adaptations applicable to the current document. Щелкнув их изменяет представление, отображаемое в области конструктора.Clicking them changes the view displayed on the design surface.

Обратите внимание на то, что при выборе устройства и ориентация меняется только как конструктор iOS выполняет предварительный просмотр конструктора.Note that selecting a device and orientation changes only how the iOS Designer previews the design. Независимо от текущего выделения, добавляемых в ограничения применяются на всех устройствах и ориентации, если не изменить признаки кнопку использовался для указано иное.Regardless of the current selection, newly added constraints are applied across all devices and orientations unless the Edit Traits button has been used to specify otherwise.

При классы размера являются включена, изменить признаки кнопка будет отображаться в развернутой нижней панели инструментов.When size classes are enabled, the Edit Traits button will appear in the expanded bottom toolbar. Щелкнув изменить признаки кнопка отображает параметры для создания интерфейса вариантов, в зависимости от размера класса, представленного на выбранном устройстве и ориентацию.Clicking the Edit Traits button displays options for creating an interface variation based on the size class represented by the selected device and orientation. Рассмотрим следующие примеры:Consider the following examples:

  • Если iPhone SE / книжной, будет выбран, контекстном предложит варианты для создания вариант интерфейса для compact ширину класса размера регулярных высоту.If iPhone SE / Portrait, is selected, the popover will provide options to create an interface variation for the compact width, regular height size class.
  • Если iPad Pro 9,7" / Альбомная / во весь экран — флажок установлен, контекстном предоставит возможность создать вариант интерфейса для регулярные width и регулярного высота размер класса.If iPad Pro 9.7" / Landscape / Full Screen is selected, the popover will provide options to create an interface variation for the regular width, regular height size class.

Элементы управления масштабомZoom controls

В область конструктора поддерживает масштабирование с помощью нескольких элементов управления:The design surface supports zooming via several controls:

Элементы управления включают следующее:The controls include the following:

  1. По размеру окнаZoom to fit
  2. МельчеZoom out
  3. УвеличитьZoom in
  4. Фактический размер (размер в пикселях 1:1)Actual size (1:1 pixel size)

Эти элементы управления увеличьте масштаб поверхности разработки.These controls adjust the zoom on the design surface. Они не влияют на пользовательском интерфейсе приложения во время выполнения.They do not affect the user interface of the application at runtime.

Панель свойствProperties Pad

Используйте панели свойств изменение удостоверения, визуальные стили, специальные возможности и поведение элемента управления.Use the Properties Pad to edit the identity, visual styles, accessibility, and behavior of a control. На следующем снимке экрана показаны панели свойств параметры для кнопки:The following screenshot illustrates the Properties Pad options for a button:

Панель свойств для кнопкиThe Properties Pad for a button

Свойства панели разделыProperties Pad sections

Панели свойств имеется три раздела:The Properties Pad contains three sections:

  1. Мини-приложение — основные свойства элемента управления, такие как имя класса, стиль, свойств и других. Свойства для управления содержимым элемента управления обычно размещаются здесь.Widget – The main properties of the control, such as name, class, style properties, etc. Properties for managing the control’s content are usually placed here.
  2. Макет — здесь перечислены свойства, позволяющие проследить, положение и размер элемента управления, включая ограничения и кадров,.Layout – Properties that keep track of the position and size of the control, including constraints and frames, are listed here.
  3. События — события и обработчики событий указаны здесь.Events – Events and event handlers are specified here. Это удобно для обработки событий, таких как сенсорного ввода, касания, перетаскивания и т. д. Кроме того, события могут обрабатываться непосредственно в коде.Useful for handling events such as touch, tap, drag, etc. Events can also be handled directly in code.

Изменение свойств в панели свойствEditing properties in the Properties Pad

Помимо визуального редактирования в области конструктора, конструктор iOS поддерживает редактирование свойств в панели свойств.In addition to visual editing on the design surface, the iOS Designer supports editing properties in the Properties Pad. Доступные свойства изменяются в зависимости от выбранного элемента управления, как показано на снимке экрана ниже:The available properties change based on the selected control, as illustrated by the screenshots below:

Свойства кнопокButton properties

Просмотреть свойства контроллераView controller properties

Важно!

В разделе Identity теперь отображает панель свойств модуль поля.The Identity section of the Properties Pad now shows a Module field. Это необходимо для заполнения в этом разделе только в том случае, при взаимодействии с классами Swift.It is necessary to fill in this section only when interoperating with Swift classes. Используйте его для ввода имя модуля для Swift классы, являющиеся пространств имен.Use it to enter a module name for Swift classes, which are namespaced.

Значения по умолчаниюDefault values

Многие свойства в панели свойств Показать нет значения или значение по умолчанию.Many properties in the Properties Pad show no value or a default value. Тем не менее код приложения может по-прежнему изменять эти значения.However, the application's code may still modify these values. Панели свойств не содержит значения, заданные в коде.The Properties Pad does not show values set in code.

Обработчики событийEvent handlers

Чтобы указать пользовательские обработчики событий для различных событий, используйте события вкладке панели свойств.To specify custom event handlers for various events, use the Events tab of the Properties Pad. Например, на снимке экрана ниже HandleClick метод обрабатывает кнопки Touch вверх внутри событий:For example, in the screenshot below, a HandleClick method handles the button's Touch Up Inside event:

Панель свойств, с помощью обработчика событий для кнопкиThe Properties Pad, with an event handler set for a button

После указания обработчика событий, метод с тем же именем необходимо добавить соответствующий класс контроллера представления.Once an event handler has been specified, a method of the same name must be added to the corresponding view controller class. В противном случае unrecognized selector исключение возникает при нажатии кнопки:Otherwise, an unrecognized selector exception will occur when the button is tapped:

Исключение нераспознанный селекторAn unrecognized selector exception

Обратите внимание, что после обработчика событий был указан в панели свойств, конструктор iOS будет немедленно открыть соответствующий файл кода и предложения для вставки объявления метода.Note that after an event handler has been specified in the Properties Pad, the iOS Designer will immediately open the corresponding code file and offer to insert the method declaration.

Пример, использующий пользовательские обработчики событий, см. в разделе Привет, iOS: руководство по началу работы.For an example that uses custom event handlers, refer to the Hello, iOS Getting Started Guide.

Представление структурыOutline view

Конструктор iOS также можно отобразить иерархии элементов управления интерфейса как структуры.The iOS Designer can also display an interface's hierarchy of controls as an outline. Контур доступна, выбрав Структура документа вкладке, как показано ниже:The outline is available by selecting the Document Outline tab, as shown below:

Выбранный элемент управления в представлении структуры остается синхронизированной с выбранного элемента управления в рабочей области конструирования.The selected control in the outline view stays in sync with the selected control on the design surface. Эта функция полезна для выбора элемента из иерархии глубоко вложенного интерфейса.This feature is useful for selecting an item from a deeply nested interface hierarchy.

Вернуться к XcodeRevert to Xcode

Можно использовать конструктор iOS и конструктор Interface Builder в Xcode на равных основаниях.It is possible to use the iOS Designer and Xcode Interface Builder interchangeably. Чтобы открыть раскадровку или файл .xib в построителе интерфейса Xcode, щелкните правой кнопкой мыши файл и выберите открыть с помощью > конструктора Interface Builder Xcode, как показано на снимке экрана ниже:To open a storyboard or a .xib file in Xcode Interface Builder, right-click on the file and select Open With > Xcode Interface Builder, as illustrated by the screenshot below:

Открытие раскадровки в построителе интерфейса XcodeOpening a storyboard in Xcode Interface Builder

После внесения изменений в построителе интерфейса Xcode, сохраните файл и вернитесь в Visual Studio для Mac.After making edits in Xcode Interface Builder, save the file and return to Visual Studio for Mac. Изменения будут синхронизироваться в проект Xamarin.iOS.The changes will sync to the Xamarin.iOS project.

Поддержка .xib.xib support

Конструктор iOS поддерживает создание, изменение и управление xib-файлов.The iOS Designer supports creating, editing, and managing .xib files. Они являются файлами XML, представлять замкнутую представления единый, пользовательские, которые могут добавляться к иерархии представления приложения.These are XML files that respresent single, custom views which can be added to an application's view hierarchy. Файл .xib обычно представляет интерфейс для единое представление или экран в приложении, в то время как раскадровка представляет много экранов и переходами между ними.A .xib file generally represents the interface for a single view or screen in an application, whereas a storyboard represents many screens and the transitions between them.

Существует много мнений о том, какие решения — xib-файлов раскадровки и кода — лучше всего подходит для создания и обслуживания пользовательского интерфейса.There are many opinions about which solution – .xib files, storyboards, or code – works best for creating and maintaining a user interface. На самом деле существует это не идеальное решение, а это всегда стоит обсудить лучшим инструментом для текущего задания.In reality, there is no perfect solution, and it's always worth considering the best tool for the job at hand. С другой стороны, xib-файлы обычно самый эффективный используется для представления настраиваемого представления, необходимые в нескольких местах в приложении, такие как ячейки представления пользовательских таблиц.That said, .xib files are generally most powerful when used to represent a custom view needed in multiple places in an app, such as a custom table view cell.

Дополнительную документацию об использовании xib-файлы можно найти в следующей инструкции:More documentation about using .xib files can be found in the following recipes:

Дополнительные сведения об использовании раскадровок см введение в раскадровки.For more information regarding the use of storyboards, refer to the Introduction to Storyboards.

Это и другие руководства, связанные с конструктором iOS относятся использования раскадровок как стандартный подход для создания пользовательских интерфейсов, так как новые шаблоны проектов большинство Xamarin.iOS предоставляет раскадровку, по умолчанию.This and other iOS Designer-related guides refer to the use of storyboards as the standard approach for building user interfaces, since most Xamarin.iOS new project templates provide a storyboard by default.

СводкаSummary

В этом руководстве представлены общие сведения о конструкторе, описания его компоненты и средства, предоставляемые для разработки привлекательных пользовательских интерфейсов создания структуры iOS.This guide provided an introduction to the iOS Designer, describing its features and outlining the tools it offers for designing beautiful user interfaces.