10 января

2019

3

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

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

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

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

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

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

Методы UIViewController

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

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

Порядок вызова
Название метода
Описание метода
1
initИнициализация.
2
loadViewЗагрузка и создание View.
3
viewDidLoadЭтот метод вызывается после того, как контроллер представления загрузил свою иерархию представлений в память. Используется этот метод для выполнения любой дополнительной настройки, требуемой контроллером.
4
viewWillAppearВызывается непосредственно перед представлением содержимого контроллера просмотра в иерархию представлений приложения. Используется этот метод для запуска любых операций, которые должны выполняться до представления содержимого на экране. Несмотря на название, только потому, что система вызывает этот метод, он не гарантирует, что просмотр содержимого станет видимым. Представление может быть закрыто другими видами или скрытыми. Ориентация экрана не определена.
5
viewWillLayoutSubviewsВызывается перед обновлением ориентации экрана.
6
viewDidLayoutSubviewsВызывается после обновления ориентации экрана.
7
ViewDidAppearВызывается сразу после того, как представление содержимого контроллера просмотра добавлено в иерархию представлений приложения. Используется этот метод для запуска любых операций, которые должны произойти, как только представление будет представлено на экране, например, выборка данных или отображение анимации. Несмотря на имя, только потому, что система вызывает этот метод, он не гарантирует видимость содержимого. Представление может быть закрыто другими видами или скрытыми. Этот метод просто указывает, что представление содержимого было добавлено в иерархию представлений приложения.
8
viewWillDisappearВызывается перед очисткой экрана. Этот метод используется для выполнения задач очистки.
9
viewDidDisappearВызывается сразу после того, как представление содержимого контроллера просмотра было удалено из иерархии представлений приложения.

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

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

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

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

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

Тип View
Класс элемента
Описание элемента
Container ViewsCollection ViewsОтображение вложенных представлений с помощью настраиваемого макета.
UITableViewВ представлении таблицы представлены данные в прокручиваемом списке из нескольких строк, которые можно разделить на разделы.
UIStackViewОптимизированный интерфейс для создания коллекции представлений в столбце или строке.
Container ViewsUIScrollViewПредставление, которое позволяет прокручивать и масштабировать свои скрытые представления.
Text ViewsUILabelПредставление, которое отображает одну или несколько строк текста только для чтения, которые часто используются вместе с элементами управления для описания их предполагаемой цели.
UITextFieldОбъект, который отображает редактируемую текстовую область в интерфейсе.
UITextViewПрокручиваемая многострочная область текста.
UIActivity IndicatorViewПредставление, показывающее, что выполняется загрузка.
Content ViewsUIImageViewОбъект, который отображает одно изображение или последовательность анимированных изображений в интерфейсе.
UIPickerViewПредставление, в котором отображается текст с эффектом «игрового автомата», чтобы показать один или несколько наборов значений.
UIProgressViewПредставление, которое отображает ход выполнения задачи с течением времени.
UIWebViewПредставление, встраивающее веб-контент в приложение.

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

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

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

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

1

В появившемся окне необходимо выбрать в поле «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. С помощью какой клавиши и каким образом привязывается код к элементу интерфейса?
Оцените пожалуйста статью:
Ужаснейшая статьяНичего полезногоОчень посредственная статьяНормальная статьяОтличная статья (3 оценок, среднее: 3,67 из 5)
Загрузка...