iOS StoryboardingBasics & Beyond

Tarun Sharma iOS Engineer

Agenda

• Intro to Storyboards

• Brief about designing for size classes

• Storyboard References

• Unwind Segues

• Multi Storyboard environment iOS < 9.0

• Custom Segues

• Reusable Views

Intro to Storyboards

View Controller Scenes

Segues

Segues Kind

Show (e.g. Push)

Segues Kind

Show (e.g. Push)

Segues Kind

Show Details

Show (e.g. Push)

Segues Kind

Show Details

Present Modally

Show (e.g. Push)

Segues Kind

Show Details

Present Modally

Present Popover

Show (e.g. Push)

Segues Kind

Show Details

Present Modally

Present Popover

Custom

Show (e.g. Push)

Segues Kind

Show Details

Present Modally

Present Popover

Custom

Segues with a trigger

Segues without a trigger

Segues to self

Designing for Size classes Demo

• Storyboard are large files: slow to load sometimes.

• Requires a big screen to display all (or even partial) content.

• Easily breakable when merging (Git) .

• Cannot reference (or include) other storyboards/XIBs.

Inconveniences of Storyboard

Main Storyboard

Navigation Controller

Table View Controller

Details View Controller

Root segue

Show segue

Main.Storyboard Second.Storyboard

Storyboard References

Storyboard References

Stands in for another scene

Can be destination of Relationship or Triggered Segue

Reference can be in same storyboard or another storyboard

Main storyboard

Secondary storyboard

Reference

DemoStoryboard References

Tab Bar

NVC1

NVC2

NVC3

1

32

32

3

#Demo

4

Go To 1

Go To 3

Presenting Controller

1 2 3

Going Back

• Segues are for new instances only • Going back is a manual process.

• Define a delegate • Assign self to next view controller • Handle user action • Invoke the delegate and pass data • Perform navigation

Unwind Segue

Unwind SeguePicking a destination

Destination picking is manual

Resolve happens on runtime @IBAction func back(segue:UIStoryboardSegue) { }

Implement this method in one of the previous

controller

Unwind SeguePicking a destination

Unwind Segue Flow

4

Go To 1

Go TO 3

Presenting Controller

1 2 3

shouldPerformSegueWithIdentifier (identifier: String, sender: AnyObject?) -> Bool

NO

Abort

Unwind Segue Flow

4

Go To 1

Go TO 3

Presenting Controller

1 2 3

shouldPerformSegueWithIdentifier (identifier: String, sender: AnyObject?) -> Bool

YES

Unwind Segue Flow

4

Go To 1

Go TO 3

Presenting Controller

1 2 3

canPerformUnwindSegueAction(action: Selector, fromViewController: UIViewController, sender: AnyObject) -> Bool

YES

unwindToRoot (sender:

UIStoryboardSegue)

Crash

Not Implemented

Unwind Segue Flow

4

Go To 1

Go TO 3

Presenting Controller

1 2 3

canPerformUnwindSegueAction(action: Selector, fromViewController: UIViewController, sender: AnyObject) -> Bool

YES

unwindToRoot (sender:

UIStoryboardSegue)

Pop

Implemented

Unwind Segue Flow

4

Go To 1

Go TO 3

Presenting Controller

1 2 3

canPerformUnwindSegueAction(action: Selector, fromViewController: UIViewController, sender: AnyObject) -> Bool

NO

Unwind Segue Flow

4

Go To 1

Go TO 3

Presenting Controller

1 2 3

canPerformUnwindSegueAction(action: Selector, fromViewController: UIViewController, sender: AnyObject) -> Bool

YES

unwindToRoot (sender:

UIStoryboardSegue)

Pop

Implemented

Multiple StoryboardsWithout Storyboard References

Main.storyboard

Main.Storyboard Second.Storyboard

Main.StoryboardSecond.Storyboard

Capture user interaction

Main.StoryboardSecond.StoryboardCapture user interaction

UIStoryboard(name: “Second",bundle:nil)

Main.StoryboardSecond.StoryboardCapture user interaction

secondStoryBoard. instantiateInitialViewController()

UIStoryboard(name: “Second",bundle:nil)

Main.StoryboardSecond.StoryboardCapture user interaction

navigation.pushViewController (secondViewController, animated:true)

UIStoryboard(name: “Second",bundle:nil)

secondStoryBoard. instantiateInitialViewController()

Main.StoryboardSecond.Storyboard

navigation.pushViewController (secondViewController, animated:true)

Capture user interaction

UIStoryboard(name: “Second",bundle:nil)

secondStoryBoard. instantiateInitialViewController()

Multiple StoryboardsDemo

Custom Segues

Custom Segues

Custom Segues

Custom Segues

{ }

Custom Segues

• Subclass UIStoryboardSegue

• Override perform() override func perform() -> () { setUpAnimation() sourceViewController .pushViewController(…) }

• Call super.perform()

Custom SeguesMultiple storyboards without storyboard reference

• Connect a segue from control to parent view controller

• Change kind to Custom segue • Give identifier as “controller@storyboard”

• Perform transition to controller of storyboard

• If controller is not provided then perform transition to

initial view controller of storyboard

Reusable views

Adam

Reusable views

Eve India USA

EveIndiaAdamUSAText

Reusable views

TextTextTextText

XIB

Reusable views

• Create UI in a separate XIB file

• Create auto layout constraints

• Create a subclass of UIView, Ex. CustomView

• Assign XIB file owner class to CustomView

• Override initWithFrame(:) and initWithCoder(:) in CustomView class

• Load view from XIB file and add as subview to CustomView

• Drag a UIView in UIViewController scene in storyboard

• Assign UIView’s class to CustomView

Text

Reusable views

TextXIB

initWithCoder(:)

addSubview

Reusable View Demo

Thank you