Свой NavigationBar на iOS: large title, поиск и списки на Texture

Значимый прорыв формирует отрасль ИИ: vientooscuro 1 час назад Свой NavigationBar на iOS: large title, поиск и списки на Texture Средний 12 мин 1. 6K iOS * Swift * Разработка мобильных приложений * Кейс Разберём, как можно отказаться от системного UINavigationBar и собрать собственный навигационный бар на обычном UIView: с коллапсирующим large title как у Apple, со встроенной строкой поиска, с произвольными панелями под заголовком — и так, чтобы он работал не только с UITableView, но и со списками на Texture (AsyncDisplayKit). Я делал такой компонент для крупного приложения, и он давно живёт в продакшене.

Ниже — устройство и, что важнее, компромиссы: на мой взгляд, честный разбор обходных путей полезнее причёсанной версии, где всё сходится с первого раза. Зачем нужен собственный navbarНабор требований был такой:large title, плавно сжимающийся при скролле — как системный;под заголовком — строка поиска, которая тоже коллапсит при скролле, а в активном состоянии разворачивается на всю ширину;под поиском — произвольные панели, часть из которых должна уезжать при скролле, часть — оставаться;размытый фон (UIVisualEffectView), появляющийся и исчезающий в зависимости от позиции скролла;и, что важнее всего, совместимость с разными типами скролл-контейнеров: часть экранов на UIKit, часть — на Texture (ASTableNode / ASCollectionNode). Системный UINavigationBar с prefersLargeTitles и UISearchController в теории закрывает многое.

Технические детали

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

Анатомия: бар как вертикальный стек панелейРаскладка прямолинейна — вертикальный UIStackView, в котором по порядку лежат панели:stack. addArrangedSubviews( topPanel, // фиксированные 44pt: left-кнопка, title, right-кнопки spacePanel, // растягивающийся зазор (как у системного large title) largeTitlePanel, // большой заголовок searchPanel, // строка поиска closablePanel, // панель, которая уезжает при скролле pinnedPanel, // панель, которая остаётся separatorLine // нижняя разделительная линия ) Под фоном лежат backgroundView (сплошной цвет) и blurView (UIVisualEffectView); они подменяются в зависимости от того, раскрыт large title или нет. Каждая панель — это UIView с констрейнтами, причём на ключевые NSLayoutConstraint мы держим слабые ссылки, чтобы менять их constant при скролле:private weak var spacePanelHeight: NSLayoutConstraint?

private weak var largeTitleTop: NSLayoutConstraint? private weak var searchTop: NSLayoutConstraint? private weak var searchHeight: NSLayoutConstraint?

private weak var closablePanelTop: NSLayoutConstraint? То есть анимация коллапса — это не работа с CALayer, а пересчёт constant у констрейнтов на каждый тик скролла.

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