Найти тему
Learn Swift
1 подписчик

Пример UITabBarController Swift

1 минута
2 прочтения

В данном примере рассмотрим создание UITabBarController c 3 экранами.

1. Начнем с создания нового проекта.

Открываем Xcode

Нажимаем Create a new Xcode project. В следующем окне Create.
Нажимаем Create a new Xcode project. В следующем окне Create.

Вводим название проекта - TabbarExample

Нажимаем Next
Нажимаем Next

В следующем окне выбираем папку в которой хотим создать проект. Нажимаем Create.

2. Удаляем автоматически созданные файлы в проекте ViewController

Красным выделено что необходимо удалить
Красным выделено что необходимо удалить

Выделяем элемент и нажимаем стереть на клавиатуре.

При удалении swift файла всплывет окно в котором выбираем Move to Trash
При удалении swift файла всплывет окно в котором выбираем Move to Trash

3. Добавляем UITabBarController в проект

-5
  • Выбираем Main.storyboard
  • Нажимаем +
  • В поиске ищем TabBarController
  • Нажимаем Enter или кликаем 2 раза
Видим результат
Видим результат

4. Для запуска проекта c TabBarController необходимо

  • выбрать TabBarController
  • поставить галочку Is Initial View Controller
  • запустить проект ( Command + r)
Появится ---> перед TabBarController это означает что первым экраном в Main.storyboard будет TabBarController.
Появится ---> перед TabBarController это означает что первым экраном в Main.storyboard будет TabBarController.

5. Добавить экран в TabBar

По умолчанию у нас 2 экрана в TabBar.

Для добавления элемента в Main.storyboard нажимаем + и находим ViewController
Для добавления элемента в Main.storyboard нажимаем + и находим ViewController

Теперь у нас есть 3 ViewController, его необходимо связать с TabBarController.

  • Зажимаем Ctr и мышкой тянем голубую линию от TabBarController в новый созданный ViewController.
-9
  • В появившемся окне выбираем view controllers
-10
  • Связь создана теперь у TabBarController 3 Item
-11

6. Покрасим контроллер в cинний цвет и дадим ему название

  • Выбираем в Main.storyboard в контроллере Item1 View
  • Переходим в инспектор атрибутов
  • Находим background нажимаем на поле и находим синий цвет
контроллер 1 стал синим
контроллер 1 стал синим

Меняем название:

  • Выбираем в Main.storyboard в контроллере Item 1 ( Tabbar item)
  • Переходим в инспектор атрибутов ( отмечу что атрибуты отличаются)
  • Находим поле ввода Title - пишем Синий - нажимаем Enter
Видим что название изменилось
Видим что название изменилось

По аналогии изменим цвета и подписи у других контроллеров

Проект запущен на симуляторе
Проект запущен на симуляторе
-14-2
-14-3

7. Добавим иконку в Tabbar

  • в Main.storyboard выбираем Tabbar Item - Зеленый
  • в атрибутах находим Image и выбираем любую из системных картинок
-15