Урок 3.8 Контроллеры панели вкладок

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

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

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

Как правильно использовать контроллер панели вкладок
Как добавить контроллер панели вкладок
Как добавить контроллеры представления к контроллеру панели вкладок
Как настроить элементы панели вкладок

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

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

iOS Human Interface Guidelines: Tab Bars
API Reference: UITabBarController
API Reference: UITabBar
API Reference: UITabBarItem
API Reference: UIViewController tabBarItem

Контроллер панели вкладок позволяет организовать ваше приложение по отдельным режимам или разделам. Например, приложение Часы разделено на пять режимов: Мировое время, Будильник, Время сна, Секундомер и Таймер.

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

Добавление контроллера панели вкладок

Чтобы попрактиковаться в создании интерфейса панели вкладок, вы создадите простое приложение, которое перемещается между несколькими корневыми контроллерами представлений. (Это может быть хорошим шаблоном для будущих проектов, которые также используют контроллер панели вкладок.)

Начните с создания нового проекта под названием RainbowTabs, используя шаблон iOS App. Откройте Main storyboard и в Outline документа выберите View под View Controller. Используя инспектор атрибутов, установите цвет фона представления на System Red.

Далее вы создадите контроллер панели вкладок. С выбранным красным представлением нажмите кнопку "Embed In" на нижней панели инструментов и выберите "Tab Bar Controller".¹ В качестве альтернативы можно перейти в строку меню Xcode и выбрать Editor > Embed In > Tab Bar Controller.

Это действие помещает контроллер панели вкладок в начало сцены.

Контроллер панели вкладок поддерживает список вкладок через свое свойство viewControllers, массив корневых контроллеров представлений, отображаемых интерфейсом панели вкладок.

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

Добавление вкладок

Чтобы добавить другой элемент панели вкладок, выберите "View Controller" в библиотеке объектов и перетащите его на холст. Установите для контроллера представлений оранжевый фон. Далее вам нужно добавить новый контроллер представлений в массив viewControllers. Удерживая клавишу Control, перетащите от контроллера панели вкладок к оранжевому контроллеру представлений и отпустите кнопку мыши или трекпада. Во всплывающем окне вы увидите "view controllers", перечисленные под "Relationship Segue". Выберите этот вариант.³

Теперь вы должны увидеть второй элемент панели вкладок на контроллере панели вкладок.⁴

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

Элементы панели вкладок

Элемент панели вкладок состоит из двух визуальных элементов: изображения и метки. SDK iOS предоставляет несколько значков в стиле iOS, связанных с системно определенными текстами, называемыми системными элементами. Один из примеров — значок поиска, который вы видите на панели вкладок в App Store.

Вот полный список доступных системных заголовков с их соответствующими значками:

В вашем проекте RainbowTabs выберите элемент панели вкладок в красном контроллере представлений и откройте инспектор атрибутов. Выберите любой из системных элементов из всплывающего меню System Item.⁴ Обратите внимание, как элемент панели вкладок адаптируется к вашим различным выборам.

Теперь измените ориентацию устройства в Interface Builder на ландшафтную, используя кнопку "Orientation". Обратите внимание, как теперь заголовок элемента панели вкладок отображается справа от значка. В портретной ориентации элементы панели вкладок будут отображаться с значком прямо над заголовком элемента. В ландшафтной ориентации значок и заголовок будут отображаться рядом. На iPhone в ландшафтной ориентации панель вкладок будет тоньше и иметь меньшие изображения, если вы предоставите меньшее изображение свойству landscapeImagePhone. Таким образом, меньше контента будет скрыто панелью вкладок.

Настройка элементов панели вкладок

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

Прежде чем разрабатывать свои собственные значки, рассмотрите возможность использования SF Symbols. Эти векторные значки отлично работают во всех размерах, и у вас есть множество вариантов на выбор. Вы можете просмотреть полный набор символов, используя приложение SF Symbols. Вы также можете ввести общее имя символа — например, “circle” — в поле Image в инспекторе атрибутов, чтобы увидеть доступные варианты.

С выбранным элементом панели вкладок для красного представления введите “Red” в поле Title и введите “r.square” в поле Image. В меню выберите соответствующий символ. Изображение предоставлено через SF Symbols, что обозначено меткой “System” рядом со стрелкой.⁵ Вы также можете настроить атрибут Selected Image, чтобы различать выбранное состояние элемента панели вкладок (например, “r.square.fill” может быть хорошим выбором).

Продолжайте и внесите изменения в элемент панели вкладок для оранжевого контроллера представлений.⁶

Что, если вы хотите, чтобы ваш элемент панели вкладок указывал, что для этого представления или режима доступна новая информация? Вы можете добавить небольшой красный маркер с белым текстом, известный как значок (badge), к элементу панели вкладок.⁷ Используйте атрибут Badge для ввода информации.⁸

Настройка панели вкладок

Фон представлений в этом приложении однотонный, и панель вкладок будет отображаться как прозрачная в вашем приложении. Это может затруднить просмотр элементов панели вкладок или красных значков. Панель вкладок поддерживает параметр внешнего вида, который всегда будет отображать панель вкладок с размытым фоном. Нажмите на панель вкладок в контроллере панели вкладок⁹ и установите флажок рядом с опцией Scroll Edge¹⁰ в разделе Appearances инспектора атрибутов.

Программная настройка

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

Например, представьте, что вы хотите предупредить пользователя о том, что доступна новая информация. Ваше приложение должно обновить значок (badge) во время выполнения. Чтобы назначить значок в коде, установите свойство badgeValue в ненулевую строку. Вы можете получить доступ к экземпляру UITabBarItem вашего контроллера представлений через его свойство tabBarItem. Для более подробного объяснения вы можете обратиться к документации по UIViewController.

В ViewController вставьте следующую строку в функцию viewDidLoad():

tabBarItem.badgeValue = “!”

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

Значок привлекает внимание пользователя к этой вкладке. После того как пользователь просмотрел новую информацию, значок больше не нужен. Чтобы удалить значок, присвойте свойству badgeValue значение nil в методе viewWillDisappear(_:).

override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)

tabBarItem.badgeValue = nil
}

Соберите и снова запустите приложение, когда вы перейдете на оранжевую вкладку, вы увидите, что значок на красной вкладке исчезнет.

Еще больше элементов панели вкладок

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

Выберите "View Controller" в библиотеке объектов и добавьте три из них на холст. Установите цвет фона одного контроллера представлений на желтый, другого — на зеленый, и третьего — на синий. Если вам это удобно, вы можете изменить положение контроллеров представлений на холсте, чтобы они соответствовали порядку на панели вкладок.

Добавьте каждый из этих контроллеров представлений в свойство viewControllers контроллера панели вкладок.¹¹

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

Запустите ваше приложение в Симуляторе на устройстве iPhone. С пятью элементами на панели вкладок не остается много места. Как вы думаете, что произойдет, если вы добавите последний фиолетовый контроллер представлений к контроллеру панели вкладок?

Перетащите еще один контроллер представлений на холст, установите его фоновый цвет на фиолетовый и добавьте его в массив контроллеров представлений контроллера панели вкладок. Вы заметите, что в вашей сцене контроллера панели вкладок пятая вкладка заменена элементом вкладки "More" (Еще).¹²

Запустите ваше приложение и посмотрите, что получилось.

Что только что произошло? Всякий раз, когда вы добавляете больше контроллеров представлений, чем может отобразить панель вкладок, контроллер панели вкладок вставляет специальный контроллер представлений, известный как контроллер представлений "More" (Еще). Этот контроллер представлений перечисляет пропущенные контроллеры представлений в таблице, которая может расширяться, чтобы вместить любое количество элементов.

Контроллер представлений "More" необычен. Его нельзя настроить или выбрать. Он не появляется среди контроллеров представлений, управляемых контроллером панели вкладок. Он появляется по мере необходимости и в остальное время отделен от остального вашего контента.

Контроллер представлений "More" может быть весьма полезен для отображения дополнительных элементов вкладок, но также учитывайте, что вкладка "More" требует больше времени и усилий от пользователя. Гораздо лучшей практикой является тщательное планирование вашего приложения, чтобы включать только необходимые вкладки — минимальное количество, необходимое для вашего приложения и его иерархии информации. Для приложений на iPhone обычно считается, что максимум — пять вкладок; для приложений, предназначенных только для iPad, можно добавить еще несколько.

Свяжите вкладки с кодом

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

Начните с переименования существующего класса ViewController на что-то более описательное, например RedViewController.¹³ Обновите определение класса, затем переименуйте файл ViewController в RedViewController.¹⁴ Имя файла не обязательно должно совпадать с именем класса, но это упростит поиск определения класса в будущем для вас или других членов вашей команды.

Вам также нужно будет обновить класс контроллера для красного представления с ViewController на RedViewController, так как класс ViewController больше не существует. Выделите контроллер красного представления в Outline документа, затем используйте инспектор идентификации (Identity Inspector), чтобы установить пользовательский класс на новое имя.¹⁵

Теперь вы готовы добавить новые контроллеры представлений в ваш проект. Выберите в меню Xcode File -> New -> File (Command-N). Выберите "Cocoa Touch Class" в качестве начального шаблона, затем нажмите Next. Установите подкласс вашего нового класса на UIViewController, затем дайте вашему классу новое имя, например OrangeViewController.¹⁶ По традиции к названию вашего класса добавляется "ViewController", чтобы было ясно, какой тип объекта вы субклассифицируете. Нажмите Next, затем Create, чтобы завершить создание подкласса.

Теперь, когда у вас есть новый контроллер представлений для работы, вы можете обновить контроллер оранжевого представления до OrangeViewController. Откройте основной storyboard и выберите контроллер оранжевого представления в Outline документа. Используйте инспектор идентификации (Identity Inspector), чтобы установить пользовательский класс на OrangeViewController. Повторите шаги создания нового подкласса UIViewController для каждой вкладки и назначьте каждому контроллеру представлений уникальный пользовательский класс.

Задание

Измените контроллер панели вкладок, чтобы он использовал три навигационных контроллера в качестве своих viewControllers. Корневым контроллером каждого навигационного контроллера должен быть один из цветных контроллеров представлений.

Лабораторная работа — Обо мне

Цель

Цель этой лабораторной работы — использовать контроллер панели вкладок для отображения различных режимов информации или операций. Вы создадите приложение, которое отображает разные типы информации о себе в отдельных вкладках. Это приложение похоже на приложение "Hello", которое вы создали ранее — не стесняйтесь использовать те же изображения и информацию.

Создайте новый проект под названием “AboutMe”, используя шаблон iOS App. По мере выполнения следующих шагов помните, что это приложение — как следует из названия — все о вас, так что сделайте его личным.

Шаг 1

Настройте свои контроллеры представлений

Перетащите как минимум три контроллера представлений из библиотеки объектов. Каждый контроллер представлений будет представлять одну из сторон вашей жизни. Пример приложения использует один контроллер представлений для биографии, один для семьи и один для увлечений.
Назначьте каждому контроллеру представлений цвет фона. Или, если хотите сделать что-то более сложное, перетащите элемент "Image View", чтобы он покрывал весь контроллер представлений, и установите фоновое изображение.
На каждом контроллере представлений перетащите метки (Labels), чтобы предоставить текст о себе, своей семье, увлечениях или любой другой личной информации, которую вы решили включить. Хотите включить несколько фотографий? Перетащите элементы "Image View" и установите их изображения. Обязательно добавьте ограничения (constraints), которые будут поддерживать ваше представление упорядоченным на разных размерах экрана и ориентациях.

Шаг 2

Настройте контроллер панели вкладок

Выберите все ваши контроллеры представлений и встроите их в контроллер панели вкладок.
Дайте каждой вкладке заголовок, соответствующий личной информации, которую вы добавляете в этом разделе.
Установите значок вкладки на каждой вкладке. Вы можете использовать предоставленные ресурсы, использовать SFSymbols или найти свои собственные значки.
Запустите приложение. Убедитесь, что заголовки и значки вкладок отображаются.

Поздравляем! Вы создали приложение, которое рассказывает немного о вас. Обязательно сохраните его в папке ваших проектов.

Связь с дизайном

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

В примере приложения Go Green из рабочей тетради панель вкладок использовалась бы для переключения между представлениями "My Forest" (Мой лес), журналом, заданиями, достижениями и магазином (emporium).

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