Вступление

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

Используя простой, понятный декларативный стиль, разработчики могут создавать потрясающие пользовательские интерфейсы с плавной анимацией. SwiftUI экономит время разработчиков, предоставляя огромное количество готовых решений, включая Interface Layout, Dark Mode, Accessibility, интернационализацию и многое другое. Приложения SwiftUI работают нативно и невероятно быстро. А поскольку SwiftUI — это один и тот же API, встроенный в iOS, iPadOS, macOS, watchOS и tvOS, разработчики могут быстрее и проще создавать отличные нативные приложения для всех платформ Apple.

Звучит amazing, не правда ли?

Введение

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

• почему View это структура, а не класс
• что такое @State
• что такое Function Builders и кто такой @ViewBuilder

а сразу перейдем к практике и сделаем достаточно стандартную в повседневной жизни задачу — создание горизонтального списка.

Будет очень много кода и мало комментариев, впрочем, все как мы любим.

Глава 1. Что нам стоит горизонтальный ScrollView построить

Горизонтальный список можно создать достаточно просто. Для этого необходимо поместить HStack в ScrollView и заполнить HStack нашими элементами:

var body: some View {
    ScrollView(.horizontal) {
        HStack {
            ForEach(0...9, id: \.self) { index in
                SomeAmazingView(atIndex: index)
            }
        }
    }
}

Для практической наглядности создадим View, которая будет отображать список из 100 карточек. Каждая карточка будет отображать случайно сгенерированный смайлик и индекс самой карточки.

struct ContentView: View {

    struct Constants {
        static var itemsCount = 100
    }

    // MARK: - State    
    @State var items: [String] = []

    // MARK: - Initialization
    init() {
        items = generateData()
    }

    // MARK: - View
    var body: some View {
        ScrollView(.horizontal) {
            HStack {
                ForEach(0..<items.count, id: \.self) { index in
                    CardView(index: index, title: self.items[index])
                        .frame(width: 150, height: 200)
                        .padding(10)
                }
            }
        }
    }

    // MARK: - Private Helpers
    private func generateData() -> [String] {
        var data: [String] = []
        for _ in 0..<Constants.itemsCount {
            data.append(String.randomEmoji())
        }

        return data
    }
}

Запускаем и вуаля, как и обещала Apple — все нативно и невероятно быстро.

Но есть одна проблема — если количество данных увеличится, то мы столкнемся с проблемой.

    ...
    struct Constants {
        static var itemsCount = 1000
        ...
    }
    ...

Запускаем и ...

Глава 2. Если хочешь сделать что-то хорошо, сделай это сам

Для решения этой проблемы в UIKit мы бы использовали UICollectionView. Но, к сожалению, не всё, что было возможно при использовании UIKit, имеет аналог в SwiftUI.

Конечно, можно было бы использовать UICollectionView напрямую в SwiftUI. Как это сделать можно прочитать здесь. Но это уже не SwiftUI и определенно не наш путь.

На данный момент единственная структура в SwiftUI, которая загружает и отображает данные только по необходимости (on demand) это List.

@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
public struct List<SelectionValue, Content> : View where SelectionValue : Hashable, Content : View {
...
}

@available(iOS 13.0, OSX 10.15, tvOS 13.0, watchOS 6.0, *)
extension List {
    ...
    /// Creates a List that computes its rows on demand from an underlying
    /// collection of identified data.
    @available(watchOS, unavailable)
    public init<Data, RowContent>(_ data: Data, selection: Binding<Set<SelectionValue>>?, @ViewBuilder rowContent: @escaping (Data.Element) -> RowContent) where Content == ForEach<Data, Data.Element.ID, HStack<RowContent>>, Data : RandomAccessCollection, RowContent : View, Data.Element : Identifiable
    }
    ...
}

Возьмем это решение от Apple и создадим схожее API для нашей структуры HorizontalList:

public struct HorizontalList<Content, Data> : View where Content : View, Data: RandomAccessCollection, Data.Element: Hashable {

    // MARK: - Properties
    private let data: [Data.Element]
    private let itemContent: (Data.Element) -> Content

    // MARK: - Initialization
    public init(_ data: Data, @ViewBuilder itemContent: @escaping (Data.Element) -> Content) {
        self.itemContent = itemContent

        if let range = data as? Range<Int> {
            self.data = Array(range.lowerBound..<range.upperBound) as! [Data.Element]
        } else if let closedRange = data as? ClosedRange<Int> {
            self.data = Array(closedRange.lowerBound..<closedRange.upperBound) as! [Data.Element]
        } else if let array = data as? [Data.Element] {
            self.data = array
        } else {
            fatalError("Unsupported data type.")
        }
    }

    // MARK: - View
    public var body: some View {
        ZStack {
            if !self.data.isEmpty {
                ForEach(0..<self.data.count, id: \.self) { index in
                    self.makeView(atIndex: index)
                }
            }
        }
    }

    // MARK: - Private Helpers
    private func makeView(atIndex index: Int) -> some View {
        let item = data[index]
        let content = itemContent(item)

        return content
    }
}

Обновим наш пример с карточками и будем использовать собственное решение:

var body: some View {
    HorizontalList(0..<items.count) { index in
        CardView(index: index, title: self.items[index])
            .frame(width: Constants.itemSize.width, height: Constants.itemSize.height)
            .padding(10)
    }
}

Запускаем и (через какое-то время..) видим, что карточки успешно загрузились и отобразились:

Глава 2. Это особая, Layout магия

Большую часть времени SwiftUI будет сам делать свою магию по расположению элементов и жизнь будет великолепной. Однако бывают случаи, когда нам требуется больше контроля для расположения наших собственных Views. Для этого у нас есть несколько инструментов. Одним из них является GeometryReader, его мы и будем использовать для получения информации о размерах и позициях элементов внутри него.

GeometryReader - A container view that defines its content as a function of its own size and coordinate space.

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

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

В SwiftUI есть механизм, который позволяет добавлять некоторые атрибуты к View. Эти атрибуты называются "Preferences". При изменении этих атрибутов мы будем получать callback.

Первым делом нам необходимо создать структуру данных для атрибута. В ней мы будем хранить индекс элемента и его Rect. Структура должна поддерживать протокол Equatable.

struct ViewRectPreferenceData: Equatable {
    let index: Int
    let rect: CGRect
}

Следующим шагом создадим сам аттрибут, поддерживающий протокол PreferenceKey и содержащий в себе массив значений ViewRectPreferenceData.

struct ViewRectPreferenceKey: PreferenceKey {
    typealias Value = [ViewRectPreferenceData]

    static var defaultValue: [ViewRectPreferenceData] = []

    static func reduce(value: inout [ViewRectPreferenceData], nextValue: () -> [ViewRectPreferenceData]) {
        value.append(contentsOf: nextValue())
    }
}

Так как нам нужно будет знать размеры элементов, а сделать это можно только с помощью GeometryReader, мы создадим специальную View, которая будет добавлена как child к нашим элементам и, как результат, иметь GeometryReader с размерами нашего элемента.

struct PreferenceSetterView: View {
    let index: Int
    let coordinateSpaceName: String

    var body: some View {
        GeometryReader { geometry in
            Rectangle()
                .fill(Color.clear)
                .preference(key: ViewRectPreferenceKey.self,
                            value: [ViewRectPreferenceData(index: self.index, rect: geometry.frame(in: .named(self.coordinateSpaceName)))])
        }
    }
}

Добавим созданный PreferenceSetterView к нашим элементам, как background:

private func makeView(atIndex index: Int) -> some View {
    ...
    return content
            .background(PreferenceSetterView(index: index, coordinateSpaceName: Constants.coordinateSpaceName))
}

При изменении Preference вызывается метод onPreferenceChange, в нем то мы и получим размеры отображенных на экране элементов и сохраним их в наш массив. Так как у нас горизонтальный список, также мы будем высчитывать отступ элементов согласно отступу и размеру предыдущего элемента.

...

struct  Constants {
    static  var  coordinateSpaceName: String {
        return  "HorizontalListCoordinateSpaceName"
    }
}

@State private var rects: [Int: CGRect] = [:]

...

public var body: some View {
    GeometryReader { geometry in
        ZStack {
            ...
         }
         .onPreferenceChange(ViewRectPreferenceKey.self) { preferences in
                for preference in preferences {
                    var rect = preference.rect
                    if let prevRect = self.rects[preference.index - 1] {
                        rect = CGRect(x: prevRect.maxX, y: rect.minY, width: rect.width, height: rect.height)
                    }

                    self.rects[preference.index] = rect
          }
          .coordinateSpace(name: Constants.coordinateSpaceName)
        }
}

Про Preferences eсть хорошая серия статей из 3-х частей:
Часть 1
Часть 2
Часть 3

Глава 3. Ты видишь только то, что тебе показывают

Теперь, когда мы имеем размеры элементов и размеры экрана, мы легко можем посчитать какие элементы должны быть видимыми. Ниже реализован метод updateVisibleIndices и места откуда он будет вызываться:

@State  private  var  visibleIndices: ClosedRange<Int> = 0...0
...
public var body: some View {
        GeometryReader { geometry in
            ZStack {
                if !self.data.isEmpty {
                    ForEach(self.model.visibleIndices, id: \.self) { index in
                        self.makeView(atIndex: index)
                     }
                 }
            }
            .onAppear() {
                self.updateVisibleIndices(geometry: geometry)
            }
            .onPreferenceChange(ViewRectPreferenceKey.self) { preferences in
                 ...
                 self.updateVisibleIndices(geometry: geometry)
             }
        }
}

...

private func updateVisibleIndices(geometry: GeometryProxy) {
    let bounds = geometry.frame(in: .named(Constants.coordinateSpaceName))
    let visibleFrame = CGRect(x: 0, y: 0, width: bounds.width, height: bounds.height)

    var frameIndices: [Int] = []
    for (index, rect) in rects {
        if rect.intersects(visibleFrame) {
            frameIndices.append(index)
        }
    }

    frameIndices.sort()

    let firstIndex = frameIndices.first ?? 0
    var lastIndex = frameIndices.last ?? 0

    if rects[lastIndex]?.maxX ?? 0 < visibleFrame.maxX, lastIndex < data.count - 1 {
        lastIndex += 1
    }

    visibleIndices = firstIndex...lastIndex
}

(пытливый критический взгляд может заметить, что количество visibleIndices не может быть меньше 1 и правильней было бы иметь это значение опциональным, но для простоты оставим как есть)

Протестируем, используя метод onAppear(), который вызывается при появлении элемента на экране:

CardView(index: index, title: self.items[index])
    .onAppear() {
        print("Appeared index: \(index)")
    }

Appeared index: 0
Appeared index: 1
Appeared index: 2

Отлично, как видно из лога после запуска появились на экран только 3 элемента.

Глава 4. Тянем-потянем

Следующим шагом развития нашего компонента будет поддержка Drag Gestures для скроллинга данных. Так как изменение позиции скролла влияет на отображаемые элементы, переменные offset и dragOffset будут State переменными.

@State private var offset: CGFloat = 0
@State private var dragOffset: CGFloat = 0

var contentOffset: CGFloat {
    return offset + dragOffset
}

Добавим к нашему компоненту DragGesture и его обработчики:

public var body: some View {
    GeometryReader { geometry in
        ZStack {
            ...
        }
        .gesture(
             DragGesture()
                .onChanged({ value in
                     // Scroll by dragging
                     self.dragOffset = -value.translation.width
                     self.updateVisibleIndices(geometry: geometry)
                 })
                 .onEnded({ value in
                      self.offset = self.offset + self.dragOffset
                      self.dragOffset = 0
                      self.updateVisibleIndices(geometry: geometry)
                }))
    }
}

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

private func makeView(atIndex index: Int) -> some View {
    ...
    return content
              .offset(x: itemRect.minX - contentOffset)
}

private func updateVisibleIndices(geometry: GeometryProxy) {
    ...
    let visibleFrame = CGRect(x: contentOffset, y: 0, width: bounds.width, height: bounds.height)
    ...
}

Запускаем приложение:

Appeared index 0
Appeared index 1
Appeared index 2
Appeared index 3
Appeared index 4
Appeared index 5
Appeared index 6
Appeared index 7
Appeared index 8
Appeared index 9
Appeared index 10

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

Глава 5. Крутите барабан

Текущая реализация скролла элементов с помощью drag gesture не учитывает velocity. Настало время улучшить логику скролла и исправить этот пробел. Для того, чтобы учесть скорость прокрутки нам необходима анимация.

Любая анимация строится на изменении значений за какой-то период времени. Для того чтобы фиксировать периоды времени нам необходим таймер:

@State private var animationTimer = Timer.publish (every: 1/60, on: .current, in: .common).autoconnect()

Теперь когда у нас есть таймер, надо знать, что анимировать. Список получается довольно простой: startPosition, endPosition и scrollDuration. Единственное, так как нам не надо перегружать View при изменении какого-либо из этих значений, мы их упакуем в модель класса:

class HorizontalListScrollAnimator {
    var isAnimationFinished: Bool = true

    private var startPosition: CGFloat = 0
    private var endPosition: CGFloat = 0
    private var scrollDuration: Double = 0
    private var startTime: TimeInterval = 0

    func start(from start: CGFloat, to end: CGFloat, duration: Double = 1.0) {
        startPosition = start
        endPosition = end
        scrollDuration = duration
        isAnimationFinished = false
        startTime = CACurrentMediaTime()
    }

    func stop() {
        startPosition = 0
        endPosition = 0
        scrollDuration = 0
        isAnimationFinished = true
        startTime = 0
    }

    func nextStep() -> CGFloat {
        let currentTime = CACurrentMediaTime()

        let time = TimeInterval(min(1.0, (currentTime - startTime) / scrollDuration))

        if time >= 1.0 {
            isAnimationFinished = true
            return endPosition
        }

        let delta = easeOut(time: time)
        let scrollOffset = startPosition + (endPosition - startPosition) * CGFloat(delta)

        return scrollOffset
    }

    private func easeOut(time: TimeInterval) -> TimeInterval {
        return 1 - pow((1 - time), 4)
    }
}

И завершающим шагом интегрируем модель анимации с таймером в наше View:

private var scrollAnimator = HorizontalListScrollAnimator()
public var body: some View {
        GeometryReader { geometry in
            ...
        }
        .gesture(
            DragGesture()
                ...
                .onEnded({ value in
                    let predictedWidth = value.predictedEndTranslation.width * 0.75
                    if abs(predictedWidth) - abs(self.dragOffset) > geometry.size.width / 2 {
                        // Scroll with animation to predicted offset
                    self.dragOffset = 0

                  self.scrollAnimator.start(from: self.offset, to: (self.offset - predictedWidth), duration: 2)
                        self.animationTimer = Timer.publish (every: 1/60, on: .current, in:.common).autoconnect()
                    } else {
                        // Save dragging offset
                        self.offset = self.offset + self.dragOffset
                         self.dragOffset = 0

                     self.updateVisibleIndices(geometry: geometry)
         .gesture(
             TapGesture()
                 .onEnded({ _ in
                      // Stop scroll animation on tap
                            self.scrollAnimator.stop()
                      self.animationTimer.upstream.connect().cancel()
                    }))
            }))
            .onReceive(self.animationTimer) { _ in
             if self.scrollAnimator.isAnimationFinished {
                 // We don't need it when we start off
                 self.animationTimer.upstream.connect().cancel()
                 return
             }

             self.offset = self.scrollAnimator.nextStep()

                self.updateVisibleIndices(geometry: geometry)
            }
        }
    }

Глава 6. Граница на замке

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

func safeOffset(x: CGFloat) -> CGFloat {
    return x.clamped(to: 0...(maxOffset ?? CGFloat.greatestFiniteMagnitude))
}

У CGFloat нет метода clamped, но его можно легко добавить с помощью расширения:

extension Comparable {
    func clamped(to limits: ClosedRange<Self>) -> Self {
        return min(max(self, limits.lowerBound), limits.upperBound)
    }
}

Ниже представлен полный код с получением возможного максимального отступа и использованием метода safeOffset:

...

@State private var maxOffset: CGFloat?

var contentOffset: CGFloat {
    return safeOffset(x: offset + dragOffset)
}

...

public var body: some View {
        GeometryReader { geometry in
            ...
        }
        .gesture(
            DragGesture()
                ...
                .onEnded({ value in
                    ...
                    self.offset = self.safeOffset(x: self.offset + self.dragOffset)
                     ...
                 }))
                 ...
                 .onPreferenceChange(ViewRectPreferenceKey.self) { preferences in
                      // Update subviews rects
                      for preference in preferences {
                          ...
                          // Update max valid offset if needed
                          if self.maxOffset == nil, let lastRect = self.rects[self.data.count - 1] {
                              self.maxOffset = max(0, lastRect.maxX - geometry.frame(in: .global).width)
                          }
                      }
                      ...
                   }
                   .onReceive(self.animationTimer) { _ in
                        ....
                        self.offset = self.scrollAnimator.nextStep()

                        // Check if out of bounds
                        let safeOffset = self.safeOffset(x: self.offset)
                        if self.offset != safeOffset {
                        self.offset = safeOffset
                        self.dragOffset = 0
                        ...
                    }
}

Глава 7. Кэш

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

class HorizontalListModel<Content> where Content : View {
    var cachedContent: [Int: Content] = [:]

    init() {
        NotificationCenter.default.addObserver(self,
                                               selector: #selector(clearCacheData),
                                               name: UIApplication.didReceiveMemoryWarningNotification,
                                               object: nil)
    }

    @objc func clearCacheData() {
        cachedContent.removeAll()
    }
}

...
private let model = HorizontalListModel<Content>()
...

    private func makeView(atIndex index: Int) -> some View {
        ...
        var content = model.cachedContent[index]
        if content == nil {
            content = itemContent(item)
            model.cachedContent[index] = content
        }

        return content
                ...
    }

Послесловие.

Готовый компонент вы можете найти по адресу
Предыдущая наша статья на тему SwiftUI доступна здесь

Статья написана моим коллегой Денисом Шалагиным и опубликована для сообщества по его просьбе.

Всем счастливого WWDC2020!