Подсветка элементов онбординга. Spotlight onboarding / Highlight element. SwiftUI iOS15+

[FaizovTM]

Интересный кейс, спасибо автору))

[Elenaa3654]

Было очень полезно , впервые вижу такую крутую инфу так понятно

[aaaan_ch]

Вот это вы крутой!

[Bardakan]

есть ли пример исходников? Пишу сейчас аналогичный "bottom sheet", но в UIKit и без подсветки компонентов на экране. Интересно посмотреть, как вы решаете вопрос с нижним отступом safe area на разных устройствах.

[kuradnaths]

Добрый день! Нужно немного больше конкретикии касательно исходников, которые вас интересуют.

В текущем решении для рисовки используется SUI, а не kit и соотвественно показ заднего фона / шторки (или любого другого вашего контекта - например окно диалога), так же строится на модификаторе из SUI (fullScreenCover - см имплементацию clearBackground). И сама шторка из себя так же представляет sui структуру.

Буду рад вам помочь, просто нужны уточнения)

[Bardakan]

Меня интересует, у вас например на SE и X расстояние между кнопкой и нижним краем экрана разное? Если да, то как вы этого добиваетесь?

[kuradnaths]

Под кнопкой - подразумевается кнопка аналогичная кнопке "Понятно", со скриншота симулятора? Контент шторки представлен как самостоятельная структура, на конкретный девайсы мы не завязываем разные отступы, они всегда соответствуют стандартам в 16 пикеселей.

Или вы не про эту кнопку?

[Bardakan]

да, я про эту кнопку. У меня получается, что если завязываюсь на отступ от safe area (т.е. например, как вы пишете - 16px независимо от устройства), то при анимации сворачивания-разворачивания шторки эта кнопка остается на месте и "ломает" разметку.

Чтобы она все-таки тоже анимированно перемещалась по экрану, привязываю ее к superview, но тогда приходится высчитывать вручную размер safe area и выставлять отступ кнопки снизу программно. Правда я UIKit использую

[Ellmissss]

я только начинаю углубляться в сферу IT и наткнулась на Вашу статью. очень познавательно, Спасибо!

[Dran_WRLD]

Как раз раздумывал о таком подходе 2 недели назад.

Спасибо большое!

[kostpn]

Полезно и со вкусом🔥

[nasty__m]

Отличная статья

[X_giggle]

Very nice 🙌🏽

[avaleriyas]

Очень информативно, спасибо автору за статью! Мемы супер🤓

[bagr89]

Что насчёт стандартного TipKit?

[kuradnaths]

Добрый день! Тк в нашем проекте мы держим IOS15, мы не смогли им воспользоваться :( Если вопрос про то, почему не сделали 2 разные версии (для 17 оси - TipKit и 15,16 осей - решение выше), то это слишком дорого (в плане трудозатрат). Тк поддержка двух версий, включает в себя их постоянные обновления / улучшения. Но соглашусь, TipKit отличная либа для такого рода задач, думаю когда будем приближаться к 17оси - мы на нее перейдем)

[varton86]

Не хватает кода структур OnboardingHighlightElement и OnboardingHighlightElementKey для полноты картины)

[kuradnaths]

Добрый день! Прикреплю ниже:

/// Модель включает необходимые данные. Можете ее так же дополнить нужными параметрами
/// такими как extraHeight, extraWidth если нужны доп. отступы относительно подсветки
public struct OnboardingHighlightElement: Identifiable {
    public let anchor: Anchor<CGRect>
    public let id: String
    public let radius: CGFloat
}

public struct OnboardingHighlightElementKey: PreferenceKey {
    // MARK: - Static Properties

    public static var defaultValue: [String: OnboardingHighlightElement] = [:]

    // MARK: - Static Functions

    public static func reduce(
        value: inout [String: OnboardingHighlightElement],
        nextValue: () -> [String: OnboardingHighlightElement]
    ) {
        value.merge(nextValue()) { $1 }
    }
}

[varton86]

Спасибо! 👍

[JeYlooooo]

Мемы на уровне) По своему опыту замечаю, что часть из них зашли, потыкались, не разобрались и ушли. Как раз нужен онбординг.