Построение навигации в iOS: от базовых контроллеров к координаторам

Для кого эта статья:

• Разработчики мобильных приложений, особенно на платформе iOS
• Специалисты по UX/UI, интересующиеся подходами к пользовательскому опыту

• Студенты и начинающие программисты, желающие улучшить свои навыки в разработке приложений для iOS

  Разработка приложения и навигация

  Пройдите тест, узнайте какой профессии подходите

  Сколько вам лет

  0%

  До 18

  От 18 до 24

  От 25 до 34

  От 35 до 44

  От 45 до 49

  От 50 до 54

  Больше 55

Разработка приложения — это как строительство дома. Структура, основание и навигация определяют, насколько удобным будет этот дом для жильцов. В мире iOS навигация — это не просто кнопки и экраны, а целая философия пользовательского опыта, определяющая, вернётся ли пользователь в ваше приложение или удалит его после первого запуска. 📱 Грамотно выстроенная навигация делает приложение интуитивно понятным, даже если за ним стоит сложная бизнес-логика. Давайте разберёмся в тонкостях создания безупречной навигации в iOS, которая превратит ваше приложение из обычного продукта в произведение программного искусства.

Хотите создавать интуитивные и мощные навигационные системы для iOS-приложений? Обучение веб-разработке от Skypro даст вам основательную базу в программировании, которую вы сможете применить и в мобильной разработке. Наши выпускники успешно переносят принципы построения архитектуры веб-приложений на iOS-платформу, создавая продукты с безупречной навигацией. Начните своё путешествие в мир разработки уже сегодня!

Основы навигации в iOS: архитектура и принципы Swift

Навигация в iOS построена на принципах, которые Apple тщательно разрабатывала годами. Эти принципы — не прихоть дизайнеров, а результат глубокого анализа поведения пользователей и стремления создать наиболее интуитивный опыт взаимодействия с устройством.

Архитектура навигации в iOS базируется на трёх фундаментальных концепциях:

• Иерархическая навигация — движение "вглубь" контента и возврат назад
• Плоская навигация — переключение между несколькими равнозначными разделами
• Модальная навигация — временное отвлечение от основного контента для выполнения задачи

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

Михаил Петров, iOS Team Lead Помню свой первый серьезный проект — приложение для банка с десятками экранов и сложной логикой переходов. Я тогда был уверен, что достаточно просто настроить storyboard со всеми возможными segue, и задача решена. Месяц спустя, когда заказчик попросил добавить новый функционал, который требовал перестройки навигационных потоков, я понял свою ошибку. Приложение превратилось в запутанный лабиринт, где малейшее изменение вызывало каскад ошибок.

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

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

Swift предлагает набор инструментов для управления жизненным циклом контроллеров представления, что критично для правильной реализации навигации:

• viewDidLoad() — вызывается после загрузки представления
• viewWillAppear(_:) — вызывается перед появлением представления на экране
• viewDidAppear(_:) — вызывается после появления представления
• viewWillDisappear(_:) — вызывается перед исчезновением представления
• viewDidDisappear(_:) — вызывается после исчезновения представления

Правильное использование этих методов позволяет элегантно управлять состоянием приложения при переходах между экранами. Например, загрузку данных лучше выполнять в viewDidLoad(), а обновление интерфейса — в viewWillAppear(_:).

UINavigationController: стек навигации в iOS-приложениях

UINavigationController — это краеугольный камень иерархической навигации в iOS. Он управляет стеком view-контроллеров, позволяя пользователям переходить вглубь и возвращаться обратно в последовательной манере. 📚

Стек навигации работает по принципу "последним пришёл — первым ушёл" (LIFO). Когда вы добавляете новый контроллер в стек с помощью pushViewController(_:animated:), он становится видимым, а предыдущий сдвигается влево. При вызове popViewController(animated:) текущий контроллер удаляется, и предыдущий снова становится видимым.

Вот базовый пример создания и настройки UINavigationController:

let rootViewController = RootViewController()
let navigationController = UINavigationController(rootViewController: rootViewController)

// Настройка внешнего вида
navigationController.navigationBar.prefersLargeTitles = true
navigationController.navigationBar.tintColor = .systemBlue

// Добавление кнопки в панель навигации
let addButton = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: #selector(addItem))
rootViewController.navigationItem.rightBarButtonItem = addButton

// Переход к новому экрану
func showDetailScreen(for item: Item) {
let detailViewController = DetailViewController(item: item)
navigationController.pushViewController(detailViewController, animated: true)
}

Помимо базовых переходов push и pop, UINavigationController предлагает несколько специализированных методов:

• popToRootViewController(animated:) — возврат к корневому контроллеру
• popToViewController(_:animated:) — возврат к определённому контроллеру в стеке
• setViewControllers(_:animated:) — полная замена стека контроллеров

Последний метод особенно полезен для реализации глубоких ссылок (deep links), когда вам нужно настроить сложное состояние навигации в ответ на открытие приложения по специальной ссылке.

Важно понимать, что UINavigationController не только управляет переходами, но и предоставляет навигационную панель (navigation bar), которая содержит заголовок экрана, кнопку возврата и может быть дополнена пользовательскими элементами управления с помощью UIBarButtonItem.

TabBarController и SplitViewController: многоэкранный опыт

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

Настройка UITabBarController предельно проста:

let homeVC = UINavigationController(rootViewController: HomeViewController())
homeVC.tabBarItem = UITabBarItem(title: "Главная", image: UIImage(systemName: "house"), tag: 0)

let profileVC = UINavigationController(rootViewController: ProfileViewController())
profileVC.tabBarItem = UITabBarItem(title: "Профиль", image: UIImage(systemName: "person"), tag: 1)

let settingsVC = UINavigationController(rootViewController: SettingsViewController())
settingsVC.tabBarItem = UITabBarItem(title: "Настройки", image: UIImage(systemName: "gear"), tag: 2)

let tabBarController = UITabBarController()
tabBarController.viewControllers = [homeVC, profileVC, settingsVC]

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

Для более сложных интерфейсов, особенно на iPad, используется UISplitViewController. Он разделяет экран на две или три части, показывая список и детали одновременно:

let masterViewController = MasterViewController()
let detailViewController = DetailViewController()
let navigationController = UINavigationController(rootViewController: masterViewController)

let splitViewController = UISplitViewController()
splitViewController.preferredDisplayMode = .oneBesideSecondary
splitViewController.viewControllers = [navigationController, detailViewController]

В iOS 14 Apple представила UISplitViewController с тремя колонками, что позволяет создавать ещё более сложные интерфейсы, похожие на macOS:

// iOS 14+
let splitViewController = UISplitViewController(style: .doubleColumn)
splitViewController.preferredDisplayMode = .twoBesideSecondary
splitViewController.setViewController(sidebarNavigationController, for: .primary)
splitViewController.setViewController(contentNavigationController, for: .secondary)
splitViewController.setViewController(detailNavigationController, for: .supplementary)

Важные аспекты при работе с многоэкранными контроллерами:

• Разделение ответственности — каждый раздел должен иметь четкую, отдельную функцию
• Консистентность — дизайн и поведение должны быть предсказуемыми между разделами
• Сохранение состояния — каждая вкладка должна запоминать свое состояние при переключении
• Оптимизация ресурсов — ленивая загрузка контента для неактивных вкладок

Анна Соколова, iOS UX Консультант Работая над медицинским приложением для клиник, мы столкнулись с интересной проблемой. Приложение имело 5 основных разделов, и первоначально мы реализовали их через стандартный UITabBarController. Однако тестирование показало, что пользователи (в основном врачи старшего возраста) испытывали трудности с навигацией — они просто не замечали вкладки внизу экрана.

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

Результат удивил всех — время, затрачиваемое пользователями на навигацию, сократилось на 40%, а количество ошибочных переходов уменьшилось на 75%. Этот опыт научил меня важному принципу: иногда лучшее UX-решение — это отход от стандартных паттернов в пользу того, что реально работает для ваших конкретных пользователей.

Модальные переходы и кастомная анимация в Swift

Модальные переходы в iOS — это способ временно перевести фокус пользователя на новую задачу, требующую его полного внимания. Они словно говорят: "Пожалуйста, заверши это действие перед тем, как продолжить". 🎭

Основной способ представить контроллер модально:

let viewController = FormViewController()
viewController.modalPresentationStyle = .pageSheet
viewController.modalTransitionStyle = .coverVertical
present(viewController, animated: true, completion: nil)

iOS предлагает несколько стилей представления модальных экранов:

• .fullScreen — полностью закрывает предыдущий экран
• .pageSheet — частично закрывает предыдущий экран, с возможностью свайпа вниз для закрытия (iOS 13+)
• .formSheet — небольшое окно в центре экрана, особенно полезно на iPad
• .popover — всплывающее меню, привязанное к определенному элементу
• .automatic — система выбирает подходящий стиль в зависимости от контекста

Для закрытия модального экрана используется метод dismiss(animated:completion:).

Но стандартные переходы — лишь начало. Настоящая магия начинается с кастомных анимаций переходов. Для их создания iOS предоставляет протокол UIViewControllerAnimatedTransitioning:

class CustomTransition: NSObject, UIViewControllerAnimatedTransitioning {
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 0.5
}

func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
guard let toView = transitionContext.view(forKey: .to) else { return }
let containerView = transitionContext.containerView

// Начальное состояние
toView.alpha = 0
containerView.addSubview(toView)

// Анимация
UIView.animate(
withDuration: transitionDuration(using: transitionContext),
animations: {
toView.alpha = 1
},
completion: { _ in
transitionContext.completeTransition(!transitionContext.transitionWasCancelled)
}
)
}
}

Чтобы использовать кастомный переход, необходимо реализовать протокол UIViewControllerTransitioningDelegate:

class ViewController: UIViewController, UIViewControllerTransitioningDelegate {
func showModal() {
let modalVC = ModalViewController()
modalVC.transitioningDelegate = self
modalVC.modalPresentationStyle = .custom
present(modalVC, animated: true)
}

func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return CustomTransition()
}

func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return DismissTransition()
}
}

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

class InteractiveTransitionManager: UIPercentDrivenInteractiveTransition {
var viewController: UIViewController
var isInteractive = false

init(viewController: UIViewController) {
self.viewController = viewController
super.init()
setupGestureRecognizer()
}

private func setupGestureRecognizer() {
let gesture = UIPanGestureRecognizer(target: self, action: #selector(handlePan(_:)))
viewController.view.addGestureRecognizer(gesture)
}

@objc func handlePan(_ gesture: UIPanGestureRecognizer) {
// Логика обработки жеста
}
}

Модальные переходы особенно эффективны для следующих случаев:

• Формы и настройки, требующие фокусировки внимания
• Подтверждения важных действий (удаление, публикация)
• Детальный просмотр контента (фото, видео)
• Временные сообщения и уведомления

Координаторный паттерн и Deep Linking в iOS-разработке

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

Суть паттерна проста — вынести всю логику навигации из view контроллеров в отдельные объекты-координаторы, которые знают, как и когда показывать определённые экраны.

Базовая структура координатора выглядит так:

protocol Coordinator: AnyObject {
var childCoordinators: [Coordinator] { get set }
var navigationController: UINavigationController { get set }

func start()
func addChildCoordinator(_ coordinator: Coordinator)
func removeChildCoordinator(_ coordinator: Coordinator)
}

extension Coordinator {
func addChildCoordinator(_ coordinator: Coordinator) {
childCoordinators.append(coordinator)
}

func removeChildCoordinator(_ coordinator: Coordinator) {
childCoordinators = childCoordinators.filter { $0 !== coordinator }
}
}

Конкретный координатор для управления потоком функциональности:

class AuthCoordinator: Coordinator {
var childCoordinators: [Coordinator] = []
var navigationController: UINavigationController

init(navigationController: UINavigationController) {
self.navigationController = navigationController
}

func start() {
showLoginScreen()
}

func showLoginScreen() {
let viewController = LoginViewController()
viewController.coordinator = self
navigationController.pushViewController(viewController, animated: true)
}

func showRegistrationScreen() {
let viewController = RegistrationViewController()
viewController.coordinator = self
navigationController.pushViewController(viewController, animated: true)
}

func finishAuth() {
// Сообщаем родительскому координатору, что аутентификация завершена
}
}

Координаторный паттерн особенно хорошо работает в сочетании с deep linking — механизмом, позволяющим открывать приложение на определённом экране по внешней ссылке. Вот как можно реализовать обработку deep link с использованием координаторов:

class AppCoordinator: Coordinator {
var childCoordinators: [Coordinator] = []
var navigationController: UINavigationController
let window: UIWindow

init(navigationController: UINavigationController, window: UIWindow) {
self.navigationController = navigationController
self.window = window
}

func start() {
if UserService.isLoggedIn {
showMainFlow()
} else {
showAuthFlow()
}
}

func showAuthFlow() {
let authCoordinator = AuthCoordinator(navigationController: navigationController)
addChildCoordinator(authCoordinator)
authCoordinator.start()
}

func showMainFlow() {
let mainCoordinator = MainCoordinator(navigationController: navigationController)
addChildCoordinator(mainCoordinator)
mainCoordinator.start()
}

func handleDeepLink(_ deepLink: DeepLink) {
switch deepLink.type {
case .product:
guard let productId = deepLink.parameters["productId"] else { return }
showProduct(withId: productId)
case .order:
guard let orderId = deepLink.parameters["orderId"] else { return }
showOrder(withId: orderId)
}
}

private func showProduct(withId id: String) {
// Находим или создаем нужных координаторов и показываем экран продукта
}

private func showOrder(withId id: String) {
// Аналогично для заказа
}
}

Сравнение традиционного подхода с координаторным паттерном:

Преимущества координаторного паттерна становятся особенно очевидны при интеграции с Universal Links и Custom URL Schemes, которые позволяют открывать ваше приложение из браузера или других приложений:

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey : Any] = [:]) -> Bool {
let deepLink = DeepLinkParser.parse(url: url)
appCoordinator.handleDeepLink(deepLink)
return true
}

func application(_ application: UIApplication, continue userActivity: NSUserActivity, restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void) -> Bool {
if userActivity.activityType == NSUserActivityTypeBrowsingWeb,
let url = userActivity.webpageURL {
let deepLink = DeepLinkParser.parse(url: url)
appCoordinator.handleDeepLink(deepLink)
return true
}
return false
}

В SwiftUI подход к координации немного отличается из-за декларативной природы фреймворка, но принципы остаются теми же — централизация логики навигации и отделение её от представления:

class NavigationCoordinator: ObservableObject {
@Published var path = NavigationPath()

func showProductDetails(product: Product) {
path.append(product)
}

func showCheckout(cart: Cart) {
path.append(cart)
}

func popToRoot() {
path = NavigationPath()
}
}

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

Читайте также

• Swift для iOS: пошаговое создание первого мобильного приложения
• Управляющие структуры Swift: от if-else до сложных switch-кейсов
• Функции и замыкания в Swift: основы для iOS-разработчика
• Swift для iOS: изучаем синтаксис и структуру программирования
• Интеграция библиотек в Swift: сравнение методов и лайфхаки
• Тестирование в Swift: лучшие практики для надежного iOS кода
• UIKit в iOS разработке: основы интерфейсов, компоненты, верстка
• iOS SDK: инструменты разработки мобильных приложений для Apple