Walkthrough Implementation in Swift 3.0

A walkthrough is the process of intentionally revealing functionality to a user.

While some people argue that a user should be able to figure out how an app works just by looking at it, walkthroughs are becoming an increasingly popular user experience strategy as apps become more complex. We show the inside screens of the App in Walkthrough.

We can design walkthrough with ScrollView, CollectionView, UIPageViewController etc. We found that UIPageViewController is best for this, so we implemented it with UIPageViewController.

Let WalkthroughVC is the view controller that holds the design of walkthrough, and HomeVC is the view controller in which we will show walkthrough.
We can customize WalkthroughVC  as per requirement.

These are the steps to implement walkthrough in Swift 3.0:

  1. HomeVC must conform the protocol UIPageViewControllerDataSource and UIPageViewControllerDelegate
  2. Create and instantiate UIPageViewController instance – 

               private func initializeWalkThrough() {
       //transition style can be pageCurl and scroll
      let pageController = UIPageViewController.init(transitionStyle: .scroll, navigationOrientation: .horizontal, options: nil)

      pageController.delegate = self
      pageController.dataSource = self

      var frame:CGRect = self.view.bounds
      frame.size.height = UIScreen.main.bounds.size.height – 100 // WalkThrough will cover this height”
       pageController.view.frame = frame

      let walkThroughVC:WalkThroughVC = self.viewControllerAtIndex(index: 0)
      let viewControllers:[WalkThroughVC] = [walkThroughVC]

      pageController.setViewControllers(viewControllers, direction: .forward, animated: false, completion: nil)
      self.addChildViewController(pageController)
      self.view.addSubview(pageController.view)
      self.pageControl.numberOfPages = walkThroughVC.pageArray.count
      self.view .bringSubview(toFront: self.pageControl)
 }

 private func viewControllerAtIndex(index:Int) -> WalkThroughVC {
       let childVC = storyboard?.instantiateViewController(withIdentifier: WalkThrough_Identifier) as! WalkThroughVC
      childVC.pageIndex = index
      return childVC
   }

3. Define DataSource methods of UIPageViewController

                          func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
       let walkThroughVC = viewController as? WalkThroughVC

       var index = walkThroughVC?.pageIndex
       if index == 0 {
           return nil
       }
       index = index! – 1
       return self.viewControllerAtIndex(index: index!)
   }

   func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
       let walkThroughVC = viewController as? WalkThroughVC

       var index = walkThroughVC?.pageIndex
       let pageCount = walkThroughVC?.pageArray.count

       index = index! + 1

       if index == pageCount {
           return nil
       }
       return self.viewControllerAtIndex(index: index!)
   }

 4. Define Delegate method of UIPageViewController to update the PageControl

               func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
if !completed {
           return
       }
       let childVC = pageViewController.viewControllers?.last as? WalkThroughVC
       self.pageControl.currentPage = (childVC?.pageIndex)!
   }

Note : You can download sample project on Walkthrough implementation in Swift 3.0 from here.

Leave a Reply