Простой интерактивный поп-ап для iOS — туториал по SwiftUI

Один из лучших способов освоить SwiftUI (как и большинство технологий) — это реализовать что-то небольшое и полезное. Всплывающее окно (поп-ап) является отличным вариантом — это один из самых популярных инструментов интерфейса, который часто нужно кастомизировать, если нативный вариант не устраивает по виду или функционалу.

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

Выбор API

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

Мы начнем с написания примера использования поп-апа, как будто он уже существует, а самой реализацией займёмся чуть позже. Такой подход позволит сразу понять, как будет удобнее использовать компонент в своем коде.

struct ContentView : View {      @State var showingPopup = false // 1      var body: some View {         ZStack {             Color.red.opacity(0.2)             Button("Push me") {                 showingPopup = true // 2             }         }         .popup(isPresented: $showingPopup) { // 3 ZStack { // 4                 Color.blue.frame(width: 200, height: 100)                 Text("Popup!")             }         }     } }

Вот что делает этот простой пример:

1. Мы добавляем всплывающее окно в качестве модификатора нашего элемента, передавая @Binding showingPopup для управления состоянием внутри реализации самого элемента.Переменная @Statevar showingPopup будет управлять отображением поп-апа.

2. Отдельная кнопка на экране будет изменять состояние переменной showingPopup.

3. Мы добавляем всплывающее окно в качестве модификатора нашего элемента, передавая @BindingshowingPopup для управления состоянием внутри реализации самого элемента.

4. Дизайн и содержимое всплывающего окна также передаются в качестве параметра.

5. Сам поп-ап реализован как ViewModifier, как принято в SwiftUI.

Теперь, когда у нас есть представление о желаемом интерфейсе и внешнем виде поп-апа, давайте приступим к фактической реализации.

Реализация View Modifier

extension View {      public func popup<PopupContent: View>(         isPresented: Binding<Bool>,         view: @escaping () -> PopupContent) -> some View {         self.modifier(             Popup(                 isPresented: isPresented,                 view: view)         )     } }

Этот фрагмент кода не требует пояснений — это определение модификатора поп-апа для View. Мы уже знаем, что нам нужны два параметра — isPresented, который представляет собой Binding Property Wrapper для управления состоянием всплывающего окна, и view, который отвечает за внешний вид поп-апа.

Теперь мы можем приступить к самой интересной части.

Реализация всплывающего элемента

Инициализатор и публичные переменные понятны — они уже были определены и объяснены, когда мы выбирали API:

public struct Popup<PopupContent>: ViewModifier where PopupContent: View {          init(isPresented: Binding<Bool>,          view: @escaping () -> PopupContent) {         self._isPresented = isPresented         self.view = view     }      /// Controls if the sheet should be presented or not     @Binding var isPresented: Bool      /// The content to present     var view: () -> PopupContent

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

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

// MARK: - Private Properties  /// The rect of the hosting controller @State private var presenterContentRect: CGRect = .zero  /// The rect of popup content @State private var sheetContentRect: CGRect = .zero  /// The offset when the popup is displayed private var displayedOffset: CGFloat {     -presenterContentRect.midY + screenHeight/2 }  /// The offset when the popup is hidden private var hiddenOffset: CGFloat {     if presenterContentRect.isEmpty {         return 1000     }  return screenHeight - presenterContentRect.midY + sheetContentRect.height/2 + 5 }  /// The current offset, based on the "presented" property private var currentOffset: CGFloat {     return isPresented ? displayedOffset : hiddenOffset }  private var screenWidth: CGFloat {     UIScreen.main.bounds.size.width }  private var screenHeight: CGFloat {     UIScreen.main.bounds.size.height }

Само UI-наполнение поп-апа минимально: мы считываем фрейм основного контента, затем добавляем sheet оверлея, содержащий поп-ап. Сам sheet делает практически то же самое — считывает свой фрейм для позиционирования видимого UI поп-апа, а также добавляет обработчик для удаления показанного поп-апа по нажатию и простую анимацию. Тут же используется ранее вычисленный currentOffset:

// MARK: - Content Builders  public func body(content: Content) -> some View {     ZStack {         content           .frameGetter($presenterContentRect)     }     .overlay(sheet()) }  func sheet() -> some View {     ZStack {         self.view()           .simultaneousGesture(               TapGesture().onEnded {                   dismiss()           })           .frameGetter($sheetContentRect)           .frame(width: screenWidth)           .offset(x: 0, y: currentOffset)           .animation(Animation.easeOut(duration: 0.3), value:                       currentOffset)     } }  private func dismiss() {     isPresented = false }

Чтобы реализовать простую анимацию в SwiftUI, достаточно добавить однострочный модификатор, что мы и делаем в конце создания sheet. Естественно, его можно анимировать как вам угодно — просто заменив итоговый размер и положение на экране, можно получить другой тип UI элемента (например, верхний или нижний тост).

Скорее всего, вы обратили внимание на модификатор frameGetter. Это некрасивый, но необходимый в SwiftUI метод получения фрейма (по крайней мере, судя по документации, более удобного способа получить фрейм в SwiftUI у нас нет). Надеемся, что в будущем появится более удобный способ:

extension View {      func frameGetter(_ frame: Binding<CGRect>) -> some View {         modifier(FrameGetter(frame: frame))     } }    struct FrameGetter: ViewModifier {        @Binding var frame: CGRect          func body(content: Content) -> some View {         content             .background(                 GeometryReader { proxy -> AnyView in                     let rect = proxy.frame(in: .global)                     // This avoids an infinite layout loop                     if rect.integral != self.frame.integral { DispatchQueue.main.async {                             self.frame = rect                         }                        }                 return AnyView(EmptyView())             })     } }

GeometryReader — это view в SwiftUI, который в качестве параметра принимает координатное пространство и предоставляет информацию о своем размере содержимому (иными словами, как раз то, что нужно для получения данных о фрейме). 

Заключение

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

Можете также посмотреть на нашу библиотеку для поп-апа на SwiftUI. На самом деле, этот туториал — упрощенная версия кода в нашем репозитории. Он заметно более сложен из-за большего количества стилей для поп-апов, расширенных параметров и коллбэков, а также поддержкой нескольких платформ. Сам код отображения и добавления поп-апа идентичен приведённому выше. Библиотека предоставляет как простые поп-апы:

так и более сложные кастомные вью: