skip to Main Content
Onboarding Experience In IOS Using Swift

Handle onboarding experience in iOS using Swift

There are lot of times when you just simply want to display a different UIViewController to your users when they first open your iOS app. You can do complicated onboarding views, that you need to scroll through (I hate these personally) to get to the app or a signup screen that forces you to sign up in order to use the app, or a view that suggests the app requires location data, so please enable your GPS.

I would chose the last one. And this is what we did in our StoreLocator iOS app with the latest update. When you open the app for the first time, a special viewcontroller will be displayed forcing you to enable your location updates, otherwise you cannot use the app.

iOS app onboarding swift templates

Handle onboarding in iOS

I always thought that to achieve this you would need some kind of a magic, but it actually pretty easy to accomplish.

There are only few steps to make it work:

  1. Create the separate view (UIViewController in this case) to be shown
  2. Check when to show it
  3. Show it

I’m the fan of multiple storyboards and as you can see Apple also decided to make our lives easier by giving us references in Storyboards, so you can easily connect multiple instances easily. We are going to separate our storyboards to make it super clean and easier for future adjustments, expanding.

 

Create a separate Storyboard for onboarding

Create a new storyboard for your project, call it: Onboarding.

onboarding storyboard ios swift template

In this storyboard, setup all your UIViewControllers and connections you wish to have to be displayed as your onboarding experience. You can get some inspiration from here.

In our case, we just added one UIViewController that holds some labels, icon and a button to enable GPS tracking. When our users tap on the “Enable GPS” button, the famous popup will be displayed to allow the location tracking for this app, and when you allow it, you’ll get to the app.

Check to display onboarding screen

Second point was to determine when to show this onboarding screen. The easiest way to do is to store a boolean value in NSUserDefaults and check its value.

Let’s call this isOnboardingFinished which returns false if we open the app for the first time, or haven’t finished onboarding (in our case, until we don’t tap on Allow for location tracking).

A good practise is to store these NSUserDefaults in a separate object. I usually create an object called: GeneralSettings to have all these savings and reading stored there, to make it easier to manage all these values/keys and make the code cleaner.

The whole object’s code would look like this:

As you can see, we have 2 methods in here, one to save the value, and one to read it. But where should we check this value? The best place for this is when we set the rootViewController for our app in AppDelegate’s didFinishLaunchingWithOptions function.

Since this is the first place where we interact with our app, we can add a check here for our onboarding value to see if this is the first time our users open the app, or if they enabled the GPS tracking already.

You can call the GeneralSettings‘ object isOnboardingFinished() function to check if the onboarding was finished or not, if it wasn’t then alter the rootViewController property of the window object to show our OnboardingViewController.

StoryboardManager.onboardingViewController()  function is just a convenience function to get the OnboardingViewController from the right storyboard. Much better than having this snippet:

There is only one thing left, to save the finished state of the onboarding experience when the user have done the required action (in our case, location was acquired).

In the OnboardingViewController just simply call the saving method:

GeneralSettings.saveOnboardingFinished()

and transition into your app. In our example we used a custom viewController transition to get to our HomeViewController which act as a push animation.

As you can see, it is pretty easy to set it up, but can make a big difference to your app, either you want to do some lightweight configuration or a walkthrough.