Поделиться через

Основы конструктора iOS

  • Статья

В этом руководстве представлен конструктор Xamarin для iOS. В нем показано, как использовать конструктор iOS для визуального размещения элементов управления, доступа к этим элементам управления в коде и редактирования свойств.

Предупреждение

Поддержка конструктора iOS была прекращена в Visual Studio 2019 версии 16.8 и Visual Studio 2019 для Mac версии 8.8. В Visual Studio 2019 версии 16.9 и Visual Studio для Mac версии 8.9 этот конструктор удален. Рекомендуемый способ создания пользовательских интерфейсов iOS находится непосредственно на компьютере Mac под управлением Xcode. Дополнительные сведения см. в статье Проектирование пользовательских интерфейсов с помощью Xcode.

Конструктор Xamarin для iOS — это конструктор визуальных интерфейсов, аналогичный конструктору интерфейсов Xcode и Конструктору Android. Некоторые из его многих функций включают простую интеграцию с Visual Studio для Windows и Mac, редактирование перетаскивания, интерфейс для настройки обработчиков событий и возможность отрисовки пользовательских элементов управления.

Требования

Конструктор iOS доступен в Visual Studio для Mac и Visual Studio 2017 и более поздних версий в Windows. В Visual Studio для Windows конструктор iOS требует подключения к правильно настроенного узла сборки Mac, хотя Xcode не требуется выполнять.

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

Как работает конструктор iOS

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

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

Контроллер представления состоит из двух частей: визуальное представление в конструкторе iOS и связанном классе C#:

В своем состоянии по умолчанию контроллер представления не предоставляет никаких функциональных возможностей; он должен быть заполнен элементами управления. Эти элементы управления помещаются в представление контроллера представления, прямоугольную область, содержащую все содержимое экрана. Большинство контроллеров представления содержат общие элементы управления, такие как кнопки, метки и текстовые поля, как показано на следующем снимке экрана, где показан контроллер представления, содержащий кнопку:

Некоторые элементы управления, такие как метки, содержащие статический текст, могут быть добавлены в контроллер представления и оставлены в одиночку. Однако чаще всего элементы управления должны быть настроены программным способом. Например, кнопка, добавленная выше, должна выполнять что-то при нажатии, поэтому обработчик событий должен быть добавлен в код.

Для доступа к кнопке и управления ими в коде он должен иметь уникальный идентификатор. Укажите уникальный идентификатор, нажав кнопку, открыв панель свойств и указав поле "Имя ", например "SubmitButton":

Setting a button's name in the Properties Pad

Теперь, когда кнопка имеет имя, его можно получить в коде. Но как это работает?

На панели решений переход к ViewController.cs и нажатие индикатора раскрытия показывает, что определение класса контроллера ViewController представления охватывает два файла, каждый из которых содержит определение частичного класса:

The two files that make up the ViewController class: ViewController.cs and ViewController.designer.cs

  • ViewController.cs должно быть заполнено пользовательским кодом, связанным с классомViewController. В этом файле ViewController класс может реагировать на различные методы жизненного цикла контроллера представления iOS, настраивать пользовательский интерфейс и реагировать на входные данные пользователя, например касания кнопок.

  • ViewController.designer.cs — это созданный файл, созданный конструктором iOS для сопоставления визуально созданного интерфейса с кодом. Так как изменения в этом файле будут перезаписаны, его не следует изменять. Объявления свойств в этом файле позволяют получить доступ к коду ViewController в классе по имени, элементам управления, настроенным в конструкторе iOS. Открытие ViewController.designer.cs показывает следующий код:

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 - к кнопке, определенной в раскадровке. Так как ViewController.cs определяет часть ViewController класса, он имеет доступ к SubmitButton .

На следующем снимке экрана показано, что IntelliSense теперь распознает ссылку SubmitButton в ViewController.cs:

В этом разделе показано, как создать кнопку в конструкторе iOS и получить доступ к этой кнопке в коде.

Остальная часть этого документа содержит дополнительные сведения о конструкторе iOS.

Основы конструктора iOS

В этом разделе представлены части конструктора iOS и обзор ее функций.

Запуск конструктора iOS

Проекты Xamarin.iOS, созданные с помощью Visual Studio для Mac включают раскадровки. Чтобы просмотреть содержимое раскадровки, дважды щелкните файл раскадровки в панели решения:

A storyboard open in the iOS Designer

Функции конструктора iOS

Конструктор iOS содержит шесть основных разделов:

Sections of the iOS Designer

  1. Конструктор Surface — основная рабочая область конструктора iOS. В области документа она включает визуальное построение пользовательских интерфейсов.
  2. Панель инструментов ограничений — позволяет переключаться между режимом редактирования кадров и режимом редактирования ограничений, двумя разными способами размещения элементов в пользовательском интерфейсе.
  3. Панель элементов — перечисляет контроллеры, объекты, элементы управления, представления данных, распознаватели жестов, окна и панели, которые можно перетащить в область конструктора и добавить в пользовательский интерфейс.
  4. Панель свойств — отображает свойства выбранного элемента управления, включая удостоверения, стили визуальных элементов, специальные возможности, макет и поведение.
  5. Структура документа — показывает дерево элементов управления, составляющих макет для редактируемого интерфейса. Щелкнув элемент в дереве, он выбирается в конструкторе iOS и отображает его свойства на панели свойств. Это удобно для выбора определенного элемента управления в глубоко вложенном пользовательском интерфейсе.
  6. Нижняя панель инструментов — содержит параметры изменения того, как конструктор iOS отображает раскадровки или XIB-файл, включая устройство, ориентацию и масштабирование.

Проектирование рабочего процесса

Добавление элемента управления в интерфейс

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

Синяя точка линия в приведенном выше примере содержит руководство по выравниванию визуального элемента по горизонтальному центру, чтобы помочь с размещением кнопки.

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

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

The context menu on the design surface

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

Панель инструментов ограничений была обновлена, и теперь состоит из двух элементов управления: режим редактирования кадров/ режим редактирования ограничений и кнопка "Обновить кадры".

Режим редактирования кадров / режим редактирования ограничений

В предыдущих версиях конструктора iOS щелкните уже выбранное представление в области конструктора, переключив режим редактирования кадров и режим редактирования ограничений. Теперь переключатель в панели инструментов ограничений переключается между этими режимами редактирования.

  • Режим редактирования кадров:
  • Режим редактирования ограничений:

Кнопка "Обновить ограничения" или "Обновить кадры"

Кнопка "Ограничения обновления" или "Обновить кадры" находится справа от режима редактирования кадра или режима редактирования ограничений.

  • В режиме редактирования кадров нажатие этой кнопки настраивает кадры всех выбранных элементов в соответствии с их ограничениями.
  • В режиме редактирования ограничений нажатие этой кнопки настраивает ограничения всех выбранных элементов в соответствии с их кадрами.

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

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

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

При развертывании на нижней панели инструментов отображаются все устройства, ориентации и/или адаптации, применимые к текущему документу. Щелкнув их, измените представление, отображаемое на поверхности конструктора.

Обратите внимание, что выбор устройства и ориентации изменяется только при предварительном просмотре конструктора iOS. Независимо от текущего выбора, новые добавленные ограничения применяются ко всем устройствам и ориентациям, если кнопка "Изменить признаки " не использовалась для указания в противном случае.

Если классы размера включены, кнопка "Изменить признаки" появится на развернутой нижней панели инструментов. При нажатии кнопки "Изменить признаки" отображаются параметры создания вариантов интерфейса на основе класса размера, представленного выбранным устройством и ориентацией. Рассмотрим следующие примеры:

  • Если выбран параметр i Телефон SE / Portrait, всплывающее окно предоставит параметры для создания вариантов интерфейса для компактной ширины, обычного класса размера высоты.
  • Если выбран iPad Pro 9.7" / Альбомный / полный экран, всплывающее окно предоставит параметры для создания вариантов интерфейса для регулярной ширины, регулярного класса размера высоты.

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

Область конструктора поддерживает масштабирование с помощью нескольких элементов управления:

К элементам управления относятся следующие элементы управления:

  1. Масштабирование для соответствия
  2. Уменьшить
  3. Увеличить
  4. Фактический размер (размер пикселя 1:1)

Эти элементы управления настраивают масштаб поверхности конструктора. Они не влияют на пользовательский интерфейс приложения во время выполнения.

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

Используйте панель свойств для изменения удостоверений, визуальных стилей, специальных возможностей и поведения элемента управления. На следующем снимках экрана показаны параметры панели свойств для кнопки:

The Properties Pad for a button

Разделы "Панель свойств"

Панель свойств содержит три раздела:

  1. Мини-приложение — основные свойства элемента управления, такие как имя, класс, свойства стиля и т. д. Свойства для управления содержимым элемента управления обычно размещаются здесь.
  2. Макет — свойства, которые отслеживают положение и размер элемента управления, включая ограничения и кадры, перечислены здесь.
  3. События — события и обработчики событий указаны здесь. Полезно для обработки таких событий, как касание, касание, перетаскивание и т. д. События также можно обрабатывать непосредственно в коде.

Изменение свойств на панели свойств

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

Button properties

View controller properties

Внимание

В разделе "Удостоверение" панели свойств теперь отображается поле "Модуль ". Этот раздел необходимо заполнить только при взаимодействии с классами Swift. Используйте его для ввода имени модуля для классов Swift, которые находятся в пространстве имен.

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

Многие свойства на панели свойств не отображают значения или значения по умолчанию. Однако код приложения может по-прежнему изменять эти значения. Панель свойств не отображает значения, заданные в коде.

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

Чтобы указать пользовательские обработчики событий для различных событий, перейдите на вкладку "События" панели свойств. Например, на снимке экрана ниже HandleClick метод обрабатывает событие Touch Up в кнопке:

The Properties Pad, with an event handler set for a button

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

An unrecognized selector exception

Обратите внимание, что после указания обработчика событий на панели свойств конструктор iOS немедленно откроет соответствующий файл кода и предложит вставить объявление метода.

Пример использования пользовательских обработчиков событий см. в руководстве по началу работы с Hello, iOS.

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

Конструктор iOS также может отображать иерархию элементов управления интерфейса в виде структуры. Структура доступна, выбрав вкладку "Структура документа", как показано ниже:

Выбранный элемент управления в представлении структуры остается синхронизированным с выбранным элементом управления в области конструктора. Эта функция полезна для выбора элемента из глубоко вложенной иерархии интерфейса.

Вернуться к Xcode

Можно использовать конструктор iOS и построитель интерфейсов Xcode взаимозаменяемо. Чтобы открыть раскадровку или XIB-файл в Xcode Interface Builder, щелкните файл правой кнопкой мыши и выберите "Открыть с помощью > конструктора интерфейсов Xcode", как показано на снимке экрана ниже:

Opening a storyboard in Xcode Interface Builder

После внесения изменений в построитель интерфейсов Xcode сохраните файл и вернитесь в Visual Studio для Mac. Изменения синхронизируются с проектом Xamarin.iOS.

Поддержка XIB

Конструктор iOS поддерживает создание, редактирование и управление XIB-файлами. Это XML-файлы, которые представляют собой отдельные пользовательские представления, которые можно добавить в иерархию представлений приложения. XIB-файл обычно представляет интерфейс для одного представления или экрана в приложении, в то время как раскадровка представляет множество экранов и переходов между ними.

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

Дополнительные сведения об использовании XIB-файлов см. в следующих рецептах:

Дополнительные сведения об использовании раскадровки см . в разделе "Введение в раскадровки".

Это и другие руководства, связанные с конструктором iOS, ссылаются на использование раскадровки в качестве стандартного подхода для создания пользовательских интерфейсов, так как большинство новых шаблонов проектов Xamarin.iOS предоставляют раскадровки по умолчанию.

Итоги

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