В Xcode есть встроенный инструмент под названием Interface Builder, который упрощает визуальное создание интерфейсов. В этом уроке вы узнаете, как перемещаться по конструктору интерфейсов, добавлять элементы на холст и взаимодействовать с этими элементами в коде.
Чему Вы Научитесь
- Как использовать Interface Builder для создания пользовательских интерфейсов
- Как просмотреть пользовательские интерфейсы без компиляции приложения
Терминология
Лучший способ изучить основы Interface Builder - это погрузиться в Xcode и изучить некоторые его функции. Начните с создания нового проекта Xcode с использованием шаблона приложения iOS. При создании проекта убедитесь, что для параметра интерфейс установлено значение Раскадровка. Назовите проект "IBBasics".
Раскадровки (Storyboards)
Конструктор интерфейсов открывается всякий раз, когда вы выбираете файл XIB (.xib) или файл раскадровки (.storyboard) в навигаторе проекта.
Файл XIB содержит пользовательский интерфейс для одного визуального элемента, такого как полноэкранный режим, ячейка табличного представления или пользовательский элемент управления пользовательского интерфейса. XIBS использовались более активно до появления раскадровок, и вы можете услышать, как опытные разработчики macOS или iOS называют файлы XIB файлами “Nib”. Они по-прежнему являются полезным форматом в определенных ситуациях, но в этом уроке основное внимание уделяется раскадровкам.
В отличие от XIB, файл раскадровки включает в себя множество элементов интерфейса, определяющих расположение одного или нескольких экранов, а также переход от одного экрана к другому. Как разработчик, вы обнаружите, что возможность видеть несколько экранов одновременно поможет вам понять, как работает ваше приложение.
По умолчанию новый проект приложения для iOS поставляется с одной раскадровкой с именем Main.storyboard. Поскольку Xcode по умолчанию не показывает расширения файлов, он отображается как Main в навигаторе проектов. Нажмите на него сейчас, чтобы открыть раскадровку в конструкторе интерфейсов. В центре экрана вы увидите одну сцену с простым белым изображением на пустом холсте. Эта сцена называется начальным контроллером просмотра, и это первый экран, который появится при открытии приложения. По мере добавления новых сцен в раскадровку вы можете перетаскивать их в любое место на холсте. Чтобы увидеть сразу несколько контроллеров просмотра, используйте два пальца на мультитач-трекпаде, чтобы сжать и уменьшить масштаб холста или увеличить масштаб определенного вида. Если у вас нет трекпада, вы можете использовать кнопки масштабирования в нижней части холста, чтобы добиться того же результата.
Создайте и запустите проект. Симулятор отображает тот же белый экран, который вы видели в раскадровке. Как приложение узнало, что нужно отображать этот экран? Чтобы исследовать это, выберите самый верхний файл (IBBasics) в навигаторе проекта и найдите раздел "Deployment Info" под общим заголовком. Запись в главном интерфейсе определяет, какой файл раскадровки загружается первым при запуске приложения. 1 Поскольку вы создали проект с использованием шаблона приложения iOS, эта запись была предварительно настроена для использования Main раскадровки.
Вы можете изменить контроллер начального просмотра, переместив точку входа (стрелка вправо) влево от нужного контроллера просмотра. 2 В настоящее время в этом проекте Main раскадровка имеет только один контроллер просмотра, поэтому вы не сможете его изменить.
Макет конструктора интерфейсов
Слева от основного холста находится вид схемы документа. Чтобы открыть его, нажмите кнопку Показать контур документа в левом нижнем углу холста. 3 Схема документа отображает список каждого контроллера вида в сцене, а также иерархический список элементов внутри каждого контроллера вида. Щелкните серые треугольники слева от каждого элемента, чтобы просмотреть содержимое. Как вы могли заметить, щелчок по виду в контуре выделит соответствующий элемент на холсте. 4
Нажмите кнопку + раздела "Library" на панели инструментов Xcode, чтобы отобразить библиотеку объектов. Библиотека объектов содержит кнопки, текстовые поля, метки и другие контроллеры представления, которые вы можете добавить в свою scene.
Прокрутите библиотеку объектов, чтобы найти и выбрать “Button”, затем перетащите элемент из библиотеки на вид. Перетаскивая кнопку в верхний левый угол вида, попробуйте использовать направляющие макета. Направляющие компоновки отображаются в виде пунктирной синей линии при размещении или изменении размера объекта представления в Interface Builder. Руководства по компоновке помогут вам центрировать содержимое, использовать соответствующие поля и интервалы между объектами и избегать размещения содержимого в строке состояния в верхней части экрана.
Продолжайте и отпустите мышь или трекпад, чтобы вставить кнопку в вид. Обратите внимание, что объект button теперь также отображается в структуре документа.
В правой части экрана вы видите область инспектора. Если вы его не видите, нажмите кнопку "Hide or Show the Inspectors" в левом верхнем углу панели инструментов или используйте сочетание клавиш Option-Command-0.
В дополнение к инспекторам файлов, истории и быстрой справки (которые всегда доступны), в верхней части области Инспектора отображаются четыре контекстно-зависимых инспектора, когда вы находитесь в Interface Builder. 5 Чтобы изучить эти различные инспекторы и то, как они могут помочь вам настроить объекты в вашем представлении, выберите только что добавленную кнопку — либо в Контуре документа, либо в самой сцене.
Аутлеты (outlets) и действия (actions)
Вам часто понадобится способ ссылаться на ваши визуальные элементы в коде, чтобы их можно было настроить во время выполнения или когда приложение уже запущено. Эта ссылка из конструктора интерфейсов на код называется аутлет. Когда у вас есть объект, с которым вы хотите, чтобы пользователь взаимодействовал, вы создаете действие — ссылку на фрагмент кода, который будет выполняться при выполнении взаимодействия.
Выберите контроллер представления в представлении схемы, затем выберите инспектор идентификации. Шаблон, который вы выбрали при создании проекта, установил для пользовательского класса (Custom Class) значение ViewController. 
Откройте помощник редактора, нажав кнопку Настроить Параметры Редактора и выбрав Помощник редактора (Assistant Editor). 6
Исходный код ViewController отображается рядом с раскадровкой (поскольку он соответствует полю пользовательского класса Custom Class в инспекторе идентификации Identity inspector).
Но класс ViewController по-прежнему не имеет доступа к добавленной вами кнопке. Чтобы сделать объект доступным в коде, вам нужно будет создать аутлет (outlet).
Создание аутлета
Щелкните с зажатой Control (или щелкните правой кнопкой мыши) на кнопке в раскадровке (storyboard) и начните перетаскивание к панели помощника редактора, которая содержит определение класса ViewController. Когда вы перетаскиваете указатель в код, вы видите синюю линию. 7
Когда вы отпускаете указатель, появляется диалоговое окно "Выходы и действия". Убедитесь, что подключение настроено на outlet, а для хранилища установлено значение Strong. В поле Имя укажите имя переменной для кнопки: "MyButton". Нажмите кнопку Подключения (Connect), чтобы завершить создание outlet, сгенерировав строку кода, определяющую outlet. 8
Теперь, когда у вас есть доступ к кнопке в коде, добавьте следующую строку внутри функции viewDidLoad():
MyButton.tintColor = .red
Эта строка изменяет цвет заголовка кнопки с синего на красный. Создайте и запустите свое приложение, чтобы увидеть, как изменения вступят в силу.
Это здорово, но вы, вероятно, заметите, что при попытке нажать на кнопку ничего не происходит. Чтобы добавить функциональность, вам нужно будет создать действие, привязанное к кнопке.
Создание действия (Action)
Еще раз щелкните с зажатой control (или щелкните правой кнопкой мыши) на кнопке в раскадровке (storyboard) и перетащите курсор в определение класса ViewController.
Когда появится диалоговое окно "Outlets and Actions", установите подключение к действию (Connection to Action). 9 В этой ситуации ваша запись в поле Имя не определяет переменную; она определяет действие, к которому привязано нажатие кнопки. Назовите действие “buttonPressed” (Кнопка нажата). Нажмите кнопку Connect (Подключиться), чтобы завершить создание действия.
Посмотрите на новую строку кода, слева направо: 10
Теперь у вас есть функция, которая выполняется при каждом нажатии на кнопку. Чтобы проверить это, добавьте следующую строку внутри функции buttonPressed: 11
print(”The button was pressed”)
Этот код выводит сообщение на консоль Xcode всякий раз, когда выполняется функция. Создайте и запустите свое приложение, затем нажмите кнопку, чтобы увидеть сообщение, напечатанное в консоли в правом нижнем углу экрана. 12
Вернитесь в режим просмотра схемы, снова нажмите кнопку, затем выберите Инспектор подключений. Теперь, когда вы подключили аутлет и действие к кнопке, вы увидите их оба на панели подключений. 13
Примечание Об Interface Builder
Каждый атрибут в Interface Builder представляет собой свойство, которое также может быть настроено программно или в коде. Interface Builder - это просто графический интерфейс для конфигурации и настройки свойств классов UIKit, которые отображаются в вашем приложении.
Добавьте метку (Lable) в свою сцену (scene), 14 затем посмотрите на метку в инспекторе атрибутов. 15
Теперь найдите символы или свойства и функции для UILabel в браузере документации. Вы обнаружите, что каждый параметр в Interface Builder имеет сопутствующее свойство.
| Атрибут Interface Builder | Имя Свойства (Property Name) |
| Text | text |
| Color | textColor |
| Dynamic Type | adjustsFontForContentSizeCategory |
| Font | font |
| Alignment | textAlignment |
| Lines | numberOfLines |
| Enabled | enabled |
| Highlighted | isHighlighted |
| Baseline | baselineAdjustment |
| Line Break | lineBreakMode |
| Autoshrink | adjustsFontSizeToFitWidth |
| Tighten Letter Spacing | allowsDefaultTighteningForTruncation |
| Highlighted | highlightedTextColor |
| Shadow | shadowColor |
| Shadow Offset | shadowOffset |
Многие объекты, которые вы можете настроить в Interface Builder, имеют свойства, которые можно задать только программно. Например, UIScrollView имеет свойство contentSize, у которого нет соответствующей опции в инспекторе атрибутов.
Когда вам нужно настроить один из этих параметров, вы можете сделать это программно, настроив @IBOutlet для просмотра прокрутки и обновив свойства с помощью точечной нотации.
scrollView.contentSize = CGSize(width: 100, height: 100)
Фактически, все, что вы можете сделать в Interface Builder, также можно сделать программно, включая настройку всех дочерних представлений и добавление их на экран.
let label = UILabel(frame: CGRect(x: 16, y: 16, width: 200,
height: 44))
view.addSubview(label) // Adds label as a child view to `view`
Этот тип настройки чаще всего выполняется в методе viewDidLoad() контроллера представления, который дает вам доступ к основному свойству view контроллера представления до его отображения на экране.
Хотя вы можете делать все программно, вы можете видеть, что Interface Builder может сэкономить вам много времени при настройке сложных представлений. По мере роста ваших проектов раскадровки помогают вам легче поддерживать настройки интерфейса. Кроме того, Interface Builder поддерживает создание сложных представлений, поддерживающих несколько размеров устройств, и все это в одном месте.
Вы узнаете гораздо больше об Interface Builder и раскадровках по мере прохождения остальной части курса.
Конструктор интерфейсов для лабораторного использования
Цель этой лабораторной работы - использовать Interface Builder и помощник редактора для создания базового представления.
Шаг 1
Создайте проект Xcode
- Создайте новый проект Xcode под названием “InterfaceBuilderBasics” и сохраните его в папке вашего проекта.
Шаг 2
Создайте Простой Вид С Помощью Конструктора Интерфейсов
- Откройте Конструктор интерфейсов, щелкнув Main раскадровку в навигаторе проекта.
- Нажмите на значок устройства в нижней части окна (текущий выбор указан рядом со значком) и выберите iPhone 13 Pro из появившегося всплывающего окна. Это позволяет вам увидеть макет вашего интерфейса таким, каким он будет отображаться на симуляторах iPhone 12 Pro и iPhone 13 Pro.
- Используйте то, что вы узнали на уроке, чтобы воссоздать следующее изображение. Вам нужно будет использовать ярлык и кнопку. 16
Шаг 3
Используйте Помощник редактора для подключения Вашего представления
- Теперь создайте вспомогательный редактор и убедитесь, что он отображает файл с именем ViewController. Создайте аутлет на основе вашего лейбла и назовите его mainLabel.
- Создайте действие с помощью своей кнопки и назовите его changeTitle.
- Внутри changeTitle напишите mainLabel.text = "This app rocks!". Запустите приложение и нажмите на кнопку. Что случилось с текстом?
Поздравляю! У вас не должно быть простого представления с текстом, который вы можете поменять местами в коде. Обязательно сохраните свой проект в папке проекта.
Отрывок из книги
Develop in Swift Fundamentals
Apple Education
https://books.apple.com/ru/book/develop-in-swift-fundamentals/id1581182804