When a user first installs one of our apps, it'd be nice if we could hold their hand a bit, pointing out where the important bits are.

Today we'll look at Gecco, a library that can make creating these walkthroughs quite easy. Let's dive in.

Gecco is built using UIKit's custom transition protocols.

This means there's simply a view controller that we'll configure and present over our content that will display the "spotlight" effect.

In it's most basic form, we can use Gecco by creating a SpotlightViewController, then configuring it's spotlight property to be one of the supplied Oval, Rect, or RoundRect enum cases:

let spotlightVC = SpotlightViewController()

spotlightVC.spotlight = .Oval(
  center: CGPointMake(100, 100),
  width: 100)

presentViewController(spotlightVC, animated: true, completion: nil)

Then we simply present it like normal, neat! In simple cases this is all we need, next we'll look at customizing things further.

We can actually subclass Gecco's SpotlightViewController and use it's spotlightView property to animate the spotlight effect calling out different shapes, even morphing from one to another:

class CustomSpotlightViewController : SpotlightViewController {
  var currentStep = 0
  func updateSpotlightView() {
    switch currentStep {
      case 0: spotlight = .Oval(center: CGPointMake(349, 42), width: 50)
      case 1: spotlightView.move(.Oval(center: CGPointMake(300, 42), width: 50))
      case 2: spotlightView.move(.RoundedRect(center: CGPointMake(375 / 2, 42), size: CGSizeMake(120, 40), radius: 6), moveType: .Disappear)
      case 3: dismissViewControllerAnimated(true, completion: nil)
      default: break
    }

    currentStep++
  }
}

Note about hard-coding values: We've used exact values here to make it easy to understand how Gecco works. In a real world scenario, you would probably be grabbing these values from your views after they've been through a layout pass.

More info about Gecco can be found at git.io/gecco