Урок 2.10 Элементы Управления В Действии

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

В этом уроке вы будете использовать Interface Builder для добавления кнопок, переключателей и ползунков в сцену. Вы также создадите действия и выходы, напишете некоторый базовый код и получите представление о том, как эти инструменты работают вместе.

---

Что Вы Узнаете

• Как использовать кнопку для выполнения кода
• Как использовать переключатель и получить доступ к его значению
• Как использовать ползунок и получить доступ к его значению
• Как использовать текстовое поле и получить доступ к его значению
• Как реагировать на взаимодействие пользователя с распознавателями жестов
• Как программно подключить элементы управления к действиям

---

Терминология

• распознаватель жестов

---

Связанные Ресурсы

Ссылка на API: UIButton
Ссылка на API: UISwitch
Ссылка на API: UISlider
Ссылка на API: UITextField
Ссылка на API: Распознаватели жестов

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

Кнопки

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

1. Создайте новый проект под названием “CommonInputControls”, используя шаблон iOS "App".  ¹  

2. Откройте главную раскадровку Main. Затем найдите объект Button в библиотеке объектов.

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

4. Используя ярлык перетаскивания элемента управления Control-drag, добавьте @IBAction из кнопки в код контроллера просмотра. Не забудьте добавить действие в фигурные скобки, которые определяют класс ViewController. В новых файлах контроллера просмотра, подобных этому, большинство разработчиков добавляют новые действия под блоком кода viewDidLoad().  ³  

Используйте описательное имя для своего действия, например buttonTapped. Позже, когда вы посмотрите на код в файле ViewController, вы будете рады, что название действия дает вам представление о том, что его вызовет.

Наиболее естественное время для выполнения кода кнопкой - это когда пользователь нажимает на нее и отпускает касание из пределов кнопки. Вот почему “Touch Up Inside” является управляющим событием по умолчанию, когда вы создаете @IBAction с помощью кнопки. Вы также можете использовать управляющее событие "Запуск основного действия", которое будет запущено одновременно с "Подправить внутри". Если вы хотите, чтобы код выполнялся в ответ на другое управляющее событие, вы можете выбрать один из вариантов во всплывающем меню.

Помните, что когда вы создаете @IBAction, функция передается sender в качестве параметра. sender ссылается на конкретный элемент управления, который вызвал действие. В этом случае sender является нажатая кнопка.

 

@IBAction func buttonTapped(_ sender: Any) {
 
}

 

Когда вы знаете, что sender всегда будет объект одного и того же типа (например, кнопка в этом примере), вы можете изменить Any на определенный тип элемента управления (UIButton в этом примере). Чтобы внести это изменение, вы получите доступ к свойствам sender в @IBAction.

5. Используйте функцию print() для вывода строки текста на консоль, когда пользователь нажимает на кнопку.

 

print(”Button was tapped!”)

 

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

Запустите приложение в симуляторе и попробуйте нажать кнопку, которую вы только что создали. Вы должны увидеть печатный текст в области консоли.

Прямо сейчас текст на кнопке не имеет отношения к действию, которое она вызовет. Используйте Interface Builder, чтобы обновить текст кнопки до чего-то более описательного для кода, который она будет выполнять.

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

Переключатели

Переключатели используются для переключения одной опции. Вы можете использовать @IBAction для выполнения кода, когда переключатель переключается тем или иным способом. Или вы можете проверить, переключен ли переключатель в данный момент в положение on или off, обратившись к значению isOn из параметра sender или из @IBOutlet.

Добавьте переключатель в свой проект CommonInputControls и выведите, включен или выключен переключатель, когда пользователь переключает элемент управления.

1. Найдите объект Switch в библиотеке объектов и перетащите его в свою сцену.  ⁵  

2. Используя помощник редактора, добавьте @IBAction из переключателя в файл ViewController. Как и в случае действий с кнопками, используйте описательное имя, например switchToggled, и установите тип отправителя на UISwitch. Добавьте код, который будет выводиться на консоль независимо от того, был ли переключатель включен или выключен.

 

@IBAction func switchToggled(_ sender: UISwitch) {
    if sender.isOn {
        print(”The switch is on!”)
    } else {
        print(”The switch is off.”)
    }
}

 

3. Запустите приложение в симуляторе и переключите переключатель. Вы должны увидеть печатный текст в области консоли.

Ползунки

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

Добавьте ползунок в свой проект CommonInputControls и печатайте значение ползунка по мере его изменения.

1. Найдите объект слайдера в библиотеке объектов и перетащите его в свою сцену.  ⁶  

2. Используя помощник редактора, добавьте @IBAction из слайдера в ViewController. Используйте описательное имя, например sliderValueChanged, и задайте для типа отправителя значение UISlider. Добавьте некоторый код, который выведет значение ползунка на консоль.

 

@IBAction func sliderValueChanged(_ sender: UISlider) {
    print(sender.value)
}

 

3. Запустите приложение в симуляторе и переместите ползунок. Вы должны увидеть напечатанное значение в консоли.

Текстовые поля

Текстовые поля позволяют пользователю вводить небольшой объем текста, например, вводить имя пользователя или пароль. Например, вы используете текстовое поле при вводе темы в черновике нового электронного письма.

Добавьте метку и текстовое поле в свой проект "CommonInputControls" и установите текст метки на текущий текст в текстовом поле, когда пользователь нажимает клавишу Enter или Готово на клавиатуре.

 

1. Найдите объект текстового поля в библиотеке объектов и перетащите его в свою сцену.  ⁷  

2. Используя помощник редактора, добавьте @IBAction, используя событие “Инициированное основное действие” (“Primary Action Triggered”) из текстового поля в ViewController. Используйте описательное имя, например keyboardReturnKeyTapped, и задайте для типа отправителя значение UITextField. Используйте это действие для печати текущего текста поля.

 

@IBAction func keyboardReturnKeyTapped(_ sender: UITextField) {
    if let text = sender.text {
        print(text)
    }
}

 

3. Помните, что текстовые поля также могут запускать код, когда пользователь редактирует содержимое поля. Используя помощник редактора, добавьте @IBAction, используя управляющее событие “Редактирование изменено” из текстового поля в ViewController. Используйте описательное имя, например TextChanged, и задайте для типа отправителя значение UITextField. Используйте это действие для печати текущего текста поля.

 

@IBAction func textChanged(_ sender: UITextField) {
 
    if let text = sender.text {
        print(text)
    }
}

 

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

Действия и выходы

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

Например, у вас может быть выход для метки, которая обновляется действием кнопки.

В приведенных ниже шагах вы измените функцию buttonTapped, запускаемую нажатием кнопки, чтобы получить доступ к текущему состоянию isOn переключателя и текущему значению (value) ползунка.

1. Используя ту же технику перетаскивания элементов Control-drag управления в редакторе assistant, добавьте ссылки @IBOutlet для переключателя и ползунка. Разработчики обычно размещают ссылки на @IBOutlet над функцией viewDidLoad() в файле контроллера представления. Так же, как при присвоении имени @IBAction, вы должны выбрать описательное имя для вашего @IBOutlet. Вы могли бы подумать о том, чтобы выбрать переключатель (switch) и слайдер (slider) для этого @IBOutlet, но есть проблема с переключателем. Оказывается, что “switch” - это зарезервированное ключевое слово в Swift, поэтому лучше всего использовать toggle для присвоения имени @IBOutlet для переключателя.

 

@IBOutlet var toggle: UISwitch!
@IBOutlet var slider: UISlider!

 

2. Обновите функцию buttonTapped в @IBAction с помощью кнопки, чтобы вывести текущее состояние isOn и значение ползунка.

 

@IBAction func buttonTapped(_ sender: UIButton) {
    print(”Button was tapped!”)
 
    if toggle.isOn {
        print(”The switch is on!”)
    } else {
        print(”The switch is off.”)
    }
 
    print(”The slider is set to \(slider.value)”)
}

 

3. Запустите приложение в симуляторе и нажмите кнопку. Вы должны увидеть печатный текст в консоли.

Распознаватели жестов

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

В этом примере вы добавите распознаватель жестов касания поверх представления вашего контроллера просмотра. Для начала найдите в библиотеке объектов “жест”, чтобы просмотреть полный список доступных средств распознавания жестов.

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

Вы увидите, что распознаватель добавлен к контуру документа. Выберите распознаватель из Схемы документа и откройте инспектор атрибутов. Разные жесты будут содержать разный список свойств. Вы можете настроить количество нажатий, требуемых распознавателем, например однократное или двойное нажатие, а также количество касаний (или пальцев), необходимых для запуска любых действий, связанных с распознавателем. В этом примере вы хотите распознать одно касание одним пальцем, поэтому оставьте оба значения равными 1.

Используя помощник редактора, добавьте @IBAction из распознавателя в ViewController. Используйте описательное имя, например respontToTapGesture, и задайте для типа отправителя значение UITapGestureRecognizer. Следующая реализация respontToTapGesture определит, где пользователь нажал, когда было вызвано действие распознавателя, и выведет значение x/y на консоль.

 

@IBAction func respondToTapGesture(_ sender: 
UITapGestureRecognizer) {
    let location = sender.location(in: view)
    print(location)
}

 

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

Программные действия

Как Interface Builder связывает элементы управления с действиями? Полезно понять, как связать элементы управления с действиями с помощью кода. По крайней мере, это поможет вам понять работу, которую Interface Builder выполняет от вашего имени.

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

Нажмите на ‘x’ рядом с именем метода, разрывая связь между кнопкой и действием. Touch Up Inside больше не будет связан ни с какими методами.

Чтобы программно подключить кнопку к методу, вам понадобится ссылка на кнопку в коде. Используйте Interface Builder, чтобы создать @IBOutlet для кнопки.

 

@IBOutlet var button: UIButton!

 

Лучшее место для подключения кнопки к действию - это сразу после завершения загрузки представления. Добавьте следующий код в нижнюю часть viewDidLoad():

 

button.addTarget(self, action: #selector(buttonTapped(_:)), 
   for: .touchUpInside)

 

Метод addTarget(_:action:for:) подключит элемент управления к определенному действию, и для этого требуется три аргумента. Первый аргумент - это владелец функции, которую вы хотите выполнить. Владельцем метода buttonTapped(_:) является ViewController, или self. Второй аргумент - это “селектор”: имя, используемое для выбора метода для выполнения для объекта. Swift использует #selector в качестве своего синтаксиса для поиска определенного метода. Последний аргумент - это событие, которое должно вызвать действие. Точно так же, как вы видели ранее в инспекторе подключений, вы должны привязать свои действия к событию Touch Up Inside. (Другие элементы управления, такие как переключатели и ползунки, должны использовать событие изменения значения.)

Создайте и запустите свое приложение и убедитесь, что при нажатии на кнопку метод все еще выполняется. Сохраните свой проект CommonInputControls в папке проекта.

Лабораторная работа — базовые взаимодействия

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

Создайте новый проект под названием "Две кнопки", используя шаблон приложения iOS.

Шаг 1
Создайте Свой вид в Конструкторе интерфейсов

• В раскадровке перетащите текстовое поле из библиотеки объектов и поместите его в верхней части представления. Используйте направляющие макета, чтобы расположить метку так, чтобы она простиралась от левого поля до правого поля вида. Установите для текста-заполнителя значение “Введите текст для отображения в надписи ниже”.
• Перетащите две кнопки из библиотеки объектов. Поместите один чуть ниже текстового поля, а другой чуть ниже. Они должны располагаться по центру экрана. Измените заголовок верхней кнопки на “Установить текст”, а заголовок нижней кнопки - на “Очистить текст”.
• Перетащите метку из библиотеки объектов и поместите ее под последней кнопкой. Используйте направляющие макета, чтобы расположить метку так, чтобы она простиралась от левого поля до правого поля вида.
• В инспекторе атрибутов установите выравнивание текста метки по центру. Дважды щелкните по надписи и удалите существующий текст. Установите в новом тексте значение “Заполнитель”. Новый текст будет задан динамически, когда пользователь нажмет на одну из кнопок. Ты скоро до этого дойдешь.

Если вы запустите приложение, вы должны увидеть свое текстовое поле и две кнопки. Но если вы нажмете на них, ничего не произойдет. Это скоро изменится.

Шаг 2
Создание выходных точек и действий

• Если основная раскадровка Main по-прежнему выбрана, откройте помощник редактора. Файл реализации для вашего контроллера представления должен появиться рядом с холстом для раскадровки.
• Создайте @IBOutlet для метки в файле ViewController.
• Появится всплывающее окно. Убедившись, что для подключения установлено значение Outlet, назовите вывод метки label и установите для типа значение UILabel. Затем нажмите кнопку Подключиться.
• Создайте @IBOutlet для текстового поля в файле ViewController. Назовите текстовое поле вывода textField.
• Создайте @IBAction с помощью кнопки Set Text с именем setTextButtonTapped и кнопки Clear Text с именем clearTextButtonTapped.

Шаг 3
Добавьте Код для Своих действий

У ваших кнопок теперь есть действия, но они еще не выполняют никакого кода. На этом шаге вы, наконец, заставите свои действия что-то сделать.

• Выберите ViewController в навигаторе проекта. Вы будете выполнять действие в этом файле.
• Реализуйте действие setTextButtonTapped, чтобы установить label.text на текущий текст в текстовом поле.

Что ты только что сделал? Вы присвоили новую строку свойству text вашей метки. Теперь метка будет отображать строку при нажатии или нажатии кнопки Set Text.

• Реализуйте действие clearTextButtonTapped, чтобы установить для TextField.text и label.text пустые строки.

Теперь кнопка Очистить текст очистит как метку, так и текстовое поле.

• Запустите приложение и протестируйте его, добавив текст в текстовое поле и нажав кнопку Установить текст. Текст метки должен отражать текст в текстовом поле. Теперь нажмите кнопку Очистить текст. Текст как в текстовом поле, так и в метке должен быть очищен.

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

Подключение к дизайну

Откройте рабочую книгу по дизайну приложения и просмотрите раздел Карты для вашего приложения. Начните думать о том, где вы могли бы использовать кнопки, переключатели, ползунки и текстовые поля в каждой сцене. Добавьте комментарии в раздел карты или в новый пустой слайд в конце документа. Какие действия и торговые точки вам нужно будет создать? Нужно ли вашему приложению использовать распознаватели жестов?

В примере приложения Go Green для рабочей книги в приложении будет раздел задач, в котором пользователь может соревноваться с друзьями, принимать вызовы и получать награды за переработку. В разделе "Вызовы" будет кнопка для ввода кода, отправленного другом. При нажатии кнопки появится текстовое поле, в котором пользователь может ввести код для разблокировки вызова. Кнопка должна иметь действие и выход.

 

---

Отрывок из книги
Develop in Swift Fundamentals
Apple Education
https://books.apple.com/ru/book/develop-in-swift-fundamentals/id1581182804