Sticky Header в SwiftUI

Всем привет!

В этой статье я бы хотел рассказать свой опыт создания липких заголовков или Sticky Header с использованием SwiftUI (в дальнейшем SUI).

Мы сделаем с вами такой кастомный хедер, а так же вы поймете как мы можем получать доступ к UIKit-овой изнанке SwiftUI.

Почему я решил написать эту статью?

• При переходе с UIKit на SwiftUI мне не хватало чувства контроля. Я не понимал, как получить доступ к состоянию моих View и как тонко и точно настраивать их поведение. Статья может быть полезна людям с такими же проблемами.

• Sticky Header – часть почти любого мобильного приложения, а в русскоязычном интернете (да и в англоязычном тоже) очень мало информации о том как сделать кастомный липкий заголовок на SUI.

• В SUI нет нативного и удобного способа создания такого header-а (начиная с iOS 17 в SUI добавили .visualEffect модификатор, который позволяет получить доступ к офсету скрола.)
  Но когда мы поднимем свои таргеты в реальных проектах до iOS 17 — очень большой вопрос.

Из чего же состоит экран с липким заголовком?

Предупрежу что сама реализация такого header-а в SUI отходит от парадигмы этого фреймворка (декларативность) и выполняется в императивном стиле.

Что бы наш header стал по настоящему sticky, нам надо получать состояние прокрутки (смещение по оси Y) ScrollView и смещать на такое же количество поинтов наш header, создавая эффект неподвижности.

Как в SUI можно получать смещение по оси Y ScrollView?

Те кто больше слышал о SwiftUI, чем с ним работал подумают что это супер просто, в SUI куча реактивщины, скорее всего есть какой нибудь модификатор куда можно передать Binding<CGFloat> и дело с концом.

Ответ: НЕТ! До iOS 17 такого модификатора не существует, а наши пользователи с iOS 14 также хотят себе липких хедеров в приложении!

Значит будем выкручиваться костылями!

Разработчики, которые не пишут или почти не пишут на SUI удивятся, ведь получать состояние скролла в UIKit очень легко, достаточно просто… 

Реализовать методы делегата UIScrollView!

Существует целая пачка методов для UIScrollView которые покрывают практически все что мы можем пожелать.

Осталось только каким то образом заиметь нашему ScrollView такого же делегата как и UIScrollView и реализовать его методы.

К счастью, ScrollView под капотом и есть UIScrollView! 

Далее без всяких доп библиотек мы получим доступ к ScrollVIew как к UIScrollView 

struct ScrollDetector: UIViewRepresentable {          //Замыкание в которое будет передаваться текущий offset     var onScroll: (CGFloat) -> Void          //Замыкание которое вызывается когда пользователь отпускает палец     var onDraggingEnd: (CGFloat, CGFloat) -> Void               //Класс-делегат нашего ScrollView     class Coordinator: NSObject, UIScrollViewDelegate {                  var parent: ScrollDetector          var isDelegateAdded: Bool = false                  init(parent: ScrollDetector) {             self.parent = parent         }                  //методы UIScrollViewDelegate         func scrollViewDidScroll(_ scrollView: UIScrollView) {             parent.onScroll(scrollView.contentOffset.y)         }                  func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {             parent.onDraggingEnd(targetContentOffset.pointee.y, velocity.y)         }                  func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {             parent.onDraggingEnd(scrollView.contentOffset.y, 0)         }                  //тут могли бы быть другие методы UIScrollViewDelegate         //так как у нас в распоряжении ПОЛНОЦЕННЫЙ ДЕЛЕГАТ от UIKit-ового UIScrollView!     }          func makeCoordinator() -> Coordinator {         Coordinator(parent: self)     }          //При создании пустой UIView находим UIScrollView и назначаем ему в делегаты наш coordinator     func makeUIView(context: Context) -> UIView {         let uiView = UIView()         DispatchQueue.main.async {             if let scrollView = recursiveFindScrollView(view: uiView), !context.coordinator.isDelegateAdded {                 scrollView.delegate = context.coordinator                 context.coordinator.isDelegateAdded = true             }         }         return uiView     }          //рекурсивно перебираем родителей нашей пустой UIView в поисках ближайшего UIScrollView     func recursiveFindScrollView(view: UIView) -> UIScrollView? {         if let scrollView = view as? UIScrollView {             return scrollView         } else {             if let superview = view.superview {                 return recursiveFindScrollView(view: superview)             } else {                 return nil             }         }     }          func updateUIView(_ uiView: UIView, context: Context) {} } 

Мы создали переиспользуемый ScrollDetector откуда мы получаем доступ к делегату UIScrollView!

Приведу пример его использования в нашем случае:

struct MainScreen: View {     var size: CGSize     var safeArea: EdgeInsets          @State private var offsetY: CGFloat = .zero          var body: some View {                  ScrollViewReader { proxy in             ScrollView(showsIndicators: false) {                 VStack {                     createHeaderView()                         .zIndex(1)                                          createMainContent()                 }                 .id("mainScrollView")                 .background {                     ScrollDetector { offset in                         offsetY = -offset                     } onDraggingEnd: { offset, velocity in                         if needToScroll(offset: offset, velocity: velocity) {                             withAnimation(.default) {                                 proxy.scrollTo("mainScrollView", anchor: .top)                             }                         }                     }                 }             }         }     }

Имея полный доступ к состоянию ScrollView, мы ограничены только нашей фантазией.

Код для создания эффекта инерции и расчета положения/размера скролла:

    //данная функция создает эффект "инерции"     private func needToScroll(offset: CGFloat, velocity: CGFloat) -> Bool {         let headerHeight = (size.height * 0.25) + safeArea.top         let minimumHeaderHeigth = 64 + safeArea.top                  let targetEnd = offset + (velocity * 45)                  return targetEnd < (headerHeight - minimumHeaderHeigth) && targetEnd > 0     }          //тут вся математика по расчету текущего положения/размера хедера и его контента     @ViewBuilder     private func createHeaderView() -> some View {         let headerHeight = (size.height * 0.25) + safeArea.top         let minimumHeaderHeigth = 64 + safeArea.top         let progress = max(min(-offsetY / (headerHeight - minimumHeaderHeigth), 1), 0)              GeometryReader { _ in             ZStack {                 Rectangle()                     .fill(Color("habrColor").gradient)                                  VStack(spacing: 15) {                     GeometryReader {                         let rect = $0.frame(in: .global)                                                  let halfScaledHeight = (rect.height * 0.2) * 0.5                         let midY = rect.midY                                                  let bottomPadding: CGFloat = 16                         let reseizedOffsetY = (midY - (minimumHeaderHeigth - halfScaledHeight - bottomPadding))                                                  Image("habr")                             .resizable()                             .renderingMode(.template)                             .frame(width: rect.width, height: rect.height)                             .clipShape(Circle())                             .foregroundColor(Color(.white))                             .scaleEffect(1 - (progress * 0.5), anchor: .leading)                             .offset(x: -(rect.minX - 16) * progress, y: -reseizedOffsetY * progress - (progress * 16))                     }                     .frame(width: headerHeight * 0.5, height: headerHeight * 0.5)                                          Text("Привет, Хабр?")                         .font(.title)                         .fontWeight(.bold)                         .foregroundColor(.white)                         .scaleEffect(1 - (progress * 0.1))                         .offset(y: -2 * progress)                                      }                 .padding(.top, safeArea.top)                 .padding(.bottom)                              }             .shadow(color: .black.opacity(0.2), radius: 25)             .frame(height: max((headerHeight + offsetY), minimumHeaderHeigth), alignment: .bottom)                      }         .frame(height: headerHeight, alignment: .bottom)         .offset(y: -offsetY)     }

Если вас заинтересовал данный способ и вы хотите сделать что то похожее, добро пожаловать на мой GitHub за исходным кодом.

Если остались дополнительные вопросы, пишите в комментариях, обязательно отвечу.