Back

A View from a Segue

In this post I'm going to explore what it means to segue between views, when it can be appropriate to customise transitions and how to do this using custom segue's to improve user experience. I'll show you how we've used them in our apps instead of using Apple's default segue's so you can do the same.

Iphone

A user's journey through your application has a big impact on how likely they are to return to your app. Giving users a way to easily navigate from one view to the next makes a measurable impact, it helps to define a custom flow and bring focus to elements in a new view.

Segues help define the transition between one view controller and the next, and they also let the developer pass data between the views to assist in the users experience.

TheUIKit framework in iOS provides some predefined segues with default animation, but how often do you see them in Apple's Core applications? The partial curl (left), for example, was last used in Apple's skeumorphic designed Maps app.

CustomUIStoryboardSegue objects were introduced with UIStoryboards in iOS 5 but moved into the spotlight with iOS 7.

Take the Spring board animation - since iOS 7 you’ve seen it every time you open/ close and apps, switching between year and month views on the calendar and more recently 3D Touch’s Peek gesture.

Modal Transition

 

Standard Apple Segues

 

 

The built in Modal transition is functionally sound, but jumps focus on presentation and particularly when you go back to the original view.

Push

Modal Transition

 

Standard Apple Segues

 

 

The built in Modal transition is functionally sound, but jumps focus on presentation and particularly when you go back to the original view.

Segue

SpringBoard Segue

 

The SpringBoard segue takes a gentler approach so the users' focus doesn't jump to the bottom of the screen. Instead it mimics a zoom to show more information. There's a bounce towards the end, giving a degree of inertia similar to a UIScrollView so there isn't a harsh completion.

Creating your UIStoryboardSegue Class

public func perform () { }

Before we jump in, let's look at some of the properties and methods in the UIStoryboardSegue class that we'll be working with:

  • 1. sourceViewController : The view controller that you're starting with and the one that is initiating the transition.
  • 2. destinationViewController : The view controller that you want to display.
  • 3. perform : The storyboard calls this method when it is time to perform the visual transition from the view controller in the sourceViewController to the destinationViewController, so we override it in our custom class to provide a custom transition between the sourceViewController and the destinationViewController

 

See Apple's documentation for more details: UIStoryboardSegue

 

Let's Segue

1. Add the destination view onto the source view, with the alpha set to 0, so you can transform it before the animation starts.

// Set desitination view settings
self. destinationViewController.view.alpha = 0.0
self. destinationViewController.view.frame = self. sourceViewController.view.frame
self. destinationViewController.view.clipsToBounds = true

// If there's an origination center point, adjust the destination view controller to that point
if let origin = self. originatingPoint {
     self. destinationViewController.view.center = origin
}

// Add desitnation to source view
self. sourceViewController.view.addSubview( self. destinationViewController.view)

2. Transform the destination view bounds to the source view, using a CGAffineTransform with Scale. You can also, optionally, pass through a source CGRect like 3D Touch so it transitions from a particularly point on the view.

3. Reset the scale (from step 2) on the source view to mimic a zoom effect.

// Transition
UIView.animateWithDuration(0.3,

delay: 0.0,
usingSpringWithDamping: 0.8,
initialSpringVelocity: 0.5,
options: .TransitionCrossDissolve,
animations: { () -> Void in
// Transform
self. destinationViewController.view.transform = CGAffineTransformInvert(CGAffineTransformIdentity)
self. destinationViewController.view.center = self.sourceViewController.view.center
self. destinationViewController.view.alpha = 1.0
}) { (complete) -> Void in }
}

// Set destination view settings
self. destinationViewController.view.alpha = 0.0
self. destinationViewController.view.frame = self. sourceViewController.view.frame
self. destinationViewController.view.clipsToBounds = true

// If there's an origination center point, adjust the destination view controller to that point
if let origin = self. originatingPoint {
     self. destinationViewController.view.center = origin
}

 

Put all three together in your custom class and you'll be able to Segue between controllers.

paints
wishlist
Coders and wizards Hunger for knowledge

Fuse is best viewed Portrait