Разработка простейшего UI
В предыдущей статье мы остановились на обзоре сториборда Main.storyboard. Продолжим.
При разработке приложений Xcode позволяет использовать дефолтные шаблоны графических элементов, таких как текстовое поле, надпись, свитчер, степпер, кнопка и многие другие. Для доступа к библиотеке объектов нажмите кнопку Library, расположенную в Toolbar, после чего перед вами откроется окно со всеми доступными элементами.
Первым делом на сцене необходимо разместить кнопку:
- В библиотеке объектов найдите элемент Button.
- Перетащите его прямо из библиотеки в центр сцены в Interface Builder. При этом во время позиционирования на сцене для удобства будут отображаться синие вертикальная и горизонтальная линии, с помощью которых удобно располагать или центрировать элементы.
- Теперь в Document outline появился новый элемент Button, соответствующий только что размещенной кнопке.
Каждый графический элемент, входит в состав фреймворка UIKit и описывается конкретным классом. С одной стороны, у вас есть графическое изображение элемента, а с другой — его программное представление (класс). Любой графический элемент описывается классом, дочерним для UIView. UIView — это один из базовых классов фреймворка UIKit, на основе которого строятся все графические элементы, входящие в состав фреймворка. Так, только что размещенная кнопка представлена классом UIButton, который наследуется от UIView.
Обратите внимание, верстка в сториборде осуществляется на iPhone 11, указанном в нижней части Interface Builder. Выберите другое устройство в списке доступных устройств. Например, если был выбран iPhone 11, то теперь выберите iPhone SE 1 поколения.
Теперь кнопка не отображается на экране.
И на первый взгляд это удивительно. В чем же проблема? Версия устройства, которая указывается в нижней части Interface Builder, определяет для экрана какого конкретно устройства производится верстка интерфейса. Так, размещая кнопку на сцене, мы позиционировали ее в центре экрана iPhone 11 (или другой версии, указанной в нижней части Interface Builder). При этом для кнопки были зафиксированы конкретные координаты (отступ от верхнего левого угла в пикселях, а если быть точным, в поинтах). При запуске программы на другой версии iPhone координаты были сохранены, но они уже не соответствовали центру (так как разрешение iPhone SE 1 поколения отличается от iPhone 11).
Xcode имеет специальные механизмы, позволяющие одновременно верстать сцены сразу под большое количество устройств. Таким образом, вам потребуется задавать не конкретные координаты для каждого разрешения, а общие типовые ограничения, которым должен соответствовать графический элемент на любом запущенном устройстве. Знакомство с этими механизмами будет в следующих статьях.
Сейчас же сделаем так, чтобы кнопка отображалась в центре на любом устройстве, на котором будет запущено приложение.
- Выберем снова iPhone 11 в списке доступных устройств в нижней части Interface Builder.
- Выделим кнопку на сцене.
- Нажмем кнопку Align в нижней части Interface Builder.
- В открывшемся окне выделим пункты Horizontally in Container и Vertically in Container.
- Нажмем кнопку Add 2 Constraints.
Мы только что добавили ограничения (constraints), которые заставят кнопку автоматически позиционироваться в центре экрана любого запущенного устройства (любой версии iPhone с любым разрешением). Ограничения — довольно сложная, но при этом очень интересная тема. С помощью ограничений можно определять различные правила позиционирования элементов: отступы друг от друга, отступы от границ экрана, выравнивание и многое другое.
Запустим приложение на симуляторах различных устройств, тем самым убедившись, что установленное ограничение работает и кнопка всегда располагается в центре экрана.
Теперь перейдем к наполнению приложения функциональными возможностями.
UIViewController
В состав фреймворка UIKit входит класс UIViewController. На его основе разрабатываются дочерние классы, которые связываются со сценами в storyboard, таким образом создавая связь между кодом и графическим представлением. Когда вы создаете новую сцену, то должны самостоятельно создать новый класс-потомок UIViewController и связать его с элементом View Controller на сцене (отображается в составе сцены в Document Outline). Так как при создании проекта мы выбрали шаблон App, то он уже содержит одну сцену и связанный с ней класс ViewController, который можно найти в файле ViewController.swift.
В Project Navigator щелкните на файле ViewController.swift, после чего его содержимое отобразится в Project Editor.
В коде файла присутствует класс ViewController, потомок UIViewController.
Класс ViewController связан с элементом View Controller на сцене. Именно с его помощью мы и будем управлять сценой.
Вернемся к файлу ViewController.swift. Обратите внимание, что в верхней строчке файла происходит импорт фреймворка UIKit.
UIKit обеспечивает функциональные возможности для построения и управления пользовательским интерфейсом, анимацией, текстом, изображениями для ваших приложений, а также для обработки событий, происходящих во время работы пользователя.
Класс UIViewController входит в состав UIKit и доступен в коде только потому, что произведен импорт данного фреймворка. Если из кода исключить строку import UIKit, то Xcode сообщит об ошибке доступа к объявленному классу UIViewController.
Родительский класс UIViewController имеет большое количество методов, которые могут быть переопределены в потомках. Каждый из этих методов служит для решения конкретной задачи.
Так, например, метод viewDidLoad(), описанный в классе ViewController, позволяет выполнить программный код после того, как сцена загружена в память устройства и готова отобразиться на его экране (но еще не отрисована и не отображена). Несмотря на то что viewDidLoad() не содержит какой-либо код, а только вызывает одноименный родительский метод, при необходимости он может быть расширен для реализации требуемой функциональности.
Доступ UI к коду
Добавим в приложение функциональные возможности, а именно вывод в консоль текстового сообщения при нажатии на кнопку. Ранее мы говорили, что класс ViewController ассоциирован с элементом View Controller сцены. Соответственно, для расширения возможностей сцены необходимо работать именно с этим классом. Объявим в нем новый метод showLog(), использующий внутри своей реализации функцию print(_:), выводящую строку "Did tap Log Button".
Для того чтобы появилась возможность создать связь между методом класса и элементом сцены, используется определитель типа @IBAction, который указывается перед определением метода. Добавим @IBAction к методу showLog().
С помощью ключевого слова @IBAction отмечаются методы, которые могут быть связаны с графическими элементами на сцене. То есть, мы можем связать кнопку на сцене с вызовом метода таким образом, чтобы при нажатии на нее вызывался данный метод.
Так как метод showLog() помечен с помощью экшена, мы можем организовать его вызов по событию «нажатие на кнопку». Для этого необходимо перейти в файл Main.storyboard и выбрать вкладку Assistant.
Удерживая клавишу Control на клавиатуре, с помощью мыши тянем кнопку со сцены в соседнюю область, в которой открыт файл ViewController.swift.
Таким образом создалась связь между кнопкой на сцене и методом showLog(). Причем Xcode автоматически привязывает вызов метода showLog() к событию - Touch Up Inside - «нажатие на кнопку».
Доступ кода к UI
Чтобы обеспечить доступ элементов сцены к методам класса, используется ключевое слово @IBAction. Для создания обратной связи (реализовать доступ к графическому элементу из кода) служит ключевое слово @IBOutlet.
Давайте изменим текст кнопки. Для этого есть два варианта действий.
- В Main.storyboard дважды щелкнуть по кнопке на сцене и ввести желаемый текст.
- Программно, создав связь между кнопкой и классом ViewController, соответствующему View Controller сцены.
После этого у класса ViewController появится новое свойство logButton.
Внутри класса вы можете обратиться к свойству logButton для доступа к элементу UIButton на сцене с целью изменения его параметров. Реализуем в методе viewDidLoad() изменение текста кнопки.
Теперь запустим приложение. На экране видим кнопку с текстом Log Button, который задали программно через свойство класса ViewController. Щелкнув по кнопке, будет вызван метод showLog() класса ViewController, а значит, произойдет вывод фразы "Did tap Log Button" в консоль.
В следующей части мы продолжим изучать инструменты для создания пользовательского интерфейса, узнаем, что такое xib-файл, создадим собственное представление в нем и добавим его на сториборд для отображения на экране.