Sitemap

SwiftUI Progressive Onboarding

1 min readNov 9, 2020

--

There are already a few tutorials and open source projects in Github about onboarding screens in SwiftUI but none of them is progressive. What is a progressive onboarding or so called interactive onboarding?

During the user’s first interaction with a new app and its interface, the user should get familiarised with its features. For this purpose, the app should display tips on how to properly use its special functions and features.

This short tutorial explains how you can prepare an introductory presentation of your app’s special functions. You can find the codes in the Github project. https://github.com/tnrvrd/SwiftUIProgressiveOnboard

First you have to know the exact position and the size of the view (button, text field, image, or else). To achieve this, you can use ‘GeometryReader’ in SwiftUI. Bind a property to GeometryReader and get the exact frame of the view. After that, you should put a tooltip or instructions view in a calculated frame and use an overlay view (ZStack) on top of the screen. This will dim the rest of the screen.

I hope this library helps you meet your requirements.

If you are not looking for SwiftUI, you can check the ‘Instructions’ project — a famous progressive onboarding library for Swift in Github. https://github.com/ephread/Instructions

Thank you!

--

--

Muhammed Tanriverdi
Muhammed Tanriverdi

Written by Muhammed Tanriverdi

Maps & Navigation SDK • Technical Customer Success • iOS Expertise • Lifelong Learner

No responses yet