Розробка Tab Bar навігації iOS-додатку

Вступ

Розробка Tab Bar навігації iOS-додатку — одна з наших ключових компетенцій. Коли до нас приходить проект з навігацією на таббарі, ми починаємо з системного компонента UITabBarController. Apple рекомендує його для додатків з двома-п'ятьма рівнозначними розділами. Здається, що все просто: перетягнув контролер, налаштував вкладки — готово. Але нюанси з'являються одразу, як тільки потрібен кастомний зовнішній вигляд, badge з динамічним лічильником або конкретна поведінка при повторному тапі на активну вкладку. Сертифіковані спеціалісти з 7-річним досвідом — ми реалізували таббар-навігацію в десятках проектів, від новинних додатків до банківських клієнтів. Набили шишки на кожній з типових помилок і тепер гарантуємо, що ваш таббар пройде рев'ю App Store з першого разу.

Типові складності

Кастомне налаштування зовнішнього вигляду. З iOS 15 Apple змінила систему кастомізації — UITabBar.appearance() перестав працювати для частини параметрів. Тепер правильний шлях: UITabBarAppearance + UITabBarItemAppearance. Якщо цього не врахувати, на iOS 15+ таббар отримує білий або сірий фон замість кастомного, а додаток виглядає зламаним:

let appearance = UITabBarAppearance() appearance.configureWithOpaqueBackground() appearance.backgroundColor = .systemBackground tabBar.standardAppearance = appearance tabBar.scrollEdgeAppearance = appearance 

Цей фрагмент задає єдиний фон для обох станів. Ми завжди додаємо його в шаблон проекту — це економить 20–30 хвилин налагодження на новому SDK.

Badge-лічильники. tabBarItem.badgeValue = "3" працює з коробки, але червоне коло не можна змінити за кольором без додаткових дій. Починаючи з iOS 10 з'явилася властивість badgeColor, але її часто упускають з уваги. Якщо потрібна зовсім нестандартна форма — наприклад, квадратний badge із закругленими кутами — доводиться створювати кастомний overlay поверх іконки вкладки. Порівняння підходів:

Для 90% сценаріїв достатньо badgeColor. Ми використовуємо кастомний view тільки коли потрібно анімувати badge (наприклад, пульсація) — це буває раз на п'ять проектів.

Повторний тап на активну вкладку. За замовчуванням нічого не відбувається. Користувач очікує, що список прокрутиться вгору. Реалізація через UITabBarControllerDelegate:

func tabBarController(_ tabBarController: UITabBarController, didSelect viewController: UIViewController) { guard let nav = viewController as? UINavigationController, let top = nav.topViewController, let scroll = top.view.subviews.first(where: { $0 is UIScrollView }) as? UIScrollView else { return } scroll.setContentOffset(.zero, animated: true) } 

Цей код — універсальне рішення. Ми додали його в свою бібліотеку компонентів і використовуємо в кожному проекті. Економить 30 хвилин на впровадження. Готове рішення працює в 5 разів швидше, ніж написання власного з нуля.

Приховування таббара при прокрутці — ще один частий запит. Реалізується через спостереження за contentOffset UIScrollView. Ми ховаємо таббар анімацією разом з контентом, щоб не було сіпань. Цей патерн описаний в документації Apple в розділі HIG.

Як налаштувати кастомний зовнішній вигляд таббара на iOS 15+?

В iOS 15–17 зламалася пряма установка tintColor та barTintColor. Натомість використовується UITabBarAppearance. Виконайте три кроки:

1. Створіть UITabBarAppearance.
2. Встановіть backgroundColor або backgroundEffect.
3. Присвойте standardAppearance та scrollEdgeAppearance.

Порівняння з iOS 14: в iOS 14 можна було обійтися одним рядком tabBar.barTintColor = ..., тепер це в 3 рази більше коду, але гнучкість вища — можна задати різні стилі для звичайного стану та при прокрутці. Ми завжди налаштовуємо обидва, щоб уникнути білого фону на iOS 15+.

Чому повторний тап на вкладку не скролить вгору?

Це відома проблема: UITabBarController не викликає scroll-to-top за замовчуванням. Причина — Apple залишила цю логіку розробнику. Ми вирішуємо це через делегат, як показано вище. Більше того, якщо всередині вкладки кілька скрол-в'ю (наприклад, Carousel + список), потрібно визначити, який саме скролити. Ми використовуємо first(where:) — для стандартних ієрархій цього достатньо.

SwiftUI

В SwiftUI використовуємо TabView з модифікатором .tabItem. З iOS 18 з'явився новий тип Tab і сайдбар-підтримка для iPad. Однак для складної кастомної анімації або badge з динамічним оновленням TabView поки не дотягує. У таких випадках ми обгортаємо UITabBarController через UIViewControllerRepresentable. Це дає повний контроль без втрати продуктивності — всього 40–50 рядків коду.

Що входить в роботу

• Налаштування UITabBarController або TabView з потрібною кількістю вкладок.
• Кастомний зовнішній вигляд через UITabBarAppearance з урахуванням iOS 15+.
• Badge-лічильники з оновленням із сервісу сповіщень (APNs/FCM).
• Scroll to top при повторному тапі на вкладку.
• Приховування таббара при прокрутці (опціонально).
• Налаштування глибоких посилань (deep linking) для кожної вкладки.
• Адаптація під iPad: замість таббара можна використовувати split view.

Строки

Замовте розробку Tab Bar навігації з нашою допомогою. Отримайте консультацію та точну оцінку вашого проекту — просто напишіть нам з описом функціоналу. Скорочуємо час розробки на 30% за рахунок готових компонентів.