Xcode уроки. Урок 3. Элементы управления и представления

В этом уроке разберём основные методы UIViewController, какие существуют элементы в среде Xcode и как добавить элементы из библиотеки объектов на окно будущего приложения.

Цель урока: Знакомство с элементами управления (представления) и с их базовыми классами для создания простого пользовательского интерфейса.

Шаблон приложения Single View имеет файл исходного кода: ViewController.swift. Для отображения содержимого файла, достаточно его выбрать в навигаторе проекта.

Этот файл определяет пользовательский подкласс UIViewController с именем ViewController. Этот класс просто наследует все поведение, определенное UIViewController. Чтобы переопределить или расширить это поведение, необходимо переопределить методы, определенные в UIViewController.

Методы UIViewController

Объект класса UIViewController (и его подклассы) поставляется с набором методов, которые управляют своей иерархией представлений. iOS автоматически вызывает эти методы в соответствующее время, когда контроллер просмотра переходит между состояниями. Этот процесс называется жизненным циклом ViewController’а.

iOS вызывает методы UIViewController в порядке, приведённом в таблице, в которой также содержится описание этих методов.

Элементы управления

UIControl – базовый класс для элементов управления, которые являются визуальными элементами, которые передают конкретное действие в ответ на взаимодействие пользователя. Элементы управления являются визуальными строительными блоками пользовательского интерфейса приложения. Основные элементы управления отображены в следующей таблице.

Изображение элемента	Класс элемента	Описание элемента
	UIButton	Элемент управления, который выполняет программный код или действия в ответ на взаимодействие с кнопкой. Внешний вид кнопок настраивается.
	UIDatePicker	Элемент управления, используемый для ввода значений даты и времени. Используется, чтобы пользователь мог ввести либо момент времени (календарную дату, время), либо временной интервал (например, для таймера).
	UIPageControl	Элемент управления, который отображает горизонтальную серию точек, каждая из которых соответствует странице документа приложения или другого объекта модели данных.
	UISegmentedControl	Горизонтальный элемент управления, который состоит из нескольких сегментов, каждый сегмент функционирует как дискретная кнопка.
	UISlider	Элемент управления, используемый для выбора одного значения из непрерывного диапазона значений.
	UIStepper	Элемент управления, используемый для увеличения или уменьшения значения.
	UISwitch	Элемент управления, который предлагает двоичный выбор, например On/Off.

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

Если для элементов управления основным классом является UIControl, то для элементов представления основным классом является UIView. Также корневым классом для UIControl является класс UIView. Основные элементы представления отображены в следующей таблице:

Создание простого проекта с графическим интерфейсом

Для создания простого проекта достаточно добавить из библиотеки объектов элементы UIButton и UILabel. UIButton является кнопкой, а UILabel отображает пользовательский текст. Для добавления достаточно «тянуть» нужные объекты на экран будущего приложения. Любой элемент можно найти в библиотеке, используя строку поиска:

Необходимо присвоить элементу Label текст «Hello World», а кнопке – «Press Me». У XCode есть два свойства, через которые можно соединить элементы интерфейса с программным кодом: IBActions (объект управления (действия) и IBOutlets (объект выхода)). [Первые две буквы IB обозначают Interface Builder]

Удерживая кнопку CTRL на клавиатуре, необходимо перетащить от элемента Label специальную синюю линию на открытый параллельно файл ViewController с кодом программы в свободное место в классе ViewController:

В появившемся окне необходимо выбрать в поле «Connection» тип «Outlet», т.к. label будет являться элементом выхода, потому что на нём отображается текст. После нажатия на кнопку «connect» можно увидеть, что Xcode сгенерирует строку кода. Этот код является некой переменной, которая позволит в дальнейшем получить доступ к созданной текстовой метке.

В программном коде появится упоминание об элементе Label:

Таким же образом производится привязка кнопки к коду. Используя клавишу CTRL, необходимо перенести линию в свободный участок кода и в появившемся окне выбрать тип соединения «Action» и дать имя кнопке – «buttonWasPressed», затем необходимо нажать кнопку «Connect»:

На этот раз Xcode сгенерирует целую функцию в программном коде. Теперь мы сообщили IDE всю необходимую информацию об имеющихся элементах.

Например, сделаем простое действие – при нажатии кнопки должно производиться изменение текста в label. Это очевидно, что работать необходимо с функцией, которая создалась при соединении кнопки с программным кодом (ButtonWasPressed ()). Необходимо добавить следующие строки в функцию:

1
2
3
4
5
6
7
8
9
10
11

@IBAction func buttonWasPressed (sender: AnyObject) 
{
  if textLabel.text == "Hello World" 
  {
  textLabel.text = "Bye, World!"
  }  
  else 
  {
  textLabel.text = "Hello World"
  }
}

Как видно, теперь можно получить доступ к текстовому элементу, используя выход textLabel, а изменять текст можно, обращаясь к свойству «text» этого элемента. Данный код выполняясь, будет проверять содержимое label, и если там содержится текст «Hello World», то текст поменяется на «Bye, World!», иначе он станет «Hello World». Соответственно, каждый раз тексты будет сменять друг друга всякий раз, когда пользователем нажимается кнопка.

Вопросы для проверки себя

1. Что такое жизненный цикл ViewController и какие методы вызываются.
2. Назовите базовые классы для элементов управления и представления.
3. Какой класс является корневым для элементов управления и представления?
4. Назовите несколько элементов управления и элементов представления.
5. Какой тип connection следует выбирать для элементов label и button?
6. С помощью какой клавиши и каким образом привязывается код к элементу интерфейса?