Как пользователь компьютеров, бытовой техники и всевозможных устройств, вы уже знаете, что пользовательский интерфейс очень важен. Теперь, когда вы создаете свои собственные приложения на iOS, вы будете в значительной степени полагаться на UIKit, базовую платформу для создания пользовательских интерфейсов или пользовательских интерфейсов и управления ими.
UIKit определяет, как вы показываете информацию пользователю и как вы реагируете на взаимодействия пользователя и системные события. Он также позволяет вам работать с анимацией, текстом и изображениями. Помимо игр, если вы можете увидеть его на устройстве iOS, он, скорее всего, был создан с помощью UIKit.
В этом уроке вы узнаете о некоторых наиболее часто используемых элементах интерфейса в UIKit и о том, куда вы можете обратиться, чтобы узнать больше.
Что Вы Узнаете
- Почему UIKit является такой важной частью разработки приложений
- Название и внешний вид пяти распространенных представлений в приложениях
- Название и функциональность пяти элементов управления в приложениях
- Где узнать больше
Терминология
|
|
Связанные ресурсы
Рекомендации по пользовательскому интерфейсу
Платформа UIKit предоставляет важнейшие компоненты, необходимые для создания приложений для iOS и управления ими. Он включает в себя определения для всех объектов пользовательского интерфейса, систему обработки событий, которая реагирует на вводимые пользователем данные, и всю модель, которая позволяет приложениям запускаться в iOS.
Общие Системные Виды
Базовым классом для всех визуальных элементов, определенных в UIKit, является UIView, или представление. Вид определяет прямоугольную форму, которую можно настроить для отображения чего угодно на экране. Текст, изображения, линии и графика - все это зависит от UIView в качестве основы.
UIKit определяет десятки специальных подклассов UIView, которые выполняют определенные задачи. Например, UILabel отображает текст, UIImageView отображает изображение, а UIScrollView позволяет размещать прокручиваемый контент на экране.
Почти все экраны в приложении состоят из множества представлений, которые вместе составляют иерархию представлений.
Представления часто являются вложенными, как на предыдущей диаграмме иерархии представлений. Представление, содержащееся в другом представлении, называется дочерним представлением. Представление, содержащее одно или несколько представлений, называется родительским представлением. В этом примере каждая ячейка в списке является дочерним представлением табличного представления, и каждая ячейка является родительской для трех представлений: метки, отображающей название города, другой метки, отображающей связь часовых поясов, и представления изображения, отображающего изображение часов.
Чтобы отобразить вид на экране, вам нужно присвоить ему рамку, состоящую из размера и положения, и добавить его в иерархию представлений. Область внутри представления - это его границы. При добавлении представления в Interface Builder его фоновый цвет по умолчанию белый. При создании представления в коде фон по умолчанию является прозрачным. Вы можете установить новый цвет фона в любом случае.
Вот некоторые из атрибутов, которые можно изменить при работе с представлениями:
Далее, взгляните на некоторые из наиболее распространенных представлений, определенных в UIKit.
В этом разделе рассматриваются некоторые общие представления, с которыми вы будете работать с помощью UIView. Когда вы узнаете о различных представлениях, подумайте о приложениях, которые вы используете, и о том, какие представления можно использовать для создания их интерфейсов.
Метка (UILabel)
Метки используют статический текст для передачи информации пользователю.
Громкость звонка и оповещений можно регулировать с помощью кнопок регулировки громкости
Конфигурация
Документация разработчика UILabel
Представление изображения (UIImageView)
В представлении изображения отображается изображение или анимированная последовательность изображений. Некоторые люди путают представление изображения с самим изображением. Подумайте об этом так: точно так же, как надпись отображает текст, представление изображения отображает изображение.
Конфигурация
Документация разработчика UIImageView
Текстовое представление (UITextView)
Текстовое представление позволяет пользователю вводить текст в ваше приложение. Текстовые представления принимают и отображают несколько строк текста с поддержкой прокрутки и редактирования. Обычно текстовое представление используется для отображения большого объема текста, например текста сообщения электронной почты.
Конфигурация
Документация разработчика UITextView
Представление прокрутки (UIScrollView)
Представление прокрутки позволяет пользователю просматривать содержимое, выходящее за пределы представления. Обычно вы используете режим прокрутки, когда информация, которую вы хотите отобразить, превышает размер экрана устройства.
Когда пользователь взаимодействует с представлением прокрутки, на короткое время появляется индикатор вертикальной или горизонтальной прокрутки, указывающий на наличие дополнительного содержимого для просмотра.
Конфигурация
Документация разработчика UIScrollView
Табличное представление (UITableView)
Табличное представление представляет данные в виде одного прокручиваемого столбца строк и разделов, что позволяет пользователям легко перемещаться по группам информации. Табличные представления - отличный формат для отображения и редактирования иерархических списков информации.
Например, приложение "Почта" использует табличное представление для отображения сообщений электронной почты в папке "Входящие" пользователя, а приложение "Сообщения" использует табличное представление для отображения потоков сообщений, организованных по контактам.
Конфигурация
Табличные представления интересны тем, что вы можете настроить внешний вид самого табличного представления, а также внешний вид строк (или ячеек), которые оно отображает.
Вы узнаете больше о табличных представлениях и о том, как их настраивать, в будущих уроках.
Документация разработчика UITableView
Панели инструментов (UIToolbar)
Панель инструментов обычно появляется в нижней части экрана и отображает одну или несколько кнопок, называемых элементами панели кнопок. Пользователи могут выбрать кнопку или инструмент для выполнения действия в рамках данного представления.
Конфигурация
Вы можете настроить саму панель инструментов или элементы панели, которые она отображает. Каждый элемент панели состоит из заголовка и изображения и может быть включен или отключен программно.
Документация разработчика UIToolbar
Панели навигации (UINavigationBar)
Вы будете использовать панель навигации для представления основного содержимого вашего приложения в организованном виде, который, как вы надеетесь, будет интуитивно понятен пользователю. Панели навигации обычно отображаются в верхней части экрана с кнопками панели для навигации по иерархии экранов. Скорее всего, они будут включать заголовок и кнопку "Назад".
Конфигурация
Документация разработчика UINavigationBar
Панель вкладок (UITabBar)
Панель вкладок обеспечивает легкий доступ к различным представлениям в приложении. Он отображает несколько элементов панели вкладок, каждый из которых состоит из изображения значка и текста. Вы будете использовать панели вкладок в своем приложении для упорядочивания информации по определенной функции или задаче. Наиболее распространенный способ использования панели вкладок - это контроллер панели вкладок, который содержит свойство каждого контроллера представления, представляющее каждую сцену, которую вы хотите представить на панели вкладок. Когда пользователь нажимает на элемент, отображается новое представление, связанное с новой задачей.
Панели вкладок часто используются в приложениях, которые представляют несколько рабочих процессов или направлений действий. Например, в приложении App Store есть отдельные вкладки для просмотра рекомендуемых приложений, поиска определенного приложения или проверки наличия доступных обновлений.
Конфигурация
Поскольку вы чаще всего будете использовать панель вкладок в сочетании с контроллером панели вкладок, вы добавите сцены для отображения в контроллер. Контроллер представления для каждой сцены имеет свойство UITabBarItem, которое определяет текст и необязательное изображение, которые будут отображаться на панели вкладок. Чтобы добавить сцену к контроллеру панели вкладок и представлению панели вкладок, вы связываете ее со свойством ViewControllers контроллера панели вкладок в раскадровке.
Документация разработчика UITabBar
Элементы управления
В предыдущем разделе вы узнали об общих представлениях, которые отображают информацию для пользователя. Как насчет ответа на вводимые пользователем данные? Вы будете использовать инструменты в UIKit, известные как элементы управления, чтобы указывать приложению, что делать.
Думайте о элементе управления как об инструменте связи между пользователем и приложением. Когда пользователь взаимодействует с элементом управления, элемент управления запускает событие управления. Разные элементы управления запускают разные события управления.
После настройки элемента управления в Interface Builder вы настраиваете @IBAction, который реагирует на определенное событие элемента управления и позволяет выполнить блок кода. Чаще всего вы будете использовать Инициированное основное действие (UIControl.Event.primaryActionTriggered) управляющее событие. Это управляющее событие срабатывает при нажатии кнопки или при изменении значения элемента управления.
Элементы управления просты, понятны и знакомы пользователям, поскольку они присутствуют в большинстве приложений для iOS. Когда вы узнаете о некоторых различных подклассах UIControl на следующих страницах, подумайте о своих любимых приложениях и о том, как вы используете элементы управления для взаимодействия с ними.
Кнопки (UIButton)
Пользователи устройств iOS могут инициировать управляющее событие одним нажатием кнопки. Когда вы настраиваете кнопку, вы даете ей заголовок или изображение, которое передает, что будет делать кнопка при нажатии. Внешний вид кнопки меняется в зависимости от различных состояний нажатия: нажатие вниз и поднятие вверх.
Конфигурация
Основное событие управления запускается, когда пользователь отпускает кнопку после нажатия на нее. Кнопки также могут выполнять код на разных этапах нажатия, например, когда пользователь впервые касается кнопки, удерживает кнопку нажатой или отменяет нажатие, перетаскивая палец за пределы рамки кнопки, прежде чем поднять палец.
Документация разработчика UIButton
Сегментированные элементы управления (UISegmentedControl)
Сегментированный элемент управления - это горизонтальный набор из нескольких сегментов. Каждый сегмент функционирует как отдельная кнопка, позволяя пользователю выбирать из ограниченного, компактного набора опций. Этот пример из Maps позволяет пользователю изменять режим отображения с тремя вариантами выбора: Карта, Транзит или Спутник.
Конфигурация
Сегментированные элементы управления выполняют код при изменении значения элемента управления. Значение представляет, какой сегмент элемента управления выбран.
Документация разработчика UISegmentedControl
Текстовые поля (UITextField)
Текстовые поля позволяют пользователю вводить в приложение одну строку текста. Вы будете использовать их для сбора небольшого объема текста и выполнения некоторых действий на основе этого текста.
Конфигурация
Текстовые поля выполняют код, когда пользователь нажимает клавишу "Возврат" или "Готово" на клавиатуре или когда пользователь редактирует текст.
Документация разработчика UITextField
Слайдеры (UISlider)
Ползунки позволяют пользователям плавно и постепенно изменять значение — это полезно для элементов управления, которые изменяют такие параметры, как громкость динамика, яркость экрана или значения цвета. Пользователь управляет ползунком, перемещаясь от начального значения вдоль непрерывного диапазона между минимальным и максимальным значениями.
Конфигурация
Ползунки выполняют код, когда пользователь изменяет значение ползунка.
Документация разработчика UISlider
Переключатели (UISwitch)
Переключатель позволяет пользователю включать или выключать ту или иную опцию. Вы, вероятно, заметили — и использовали — переключатели во всем приложении "Настройки".
Конфигурация
Переключатели выполняют код, когда пользователь переключает элемент управления.
Документация разработчика UISwitch
Средства выбора даты (UIDatePicker)
Средства выбора даты предоставляют простой интерфейс для управления выбором даты и времени, позволяя пользователям быстро и эффективно указывать конкретную дату.
Конфигурация
Средства выбора даты выполняют код всякий раз, когда изменяется значение выбранной даты или времени.
Документация разработчика UIDatePicker
Представление контроллеров
UIKit определяет специальный класс, который управляет представлением, настраивает дочерние представления, управляет тем, что они отображают, и реагирует на взаимодействие с пользователем. Этот класс называется UIViewController.
Чаще всего каждый экран в приложении представлен сценой в раскадровке, и каждая сцена в раскадровке связана с подклассом UIViewController. Связанный подкласс UIViewController определен в файле .swift, который содержит всю логику, управляющую сценой. Каждый класс UIViewController имеет свойство view, которое представляет родительский вид сцены.
Вспомните проект освещения, который вы построили в первом блоке. Проект имеет единую раскадровку с одной сценой. Эта сцена была связана с подклассом UIViewController, называемым ViewController. Индикатор был переключен путем настройки свойства view ViewController. Это свойство view является тем же экземпляром UIView, что и родительский вид сцены в раскадровке.
Когда вы добавляли кнопку на экран, кнопка становилась дочерним видом основного вида сцены. Когда вы подключали действия и выходы, вы связывали их с файлом ViewController, который определял контроллер представления для этой сцены.
Вы узнаете, как создавать сложные контроллеры представлений, на последующих уроках. Но пока этого достаточно, чтобы понять, что каждый отдельный тип экрана, который вы видите в приложении, управляется другим типом контроллера просмотра.
Где узнать больше
Вы только что узнали о наиболее распространенных представлениях и элементах управления в UIKit. Но куда бы вы пошли, чтобы узнать больше об этих и других инструментах UIKit? Как вы узнали ранее, у Apple есть большие команды, занимающиеся написанием документации, чтобы помочь таким разработчикам, как вы, узнать больше о системных инструментах для создания приложений.
Большая часть информации для этого раздела взята из набора руководств под названием Human Interface Guidelines, которое было написано и поддерживается одной из этих команд. Если вы хотите узнать больше об UIKit, вы можете перейти по адресу developer.apple.com и найдите дополнительную информацию о темах этого урока.
Лабораторная работа - исследование UIKit
Цель этой лабораторной работы - определить различные представления и элементы управления в некоторых наиболее распространенных системных приложениях на iOS. Вы будете использовать Симулятор для просмотра настроек, Контактов, новостей и Календаря, а затем использовать Страницы для завершения опроса ваших результатов.
Шаг 1
Создайте файл Pages для Вашего исследования
- Создайте новый документ Pages под названием "2.7 UIKit Survey" и сохраните его в папке вашего проекта.
- Добавьте заголовки разделов для шести видов: надпись, изображение, текст, таблица, панель навигации и панель вкладок.
- Добавьте заголовки разделов для пяти элементов управления: кнопка, сегментированный элемент управления, текстовое поле, ползунок и переключатель.
Выполняя следующие шаги, по одному приложению за раз, вы будете добавлять скриншоты к только что созданным разделам. Для каждого приложения вам не нужно искать все виды и элементы управления, но убедитесь, что каждый раздел вашего опроса содержит хотя бы один скриншот.
Шаг 2
Просмотрите приложение "Настройки"
- Откройте приложение симулятора и нажмите кнопку Настройки.
- Перейдите в приложение "Настройки", чтобы найти примеры как минимум пяти представлений и как минимум трех элементов управления.
- Для каждого примера сделайте снимок экрана с помощью сочетания клавиш CommandS и добавьте снимок экрана в свой документ под правильным заголовком. Скриншоты сохраняются на вашем рабочем столе.
- Если вы столкнулись с незнакомым представлением или элементом управления, используйте Рекомендации по пользовательскому интерфейсу, чтобы идентифицировать его и добавить в документ под заголовком нового раздела.
Шаг 3
Повторите для Контактов, Новостей и Календаря
- Повторите поиск контактов, Новостей и Календаря.
Шаг 4
Просмотрите примеры
- Просмотрите документ с партнером или с кем-то, кто не знаком с разработкой iOS.
Подключитесь к дизайну
Откройте рабочую книгу по дизайну приложения и просмотрите раздел Карты для вашего приложения. Хотя вы только начинаете создавать прототипы экранов, вы можете начать думать о том, как будут выглядеть различные виды в вашем приложении и как вы можете управлять ими с помощью UIKit. Добавьте комментарии в раздел карты или в новый пустой слайд в конце документа. Какие общие представления, такие как вкладка или панель навигации, может использовать ваше приложение для отображения информации пользователю? Существуют ли какие-либо общие элементы управления, такие как кнопки или текстовые поля, которые могли бы управлять тем, как ваше приложение реагирует на вводимые пользователем данные?
В примере приложения Go Green для рабочей книги табличное представление может отображать прокрутку даты, количества мусора и отходов, а также журнал элементов за этот день. Пользователь может ожидать, что каждая дата будет функционировать как кнопка для управления тем, какую информацию он просматривает.
Отрывок из книги
Develop in Swift Fundamentals
Apple Education
https://books.apple.com/ru/book/develop-in-swift-fundamentals/id1581182804