Create a tutorial walkthrough of your iOS app

When a user opens up your app for the first time you want to give them a walkthrough on how to use the app by showing them exactly where to tap and to select which option. This is a tutorial that will help you achieve that.

Chaudhry Talha
Nov 2 · 4 min read

Create a new iOS project named WalkThrough. Close Xcode and Open terminal and write the following commands:

$ cd <path to project folder>
$ pod init

No open the Podfile that you have just created and add the following pod in it:

pod 'lottie-ios'

Open terminal and write:

$ pod install

Now open WalkThrough.xcworkspace

The App and UI Elements:

The app is simple. It randomly picks babies names and user can also suggest new names. It consist of three screens i.e. ScreenOneViewController.swift, ScreenTwoViewController.swift and ScreenThreeViewController.swift

What we will demonstrate is when the app is opened for the first time it shows a popup asking user if they want a walk through of the app. If they select yes the process will start and walk them through all the three screens and show a popup when it’s finished. We’ll be only adding walkthrough on first screen for the sake of this tutorial and you’ll get a full idea of how it’s done and you can then create it for your own app.

LottieFiles:

contains some great animations that you can use to make your UX great.

You can browse animations and download .json file fo the animation because this is all you need. as it is clear from the name that one will be used to point at something and other will be used to tell user to tap.

Showing you how to download any animation JSON from LottieFiles

Implementing WalkThrough scenario

I’ll use UserDefaults to identify if user has gone over the walkthrough or not. So in my ViewController.swift I’ve a SegmentedController called boyGirlSegment and a UIButton called spinButton and I want to add animation that it first tell user to tap girl segment, then boy segment and finally press the button. So I’ve made these three AnimationView which comes under LottieFiles:

let girlSegmentTap = AnimationView(name: "tap")let boySegmentTap = AnimationView(name: "tap")let spinButtonTap = AnimationView(name: "point")

and then in a function I’ve called:

func startWalkThrough(){girlSegmentTap.frame = CGRect(x: 0, y: 0, width: 65, height: 60) //1girlSegmentTap.center =  CGPoint(x: self.view.center.x+80, y: boyGirlSegment.center.y) //2girlSegmentTap.loopMode = .loop //3girlSegmentTap.animationSpeed = 0.5 //4girlSegmentTap.contentMode = .scaleAspectFill //5self.view.addSubview(girlSegmentTap) //6self.view.bringSubviewToFront(girlSegmentTap) //7let girlSegmentTapGesture = UITapGestureRecognizer(target: self, action: #selector(girlSegmentTapDone(sender:))) //8girlSegmentTap.addGestureRecognizer(girlSegmentTapGesture) //9girlSegmentTap.play(fromFrame: 0, toFrame: 8, loopMode: .loop, completion: nil) //10}
  1. Giving animation view a frame of 65w and 60h.
  2. Setting center of animation view. Since it’s on the right side so I’ve added 80 in x
  3. .loop indicated that you want the animation to keep on going
  4. animationSpeed determines how fast the animation will played
  5. As animation consist of images so .scaleAspectFill works great to fit the image in the frame we defined in the first step.
  6. Adding AnimationView to the SuperView
  7. Bringing animation view to front
  8. Initializing tap gesture recognizer so that we can know when user has tapped the element we want them to tap.
  9. Adding that gesture to the animation view
  10. Finally, playing the animation. We have given it frame 0 to 8 you can see when you are downloading an animation. As sometimes you just need it to play upto a certain level again and again.

That’s it! The next steps are similar in terms of following these 10 steps. SO here is the rest of the code, I’ve three steps in total and the first step was the girlSegmentTap :

@objc func girlSegmentTapDone(sender:UITapGestureRecognizer)boyGirlSegment.selectedSegmentIndex = 1namePicker.reloadAllComponents()girlSegmentTap.isHidden = true//Add another AnimationView here or just finish the walk through}

RUN IT!

SOURCE CODE

I’ve put this small example on Github:

Chaudhry Talha

Written by

Founded ibjects.com — I like brainstorming & experimenting cool idea. Areas of expertise include UI/UX designing, iOS Developer, Data Analysis, AI & Wordpress.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade