iOS StoryboardNHN NEXT

Min Hyeok Kim

What’s the best way to develop an iOS UI?

• iOS Storyboards

• NiBs (or XiBs)

• Custom code

Storyboard?

A storyboard is a visual representation of the app’s user interface, showing screens of content and the transitions between them.

iOS5+ SDK

Present the content in the detail or master area depending on the content of the screen.

Present the content modally.

Present the content as a popover anchored to an existing view.

A custom segue enabling you to write your own behaviors.

show

modal

popover

custom

A Scene Corresponds to a Single View Controller and Its Views

• On iPhone, each scene corresponds to a full screen’s worth of content; on iPad, multiple scenes can appear on screen at once—for example, using popover view controllers. Each scene has a dock, which displays icons representing the top-level objects of the scene. The dock is used primarily to make action and outlet connections between the view controller and its views.

• As with all objects loaded from a story board, to finish initializing a view controller loaded from a

storyboard you override awakeFromNib.

A Segue Manages the Transition Between Two Scenes

• You can set the type of transition (for example, modal or push) on a segue. Additionally, you can subclass a segue object to implement a custom transition.

• You can pass data between scenes with the method prepareForSegue:sender:, which is invoked on the view controller when a segue is triggered. This method allows you to customize the setup of the next view controller before it appears on the screen. Transitions usually occur as the result of some event, such as a button being tapped, but you can programmatically force a transition by calling

performSegueWithIdentifier:sender: on the view controller.

Storyboards have a number of advantages:

• With a storyboard you have a better conceptual overview of all the screens in your app and the connections between them.

• Storyboards can describe the transitions between the various views. These transitions are called “segues” and you create them by connecting your view controllers right in the storyboard.

• Storyboards make working with table views a lot easier with prototype cells and static cells features.

• Storyboards make it easier to use Auto Layout, a feature that allows you to define mathematical relationships between elements that defined their position and sizing.

Storyboards as a useful tool, but not so much a replacement as a complement for NIBs and custom code.

Storyboards are the right choice in some, but not all situations.

Large Storyboard

A classic beginner’s mistake is to create one massive project-wide Storyboard.

A Storyboard is a board with a story to tell. It shouldn't be used to mix unrelated stories into one big volume.

A storyboard should contain view controllers that are logically related to each other—which doesn’t mean every view controller.

Large Storyboards, other than being difficult to browse and maintain, add a layer of complexity to a team environment:

when multiple developers work on the same storyboard file at the same time, source control conflicts are inevitable.

The id itself doesn’t provide any indication whatsoever as to its true significance, so you have nothing to work with.

Performance

• when a Storyboard is loaded, all of its view controllers are instantiated immediately. Fortunately, this is just an abstraction and not true of the actual implementation

Prototypes

• Storyboards simplify the prototyping and mocking up of user interfaces and flow.

Reusability

• a single view controller cannot be individually extracted and reused elsewhere as a single independent entity; it’s dependent on the rest of the Storyboard to function.

Data flow

• Storyboards take care of handling the flow between view controllers, but not the flow of data. So, the destination controller has to be configured with code, overriding the visual experience.

References• Storyboard - iOS Developer Library

• About Storyboards - iOS Developer Library

• iOS User Interfaces: Storyboards vs. NIBs vs. Custom Code - toptal

• 10 practical tips for iOS developers using storyboards - xmcgraw

• Storyboard, Xibs & co… - polarios

• Storyboards Tutorial in Swift: Part1 - raywenderlich