General_Failure 4 янв 2023 в 12:48

SwiftUI ScrollView и параллакс без тормозов

8 мин

3.2K

✏️ Технотекст 2023

Recovery Mode

Всем привет! Меня зовут Николай, я iOS-разработчик.

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

Итак, начинаем.

В классическом UIScrollView из UIKit можно реализовать протокол UIScrollViewDelegate - метод scrollViewDidScroll(_ scrollView: UIScrollView) скажет нам, насколько сместился основной контент. Но в SwiftUI ScrollView не имеет делегата, поэтому ловить изменения нужно другими способами.

Я нашёл способ обрабатывать смещение - GeometryReader внутри ScrollView:

struct ContentView: View {
    @State private var scrollOffset = CGFloat(0)

    var body: some View {
        ScrollView {
            ZStack {
                Color.green
                    .opacity(0.5)
                    .frame(height: UIScreen.main.bounds.height * 3)

                GeometryReader { proxy in
                    let offset = proxy.frame(in: .named("scroll")).minY
                    scrollOffset = offset
                }
            }
        }
    }
}

Однако GeometryReader не позволяет писать что-то в State-переменные. Компилятор на такой код ругается

"Type '()' cannot conform to 'View'

Для того, чтобы передавать значение в State-переменную, потребовалось использовать PreferenceKey:

struct ScrollOffsetPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0

    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

Меняем содержимое GeometryReader:

GeometryReader { proxy in
    let offset = proxy.frame(in: .named("scroll")).minY
    Color.clear.preference(key: ScrollOffsetPreferenceKey.self,
                           value: offset)
}

Это вынос значения смещения в PreferenceKey. Кроме этого, надо ещё записать значение в State-переменную:

.onPreferenceChange(ScrollOffsetPreferenceKey.self) { value in
    scrollOffset = value
}

Компилятор не ругается. Теперь надо проверить работоспособность. Для этого делаем следующее:

Добавляем контент, чтобы было что скроллить, и это было заметно. Сразу выносим его из body:

var body: some View {
    VStack {
    ScrollView {
        ZStack {
            VStack {
                scrollViewContentBody
            }
            .opacity(0.75)
          
            GeometryReader { proxy in
                let offset = proxy.frame(in: .named("scroll")).minY
                Color.clear.preference(key: ScrollOffsetPreferenceKey.self,
                                       value: offset)
            }
        }
    }
    .onPreferenceChange(ScrollOffsetPreferenceKey.self) { value in
        scrollOffset = value
    }
}

@ViewBuilder
private var scrollViewContentBody: some View {
    Text("Lorem ipsum")
        .font(.largeTitle)
        .padding(16)

    separator

    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.")
        .font(.title)
        .padding(16)

    separator

    Text("At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.")
        .font(.title)
        .padding(16)

   separator
}

private var separator: some View {
    Color.gray
        .frame(height: 1 / UIScreen.main.scale)
        .padding(16)
}

Добавляем дебажный элемент для отображения значения

var body: some View {
    VStack {
        Text("\(scrollOffset)") // <-- этот элемент покажет нам значение смещения
        ScrollView {
            // ...

Смотрим что получилось

Отлично, контент скроллится - значение ловится. Меняем пробники на рабочий код.

Главная вьюшка

struct ScrollOffsetPreferenceKey: PreferenceKey {
    static var defaultValue: CGFloat = 0

    static func reduce(value: inout CGFloat, nextValue: () -> CGFloat) {
        value = nextValue()
    }
}

struct RootView: View {    
    @State private var scrollOffset = CGFloat(0)
    @State private var rate: Decimal? = 3.8
    
    // MARK: - Vars
    
    private var scrolledEnoughToShowTopBar: Bool {
        -scrollOffset > -90
    }
    
    private var topBarHeight: CGFloat {
        UIApplication.shared.safeAreaInsets.top + 42
    }

    private var topBackgroundOffset: CGFloat {
        let bounds = UIScreen.main.bounds
        return scrollOffset / 10 - bounds.height / 8
    }

    private var topImageOffset: CGFloat {
        let bounds = UIScreen.main.bounds
        return scrollOffset / 5 - bounds.height / 20
    }

    // MARK: - UI

    @ViewBuilder
    var body: some View {
        let screenBounds = UIScreen.main.bounds
        ZStack(alignment: .top) {
            AnimatedImage(url: URL(string: "https://images.pexels.com/photos/8856514/pexels-photo-8856514.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"))
                .blur(radius: 4)
                .frame(width: screenBounds.width, height: screenBounds.height)
                .aspectRatio(contentMode: .fill)
                .clipped()

            Group {
                topBackgroundBody
                EntryInfoView(imageOffset: topImageOffset)
                scrollBody.padding(.top, -200)
            }
        }
        .ignoresSafeArea(.all, edges: [.top, .bottom])
    }

    private var topBackgroundBody: some View {
        AnimatedImage(url: URL(string: "https://images.pexels.com/photos/10288317/pexels-photo-10288317.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"))
            .resizable()
            .aspectRatio(contentMode: .fill)
            .frame(width: UIScreen.main.bounds.width,
                   height: UIScreen.main.bounds.height / 1.5)
            .aspectRatio(contentMode: .fill)
            .clipped()
            .offset(y: topBackgroundOffset)
    }

    @ViewBuilder
    private var scrollBody: some View {
        let size = UIScreen.main.bounds
        ScrollView {
            LazyVStack {
                Color.clear
                    .frame(width: size.width, height: size.height - 40)
                ZStack(alignment: .top) {
                    scrollContentBody

                    GeometryReader { proxy in
                        let offset = proxy.frame(in: .named("scroll")).minY
                        Text("\(offset)")
                        Color.clear.preference(key: ScrollOffsetPreferenceKey.self, value: offset)
                    }
                }
                Color.clear
                    .frame(width: size.width,
                           height: UIApplication.shared.safeAreaInsets.bottom)
            }
        }
        .onPreferenceChange(ScrollOffsetPreferenceKey.self) { value in
            scrollOffset = value
        }
    }
    
    private var scrollContentBody: some View {
        LazyVStack(spacing: 0) {
            EntryScrollHeader()

            Color.green.opacity(0.5)
                .frame(height: 200)

            Color.red.opacity(0.5)
            .frame(height: 1000)
        }
    }
}

Заголовок скроллируемого контента

struct EntryScrollHeader: View {
    var body: some View {
        VStack(spacing: 0) {
            HStack {
                VStack {
                    Text("Description")
                }

                Spacer()

                Button {

                } label: {
                    Image(systemSymbol: .bookmark)
                        .foregroundColor(.black.opacity(0.25))
                        .font(.system(size: 25, weight: .regular, design: .default))
                }
            }
            .padding(.bottom, 4)

            HStack {
                VStack {
                    Text("Lorem")
                    Text("Ipsum")
                }
                Spacer()
            }

        }
        .frame(height: 76)
        .padding([.leading, .trailing], 15)
        .padding(.top, 12)
        .background(Color.white)
    }
}

И верхняя вьюшка

struct EntryInfoView: View {
    private var imageOffset: CGFloat

    init(imageOffset: CGFloat) {
        self.imageOffset = imageOffset
    }

    @ViewBuilder
    var body: some View {
        let screenBounds = UIScreen.main.bounds

        ZStack(alignment: .topLeading) {
            HStack {
                infoBody

                cardsBody
                    .frame(height: screenBounds.height / 4)
                    .padding(8)
            }
            .padding(16)
        }
        .offset(y: imageOffset)
    }

    @ViewBuilder
    private var infoBody: some View {
        let screenBounds = UIScreen.main.bounds
        let rating = Decimal(4.2)

        VStack(spacing: 0) {
            Text(rating.ratingString)
                .font(.system(size: 24))
                .padding(.top, 8)

            Text("49,849")
                .font(.system(size: 10))
                .padding(.top, 4)

            EntryLittleStarsView(rating: rating)
                .foregroundColor(.orange)
                .padding(4)
        }
        .frame(minHeight: screenBounds.width / 3)
        .background(Color.white)
        .cornerRadius(8)
    }

    private var cardsBody: some View {
        GeometryReader { proxy in
            let size = CGSize(width: proxy.size.width - 48,
                              height: proxy.size.height - 48)
            let imageSize = CGSize(width: proxy.size.width - 64,
                                   height: proxy.size.height - 64)
            ZStack {
                cardBody(size: size, color: .red) {
                    ZStack {
                        Color.white

                        AnimatedImage(url: URL(string: "https://images.pexels.com/photos/10136037/pexels-photo-10136037.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"))
                            .resizable()
                            .blur(radius: 2)
                            .aspectRatio(contentMode: .fill)
                            .frame(width: imageSize.width, height: imageSize.height)
                            .clipped()
                            .cornerRadius(12)
                    }
                }
                .offset(y: 48)

                cardBody(size: size, color: .green) {
                    ZStack {
                        Color.white

                        AnimatedImage(url: URL(string: "https://images.pexels.com/photos/10243803/pexels-photo-10243803.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"))
                            .resizable()
                            .blur(radius: 2)
                            .aspectRatio(contentMode: .fill)
                            .frame(width: imageSize.width, height: imageSize.height)
                            .clipped()
                            .cornerRadius(12)
                    }
                }
                .offset(x: 24, y: 24)

                cardBody(size: size, color: .blue) {
                    ZStack {
                        Color.white

                        AnimatedImage(url: URL(string: "https://images.pexels.com/photos/10278313/pexels-photo-10278313.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"))
                            .resizable()
                            .aspectRatio(contentMode: .fill)
                            .frame(width: imageSize.width, height: imageSize.height)
                            .clipped()
                            .cornerRadius(12)
                    }
                }
                .offset(x: 48)
            }
        }
    }

    private func cardBody<Content: View>(size: CGSize, color: Color, @ViewBuilder content: () -> Content) -> some View {
        ZStack {
            color
                .opacity(0.75)
                .frame(width: size.width, height: size.height)
                .cornerRadius(16)
            content()
                .frame(width: size.width - 8,
                       height: size.height - 8)
                .cornerRadius(14)
        }
        .shadow(color: .black.opacity(0.1), radius: 4, x: 0, y: 2)
    }

    private var priceBody: some View {
        VStack {
            ZStack {
                Image(systemSymbol: .circleSquare)
                HStack(alignment: .top, spacing: 0) {
                    Text("$")
                        .font(.system(size: 9))
                    Text("497")
                        .font(.system(size: 20))
                }
            }
            HStack(spacing: 0) {
                Image(systemSymbol: .plusMessage)
                Text("Average price")
            }
            .font(.system(size: 10))
            .opacity(0.25)
        }
    }
}

Запускаем

Работает как задумано!

Продолжаем.

Наполняем вьюшку боевым контентом:

Заменяем содержимое scrollContentBody

LazyVStack(spacing: 0) {
    EntryScrollHeader()

    ZStack {
        VStack(spacing: 0) {
            hugeSeparator
            separator
            hugeSeparator
            RateView(rate: $rate, swipeEnabled: true)
            hugeSeparator
            EntryItemPairingView()
            EntryAboutView()
        }
    }
    VStack(spacing: 0) {
        EntryNotesView()
        EntryMapView()
        EntryBestItemsView()
        EntryLatestCommentsView()
    }
}

Запускаем

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

Запустил профилировщик SwiftUI

В профилировщике я узнал, что мои элементы очень долго отрисовываются. Но зачем их рендерить постоянно, ведь они не меняются? Оказалось, что рендеринг в SwiftUI происходит при изменении @State-переменных. А в неё как раз и записывается смещение ScrollView. То есть рендер у меня происходит каждый раз, когда я прокручиваю контент пальцем по экрану!

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

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

Как я решил проблему.

После того как я перебрал кучу статей, погоревал о возможно впустую потраченном времени (был шанс остаться без вознаграждения - кому нужно тормозящее приложение?), мне в голову пришла идея. Зачем использовать @State-переменные, если можно не использовать?

Суть идеи в том, что смещение ScrollView отлавливает GeometryReader. Но ведь результат из него можно не передавать наружу, родительской вьюшке, а давать дочерним вьюшкам!

Итак, приступим:

Перемещаем элементы, которые нужно смещать с другой скоростью, внутрь GeometryReader

ScrollView {
    LazyVStack {
        Color.clear
            .frame(width: size.width, height: size.height - 40)
        ZStack(alignment: .top) {
            GeometryReader { proxy in
                let offset = proxy.frame(in: .named("scroll")).minY
                Text("\(offset)")
                topBackgroundBody(offset: offset)
                EntryInfoView(imageOffset: topImageOffset(scrollOffset: offset))
            }

            scrollContentBody
        }
    }
}

Также пришлось переделать подсчёт уменьшенного смещения

private func topBackgroundOffset(scrollOffset: CGFloat) -> CGFloat {
    min(-scrollOffset, -scrollOffset * 0.9 - topBarHeight)
}

private func topImageOffset(scrollOffset: CGFloat) -> CGFloat {
    let bounds = UIScreen.main.bounds
    return -scrollOffset * 0.8 - bounds.height / 20
}

Ведь раньше отступ был от корневой вьюшки, а теперь от контента ScrollView.

Запускаем

Ну вот, теперь стало намного плавнее.

Заключение

Надеюсь, что моё решение поможет кому-нибудь ещё, а также что оно будет улучшего и оптимизировано.

Я выложил исходный код на всеобщее обозрение в репозиторий и разбил этапы по веткам. Начало в ветке start, скролл с тормозами - в ветке freezing_scroll, плавный скролл - в ветке smooth_scroll. Смотрите, пользуйтесь, критикуйте, исправляйте!

Теги:

Хабы:

SwiftUI ScrollView и параллакс без тормозов

Итак, начинаем.

Продолжаем.

Как я решил проблему.

Заключение

Публикации

Истории

Работа

Ближайшие события