Привет! Меня зовут Юля, я iOS-разработчик и накануне Нового года дизайнеры подарили мне макеты к новой фиче, посмотрев на которые я облегченно вздохнула: просто ScrollView, в котором есть просто один выделенный элемент, который при скролле вверх просто приклеивается к верхней границе этого самого ScrollView. Делов-то…

А делов оказалось на полтора дня. Потому что примерно на десятой ссылке всемогущий Гугл возмущенно развел руками: “На SwiftUI все порядочные люди делают ScrollView с приклеивающимся хедером. А чтобы какой ни попадя элемент прилеплять - это вы безобразие какое-то придумали…”.

Вообщем, стало понятно, что списать эту домашку не получится. Поэтому пришлось делать самой. И теперь хочу ей поделиться - чтобы ваши домашки готовились быстрее.

А все дело в том, что в завершившемся году стек проекта, над которым я работаю совместно со своими коллегами, пополнился новым фреймворком, и новые UI-компоненты у нас теперь “модно-молодежно” реализуются на SwiftUI.

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

Какие варианты?

Прислушавшись к тому, что подскажет мне сердце, я получила два варианта решения:

• адаптировать UIScrollView для использования в SwiftUI через UIViewRepresentable

• реализовать кастомную View на SwiftUI

Ранее мне довелось адаптировать несколько не очень простых кастомных UIView для SwiftUI через UIViewRepresentable. И, честно говоря, вспоминая то художественное хождение по граблям, я не очень хотела ввязываться в такую же историю для UIScrollView: очевидно, что одной реализацией протокола UIViewRepresentable здесь не обойтись, и нужно будет разбираться еще и с методами для UIScrollViewDelegate.

Поэтому можете считать меня плохим самураем, но я сочла этот путь сложным и выбрала второй способ.

ScrollView на SwiftUI. Начало

Начала я с того, что сделала простую View для того, чтобы в дальнейшем использовать ее в качестве элемента ScrollView:

struct ItemView: View {
    let index: Int
    let isSelected: Bool
    
    var body: some View {
        RoundedRectangle(cornerRadius: 8)
            .foregroundColor(isSelected ? Color.green : Color.gray)
            .frame(height: 50)
            .overlay(
                Text("Item \(index)")
                    .foregroundColor(Color.white)
            )
    }
}

Возможно, в этом месте вы посчитаете меня не только плохим самураем, но еще и плохим дизайнером, но для демонстрационных целей дизайн вполне достаточный, я считаю:

Теперь можно сделать ScrollView, в котором элементы ItemView будут выделяться по тапу:

struct PinnedItemScrollView: View {
    @State private var selectedItemIndex: Int?
    
    var body: some View {
        VStack {
            Spacer()
            Text("ScrollView with pinned selected item")
                
            ScrollView {
                VStack(spacing: 8) {
                    ForEach(1..<21) { index in
                        ItemView(index: index, isSelected: index == selectedItemIndex)
                            .onTapGesture {
                                withAnimation {
                                    selectedItemIndex = index
                                }
                            }
                    }
                }
                .padding()
            }
            .background(Color.white)
        }
    }
}

Пока наш ScrollView просто скроллится и никак не отслеживает выделенный элемент:

Собственно, на этом подготовительный этап завершен и можно доставать напильник - будем дорабатывать эту заготовку.

А теперь к сути: останавливаем элемент в ScrollView

Основная идея реализации прилипания выделенного элемента ScrollView к верхней (видимой) границе заключается в том, чтобы в зависимости от значения оффсета этого элемента показывать для него соответствующую View поверх всего ScrollView в ZStack.

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

Чтобы это сделать, воспользуемся механизмом предпочтений (preferences) в SwiftUI, который позволяет передавать данные по иерархии от дочерней View (в нашем случае ItemView) в родительскую View (в нашем случае PinnedItemScrollView).

Создадим ключ настройки OffsetPreferenceKey:

struct OffsetPreferenceKey: PreferenceKey {
    typealias Value = CGFloat
    static var defaultValue: CGFloat = 0.0
    
    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value += nextValue()
    }
}

Этот ключ будем использовать для определения вертикального оффсета (Y-координаты) ItemView.

Для ItemView зададим в качестве фона GeometryReader, чтобы установить исходный вертикальный оффсет для ItemView,и при изменении вертикального оффсета ItemView будем сохранять это значение для текущего выделенного элемента в переменную selectedItemOffset:

struct PinnedItemScrollView: View {
    @State private var selectedItemIndex: Int?
    @State private var selectedItemOffset: CGFloat?
    
    var body: some View {
        VStack {
            Spacer()
            Text("ScrollView with pinned selected item")
                
            ScrollView {
                VStack(spacing: 8) {
                    ForEach(1..<21) { index in
                        ItemView(index: index, isSelected: index == selectedItemIndex)
                            .onTapGesture {
                                withAnimation {
                                    selectedItemIndex = index
                                    selectedItemOffset = nil
                                }
                            }
                            .background(
                                GeometryReader { geometry in
                                    Color.clear
                                        .preference(key: OffsetPreferenceKey.self,
                                                    value: geometry.frame(in: .global).minY)
                                }
                            )
                            .onPreferenceChange(OffsetPreferenceKey.self) { value in
                                if index == selectedItemIndex {
                                    selectedItemOffset = value
                                }
                            }
                    }
                }
                .padding()
            }
            .background(Color.white)
        }
    }
}

Использование GeometryReader в качестве фона позволяет получить доступ к фрейму ImageView, поскольку в этом случае их размеры будут одинаковыми.

Исходным вертикальным оффсетом для ItemView будем считать его верхнюю границу, которой соответствует минимальная Y-координата фрейма View (geometry.frame(in: .global).minY).

selectedItemOffset - опциональная переменная, значение которой при тапе по ItemView устанавливается в nilдля дальнейшего определения необходимости приклеивания ItemView к верхней границе PinnedItemScrollView.

Зная оффсет для ItemView, можно определить момент, когда выделенный элемент должен быть приклеен к границе PinnedItemScrollView. А делать это нужно тогда, когда верхняя граница фрейма ImageViewсовпала с верхней границей фрейма PinnedItemScrollView или сместилась выше этой границы, т.е. когда минимальная Y-координата фрейма ItemView для выделенного элемента становится не больше минимальной Y-координаты фрейма PinnedItemScrollView в том же координатном пространстве.

Чтобы получить доступ к фрейму PinnedItemScrollView используем еще один GeometryReader, но уже для ScrollView. И для того, чтобы создать эффект прилипания выделенной ItemView при выполнении указанного выше условия будем показывать эту ItemView поверх ScrollView в ZStack:

GeometryReader { geometry in
                ZStack {
                    ScrollView {
                        VStack(spacing: 8) {
                            ForEach(1..<21) { index in
                                ItemView(index: index, isSelected: index == selectedItemIndex)
                                    .onTapGesture {
                                        withAnimation {
                                            selectedItemIndex = index
                                            selectedItemOffset = nil
                                        }
                                    }
                                    .background(
                                        GeometryReader { geometry in
                                            Color.clear
                                                .preference(key: OffsetPreferenceKey.self,
                                                            value: geometry.frame(in: .global).minY)
                                        }
                                    )
                                    .onPreferenceChange(OffsetPreferenceKey.self) { value in
                                        if index == selectedItemIndex {
                                            selectedItemOffset = value
                                        }
                                    }
                            }
                        }
                        .padding()
                    }
                    .background(Color.white)
                    
                    // Pinned selected item view to the top of ScrollView
                    VStack {
                        if let selectedItemIndex,
                           let selectedItemOffset,
                           selectedItemOffset < geometry.frame(in: .global).minY {
                            withAnimation {
                                ItemView(index: selectedItemIndex, isSelected: true)
                                    .padding([.top], 0.0)
                                    .padding([.leading, .trailing], 16.0)
                            }
                        }
                        
                        Spacer()
                    }
                }
            }

Выделенный элемент при скролле, наконец, приклеивается к границе ScrollView, и в принципе, можно откупоривать недопитое новогоднее шампанское:

Последние штрихи

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

К этому моменту Google стал уже более сговорчив и для реализации такого фона любезно предложил мне воспользоваться услугами StackOverflow (приведенная структура RoundedCorner заимствована отсюда):

struct RoundedCorner: Shape {
    var radius: CGFloat = .infinity
    var corners: UIRectCorner = .allCorners

    func path(in rect: CGRect) -> Path {
        let path = UIBezierPath(roundedRect: rect,
                                byRoundingCorners: corners,
                                cornerRadii: CGSize(width: radius, height: radius))
        return Path(path.cgPath)
    }
}

Дальше эту структуру применяю к своему незатейливому дизайну:

struct ItemView: View {
    let index: Int
    let isSelected: Bool
    
    var body: some View {
        ZStack {
            if isSelected {
                Rectangle()
                    .clipShape(
                        RoundedCorner(radius: 8, corners: [.bottomLeft, .bottomRight])
                    )
                    .foregroundColor(Color.white)
            }
            
            RoundedRectangle(cornerRadius: 8)
                .foregroundColor(isSelected ? Color.green : Color.gray)
                .overlay(
                    Text("Item \(index)")
                        .foregroundColor(Color.white)
                )
        }
        .frame(height: 50)
    }
}

Ну, вот - теперь и самураи с дизайнерами целы, и перфекционисты сыты:

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