34,333
edits
Changes
New page: <table border="0" cellspacing="0" width="100%"> <tr> <td width="20%">[[|Previous]]<td align="center">Table of Contents<td width="20%" align="right">...
<table border="0" cellspacing="0" width="100%">
<tr>
<td width="20%">[[Previous (iPhone iOS 5)|Previous]]<td align="center">[[iPhone iOS 5 Development Essentials|Table of Contents]]<td width="20%" align="right">[[Next (iPhone iOS 5)|Next]]</td>
<tr>
<td width="20%"><td align="center"><td width="20%" align="right"></td>
</table>
<hr>
<google>BUY_IOS5</google>
The preceding chapter looked at manually coding screen navigation functionality into an iOS 5 iPhone application. The example presented in that chapter provides the flexibility that is generally required when implementing a master-detail based user interface comprising of a number of table view based screens. In practice, there are many situations where much simpler forms of navigation are required and where the coding work required for table view based navigation might well be considered overly complex. In recognition of this fact, Apple has introduced the concept of Storyboarding in Xcode 4.2.
The goal of this chapter is to provide an overview of storyboarding and to work through an example demonstrating this new Xcode feature in action.
== An Overview of Xcode Storyboarding ==
Storyboarding is a feature built into Xcode version 4.2 and later that allows both the various screens that comprise an iOS application and the navigation path through those screens to be visually assembled. Using the Interface Builder component of Xcode the developer simply drags and drops view controllers onto a canvas and designs the user interface of each view in the normal manner. The developer then drags lines to link individual trigger controls (such as a button) to the corresponding view controllers that are to be displayed when the control is selected by the user. Having designed both the screens (referred to the in the context of storyboarding as scenes) and specified the transitions between scenes (referred to as segues) Xcode generates all the code necessary to implement the defined behavior in the completed application. The style of transition for each segue (page fold, cross dissolve etc) may also be defined within Interface Builder. Further, segues may also be triggered programmatically in situations where behavior cannot be defined graphically using Interface Builder.
The finished design is saved by Xcode to a storyboard file. Typically, an application will have a single storyboard file though there is no restriction preventing the use of multiple storyboard files within a single application.
== Creating the Storyboard Example Project ==
The remainder of this chapter will work through the creation of a simple application using storyboarding to implement multiple scenes with segues defined to allow user navigation.
Begin by launching Xcode and creating a new project using the ''Single View Application'' template. On the project options panel enter ''storyboard'' as both the product name and class prefix and make sure that the ''Use Storyboard'' option is selected before clicking ''Next''. Save the project to a suitable location by clicking on the ''Create'' button.
== Accessing the Storyboard ==
Upon creation of the new project, Xcode will have created what appears to be the usual collection of files for a single view application. Instead of a NIB file for the initial view controller, however, Xcode has created a storyboard file named ''MainStoryboard.storyboard''. Select this file in the project navigator panel to view the storyboard canvas as illustrated in Figure 18-1:
[[Image:]]
Figure 18-1
The view displayed on the canvas is the view for the storyBoardViewController created for us by Xcode when we selected the Single View Application template. The arrow pointing inwards to the left side of the view indicates that this is the initial view and will be the first view displayed when the application launches. Objects may be added to the view in the usual manner by dragging and dropping items from the Object library (''View -> Utilities -> Show Object Library'') onto the view canvas. For the purposes of this example, drag a label and a button onto the view canvas. Using the properties panel, change the label text to Scene One and the button text to Go to Scene 2:
[[Image:]]
Figure 18-2
== Adding Scenes to the Storyboard ==
To add a second scene to the storyboard, simply drag a view controller object from the Object library panel onto the canvas. Figure 18-3 shows a second scene added to a storyboard:
[[Image:]]
Figure 18-3
Drag and drop a label and a button into the second scene and configure the objects so that the view appears as follows:
[[Image:]]
Figure 18-4
As many scenes as necessary may be added to the storyboard, but for the purposes of this exercise will we use just two scenes. Having implemented the scenes the next step is to configure segues between the scenes.
== Configuring Storyboard Segues ==
As previously discussed, a segue is the transition from one scene to another within a storyboard. Within the example application, touching the Go to Scene 2 button will segue to scene 2. Conversely, the button on scene 2 is intended to return the user to scene 1. To establish a segue, hold down the Ctrl key on the keyboard, click over a control (in this case the button on scene 1) and drag the resulting line to the scene 2 view. Upon releasing the mouse button a menu will appear. Select the Modal menu option to establish the segue. Repeat these steps to establish a segue between the button on scene 2 and the scene 1 view. As segues are established Interface Builder displays lines indicating the connections:
[[Image:]]
Figure 18-5
As more scenes are added to a storyboard it becomes increasingly difficult to see more than a few scenes at one time on the canvas. To zoom out simply double click on the canvas. To zoom back in again simply double click once again on the canvas. Zoom buttons are also provided in the bottom right hand corner of the design canvas.
== Configuring Storyboard Transitions ==
Xcode provides the option to change the visual appearance of the transition that takes place during a segue. By default a Cover Vertical transition is performed whereby the new scene slides vertically upwards from the bottom of the view to cover the currently displayed scene. To change the transition, select the corresponding segue line, display the attributes inspector (''View -> Utilities -> Show Attributes Inspector'') and modify the Transition setting. In Figure 18 6 the transition has been changed to ''Cross Dissolve'':
[[Image:]]
Figure 18-6
To delete a segue from a storyboard simply select the arrow and press the keyboard delete key.
== Associating a View Controller with a Scene ==
At this point in the example we have two scenes but only one view controller (the one created by Xcode when we selected Single View Application). Clearly in order to be able to add any functionality behind scene 2 it too will need a view controller. The first step, therefore, is to add the files for a view controller to the project. Right click on the storyboard target at the top of the project navigator panel and select ''New File…'' from the resulting menu. In the new file panel select UIViewController subclass and click ''Next'' to proceed. On the options screen verify that the Subclass of menu is set to UIViewController and that the ''Targeted for iPad'' and ''With XIB for user interface'' options are both deselected (since the view already exists in the storyboard there is no need for an NIB user interface file) and name the class Scene2ViewContoller.
Select the ''MainStoryboard.storyboard'' file in the project navigator panel and select the View Controller button located in the panel beneath the Scene 2 view as shown in Figure 18-7:
[[Image:]]
Figure 18-7
With the view controller for scene 2 selected, display the Identity Inspector (''View -> Utilities -> Identity Inspector'') and change the Class from UIViewController to Scene2ViewController:
[[Image:]]
Figure 18-8
Scene 2 now has a view controller and corresponding source files where code may be written to implement any required functionality.
== Triggering a Storyboard Segue Programmatically ==
In addition to wiring up controls in scenes to trigger a segue it is also possible to initiate a preconfigured segue from within the application code. For the sake of an example, assume that when scene 2 is displayed we want to segue back to scene 1 if the device is turned upside down. Since there is no way to implement this within the storyboard canvas in Interface Builder the only option to trigger the segue is from within the code of the application. Segues are triggered from within code by calling the ''performSegueWithIdentifier:'' method of the UIViewController class. One of the arguments required by this method is the identifier of the segue to be performed. By default, segues created in storyboards are not given identifiers. The first step, therefore, is to assign an identifier to the segue that returns to scene 1 from scene 2. To achieve this, select the ''MainStoryboard.storyboard'' file in the project navigator and select the segue arrow for the scene 2 to scene 1 segue. Display the Identity Inspector panel (''View -> Utilities -> View Identity Inspector'') and enter the “SegueToScene1” in the Identifier text field.
Next, edit the Scene2ViewController.m file, scroll down to the ''shouldAutorotateToInterface-Orientation:'' method and modify it to trigger the segue when the device detects that it is upside down:
<pre>
- (BOOL)shouldAutorotateToInterfaceOrientation:
(UIInterfaceOrientation)interfaceOrientation
{
if (interfaceOrientation ==
UIInterfaceOrientationPortraitUpsideDown)
{
[self performSegueWithIdentifier: @"SegueToScene1"
sender: self];
}
// Return YES for supported orientations
return (interfaceOrientation ==
UIInterfaceOrientationPortrait);
}
</pre>
After making the changes, compile and run the application. Select the button to segue to scene 2 and then rotate the device so that it is upside down (if using the iOS iPhone Simulator, repeatedly select one of the ''Hardware -> Rotate'' menu options until the simulator is upside down). This should trigger the segue and cause the transition back to scene 1.
== Performing Tasks before a Segue ==
Before a segue is performed by the storyboard runtime environment, a call is made to the ''prepareForSegue:'' method of the current view controller. If any tasks need to be performed prior to the segue taking place simply implement this method in the current view controller and add code to perform any necessary tasks:
<pre>
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
NSLog(@"Segue about to be performed");
}
</pre>
== Summary ==
The new Storyboard feature introduced in Xcode 4.2 allows for the navigational flow between the various views in an iOS application to be visually constructed without the need to write code. In this chapter we have covered the basic concepts behind storyboarding and worked through the creation of an example iPhone application using this feature.
<tr>
<td width="20%">[[Previous (iPhone iOS 5)|Previous]]<td align="center">[[iPhone iOS 5 Development Essentials|Table of Contents]]<td width="20%" align="right">[[Next (iPhone iOS 5)|Next]]</td>
<tr>
<td width="20%"><td align="center"><td width="20%" align="right"></td>
</table>
<hr>
<google>BUY_IOS5</google>
The preceding chapter looked at manually coding screen navigation functionality into an iOS 5 iPhone application. The example presented in that chapter provides the flexibility that is generally required when implementing a master-detail based user interface comprising of a number of table view based screens. In practice, there are many situations where much simpler forms of navigation are required and where the coding work required for table view based navigation might well be considered overly complex. In recognition of this fact, Apple has introduced the concept of Storyboarding in Xcode 4.2.
The goal of this chapter is to provide an overview of storyboarding and to work through an example demonstrating this new Xcode feature in action.
== An Overview of Xcode Storyboarding ==
Storyboarding is a feature built into Xcode version 4.2 and later that allows both the various screens that comprise an iOS application and the navigation path through those screens to be visually assembled. Using the Interface Builder component of Xcode the developer simply drags and drops view controllers onto a canvas and designs the user interface of each view in the normal manner. The developer then drags lines to link individual trigger controls (such as a button) to the corresponding view controllers that are to be displayed when the control is selected by the user. Having designed both the screens (referred to the in the context of storyboarding as scenes) and specified the transitions between scenes (referred to as segues) Xcode generates all the code necessary to implement the defined behavior in the completed application. The style of transition for each segue (page fold, cross dissolve etc) may also be defined within Interface Builder. Further, segues may also be triggered programmatically in situations where behavior cannot be defined graphically using Interface Builder.
The finished design is saved by Xcode to a storyboard file. Typically, an application will have a single storyboard file though there is no restriction preventing the use of multiple storyboard files within a single application.
== Creating the Storyboard Example Project ==
The remainder of this chapter will work through the creation of a simple application using storyboarding to implement multiple scenes with segues defined to allow user navigation.
Begin by launching Xcode and creating a new project using the ''Single View Application'' template. On the project options panel enter ''storyboard'' as both the product name and class prefix and make sure that the ''Use Storyboard'' option is selected before clicking ''Next''. Save the project to a suitable location by clicking on the ''Create'' button.
== Accessing the Storyboard ==
Upon creation of the new project, Xcode will have created what appears to be the usual collection of files for a single view application. Instead of a NIB file for the initial view controller, however, Xcode has created a storyboard file named ''MainStoryboard.storyboard''. Select this file in the project navigator panel to view the storyboard canvas as illustrated in Figure 18-1:
[[Image:]]
Figure 18-1
The view displayed on the canvas is the view for the storyBoardViewController created for us by Xcode when we selected the Single View Application template. The arrow pointing inwards to the left side of the view indicates that this is the initial view and will be the first view displayed when the application launches. Objects may be added to the view in the usual manner by dragging and dropping items from the Object library (''View -> Utilities -> Show Object Library'') onto the view canvas. For the purposes of this example, drag a label and a button onto the view canvas. Using the properties panel, change the label text to Scene One and the button text to Go to Scene 2:
[[Image:]]
Figure 18-2
== Adding Scenes to the Storyboard ==
To add a second scene to the storyboard, simply drag a view controller object from the Object library panel onto the canvas. Figure 18-3 shows a second scene added to a storyboard:
[[Image:]]
Figure 18-3
Drag and drop a label and a button into the second scene and configure the objects so that the view appears as follows:
[[Image:]]
Figure 18-4
As many scenes as necessary may be added to the storyboard, but for the purposes of this exercise will we use just two scenes. Having implemented the scenes the next step is to configure segues between the scenes.
== Configuring Storyboard Segues ==
As previously discussed, a segue is the transition from one scene to another within a storyboard. Within the example application, touching the Go to Scene 2 button will segue to scene 2. Conversely, the button on scene 2 is intended to return the user to scene 1. To establish a segue, hold down the Ctrl key on the keyboard, click over a control (in this case the button on scene 1) and drag the resulting line to the scene 2 view. Upon releasing the mouse button a menu will appear. Select the Modal menu option to establish the segue. Repeat these steps to establish a segue between the button on scene 2 and the scene 1 view. As segues are established Interface Builder displays lines indicating the connections:
[[Image:]]
Figure 18-5
As more scenes are added to a storyboard it becomes increasingly difficult to see more than a few scenes at one time on the canvas. To zoom out simply double click on the canvas. To zoom back in again simply double click once again on the canvas. Zoom buttons are also provided in the bottom right hand corner of the design canvas.
== Configuring Storyboard Transitions ==
Xcode provides the option to change the visual appearance of the transition that takes place during a segue. By default a Cover Vertical transition is performed whereby the new scene slides vertically upwards from the bottom of the view to cover the currently displayed scene. To change the transition, select the corresponding segue line, display the attributes inspector (''View -> Utilities -> Show Attributes Inspector'') and modify the Transition setting. In Figure 18 6 the transition has been changed to ''Cross Dissolve'':
[[Image:]]
Figure 18-6
To delete a segue from a storyboard simply select the arrow and press the keyboard delete key.
== Associating a View Controller with a Scene ==
At this point in the example we have two scenes but only one view controller (the one created by Xcode when we selected Single View Application). Clearly in order to be able to add any functionality behind scene 2 it too will need a view controller. The first step, therefore, is to add the files for a view controller to the project. Right click on the storyboard target at the top of the project navigator panel and select ''New File…'' from the resulting menu. In the new file panel select UIViewController subclass and click ''Next'' to proceed. On the options screen verify that the Subclass of menu is set to UIViewController and that the ''Targeted for iPad'' and ''With XIB for user interface'' options are both deselected (since the view already exists in the storyboard there is no need for an NIB user interface file) and name the class Scene2ViewContoller.
Select the ''MainStoryboard.storyboard'' file in the project navigator panel and select the View Controller button located in the panel beneath the Scene 2 view as shown in Figure 18-7:
[[Image:]]
Figure 18-7
With the view controller for scene 2 selected, display the Identity Inspector (''View -> Utilities -> Identity Inspector'') and change the Class from UIViewController to Scene2ViewController:
[[Image:]]
Figure 18-8
Scene 2 now has a view controller and corresponding source files where code may be written to implement any required functionality.
== Triggering a Storyboard Segue Programmatically ==
In addition to wiring up controls in scenes to trigger a segue it is also possible to initiate a preconfigured segue from within the application code. For the sake of an example, assume that when scene 2 is displayed we want to segue back to scene 1 if the device is turned upside down. Since there is no way to implement this within the storyboard canvas in Interface Builder the only option to trigger the segue is from within the code of the application. Segues are triggered from within code by calling the ''performSegueWithIdentifier:'' method of the UIViewController class. One of the arguments required by this method is the identifier of the segue to be performed. By default, segues created in storyboards are not given identifiers. The first step, therefore, is to assign an identifier to the segue that returns to scene 1 from scene 2. To achieve this, select the ''MainStoryboard.storyboard'' file in the project navigator and select the segue arrow for the scene 2 to scene 1 segue. Display the Identity Inspector panel (''View -> Utilities -> View Identity Inspector'') and enter the “SegueToScene1” in the Identifier text field.
Next, edit the Scene2ViewController.m file, scroll down to the ''shouldAutorotateToInterface-Orientation:'' method and modify it to trigger the segue when the device detects that it is upside down:
<pre>
- (BOOL)shouldAutorotateToInterfaceOrientation:
(UIInterfaceOrientation)interfaceOrientation
{
if (interfaceOrientation ==
UIInterfaceOrientationPortraitUpsideDown)
{
[self performSegueWithIdentifier: @"SegueToScene1"
sender: self];
}
// Return YES for supported orientations
return (interfaceOrientation ==
UIInterfaceOrientationPortrait);
}
</pre>
After making the changes, compile and run the application. Select the button to segue to scene 2 and then rotate the device so that it is upside down (if using the iOS iPhone Simulator, repeatedly select one of the ''Hardware -> Rotate'' menu options until the simulator is upside down). This should trigger the segue and cause the transition back to scene 1.
== Performing Tasks before a Segue ==
Before a segue is performed by the storyboard runtime environment, a call is made to the ''prepareForSegue:'' method of the current view controller. If any tasks need to be performed prior to the segue taking place simply implement this method in the current view controller and add code to perform any necessary tasks:
<pre>
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
NSLog(@"Segue about to be performed");
}
</pre>
== Summary ==
The new Storyboard feature introduced in Xcode 4.2 allows for the navigational flow between the various views in an iOS application to be visually constructed without the need to write code. In this chapter we have covered the basic concepts behind storyboarding and worked through the creation of an example iPhone application using this feature.