Навигация с UITabBarController

Навигация с UITabBarController - Start iOS | Уроки по разработке iOS приложений

Если Вы активно используете iOS устройства, то наверняка заметили что некоторые приложения поделены на разделы, между которыми можно переключаться с помощью вкладок внизу экрана. Примерами таких приложений являются App Store, Apple Music, Facebook, Instagram и т.д. Такой навигации можно с легкостью добиться с помощью еще одного контроллера навигации — UITabBarController.

Откроем проект TestNavi, который мы написали при знакомстве с UINavigationControllerUITabBarController можно добавить также с помощью двух способов:

1. Выделите Navigation Controller в сториборде и в верхнем меню Xcode перейдите по вкладкам Editor->Embed In и выберите опцию Tab Bar Controller. Результат выглядит следующим образом:

Навигация с UITabBarController

2. Перетащите Tab Bar Controller из Object library. В этом случае Xcode автоматически добавит UITabBarController с двумя вложенными UIViewController‘ами.

В этот раз воспользуемся первым способом. Добавим новый контроллер представления и поместим его под Navigation Controller‘ом:

Знакомство с UITabBarController

Расположение контроллеров в storyboard

Теперь «обернем» только что добавленный контроллер в UITabBarController. Чтобы это сделать, протяните «связь» точно также как и в предыдущем уроке. В появившемся меню выберите опцию view controllers:

Знакомство с UITabBarController

Добавление связи между контроллерами

Запустим приложение и посмотрим на результат. Теперь и в нашем аппе есть навигация на основе UITabBar (далее таббар), но нам еще нужно изменить заголовки табов и добавить иконки. Для этого нужно выделить таб во вложенных контроллерах и открыть раздел Attributes inspector в секции Utilities.

Навигация с UITabBarController

Раздел Attributes inspector

Xcode предоставляет нам несколько заготовок, которые, по мнению Apple, разработчики могут использовать чаще всего. Но как бы не так :). В любом случае стоит попробовать их использовать и именно это мы сделаем для секции с контроллером навигации. Выделите выпадающий список в опции System Item под секцией Tab Bar Item и выберите вариант, наиболее подходящий этой секции. По-нашему мнению, это будет опция More.

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

  • Title — заголовок таба.
  • Image — иконка.
  • Tag — тег таба.

Зададим опции Title значение «Home». Для иконки воспользуемся иконкой доступной по этой ссылке. Загрузите изображение в формате PNG и размером 32×32 px. Добавьте загруженную иконку в навигатор с помощью drag’n’drop. Вернем наше внимание в Attributes inspector и откроем выпадающий список в поле Image и выберем название иконки:

Навигация с UITabBarController

Выбор иконки для таба

В будущем старайтесь использовать иконки таббара с размером 50х50px. Именно этот размер рекомендуется использовать в Human Interface Guidelines от Apple.

Тому, кто создаёт интерфейс приложения в тёмных тонах, имеется возможность сделать таббар не белым, а тёмным. Для этого выделите UITabBarController и в Attributes Inspector замените опцию Bottom Bar на Translucent Black Tab Bar.

Запустите приложение и сравните результат. Правда ли похоже на приложение с полноценной навигацией?


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

Начнем с первого. Для того чтобы изменить последовательность разделов, достаточно с помощью drag’n’drop перетянуть табы в UITabBarController с места на место. Как всегда — всё просто.

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

В iOS для этих целей служит UIImageView. Перетащите его на контроллер из Object library и откройте Attributes inspector. В поле Image указывается изображение, подобно тому как мы задали иконку табу. Также обратите внимание на опцию Mode. С её помощью можно задать способ отображения картинки. Поэксперементируйте с ними.

Также Вас ничто не останавливает добавить уже знакомые объекты, к примеру UILabel. К слову, подойдите к этому процессу творчески. И не забудьте прислать скриншот того что у Вас получилось 😉