Organizing Scenes over Multiple Xcode Storyboard Files

The storyboard created in the preceding chapter is a small example consisting of only two scenes. When developing complex apps, however, it is not unusual for a user interface to consist of many more scenes. Once a storyboard grows in terms of the number of scenes, it can become challenging to navigate and locate specific scenes. This problem can be alleviated by organizing the scenes over multiple storyboards and then using storyboard references to reference a scene in one storyboard from within another storyboard.

Continuing to use the project created in the preceding chapter, this chapter will cover how to organize scenes in separate storyboard files and use storyboard references to establish segues between scenes in different storyboard files.

Organizing Scenes into Multiple Storyboards

The storyboard created in this chapter is a small example consisting of only two scenes. When developing complex apps, however, it is not unusual for a user interface to consist of many more scenes. Therefore, existing scenes in a storyboard file can be exported to a second storyboard file using a simple menu selection. To see this in action, select the Main.storyboard file and drag and drop an additional view controller onto the storyboard canvas. Next, add button and label views so that the scene appears as illustrated in Figure 25-1 using the same steps as those followed for the previous scenes:

Figure 25-1

Before moving the new scene to a different storyboard file, add a second button to Scene 2 labeled “Go to Scene 3” and establish a modal presentation segue to the newly added scene. As before, set the Auto Layout settings to suggested constraints.

To move this new scene to a second storyboard, select it in the storyboard and choose the Editor -> Refactor to Storyboard… menu option (note that although only a single scene is being exported in this case, multiple scenes can also be selected and moved in a single operation). Once the menu option is selected, a panel (Figure 252) will appear seeking the name to be given to the new storyboard. In the Save As: field, name the file Second. storyboard:

 

You are reading a sample chapter from Building iOS 17 Apps using Xcode Storyboards.

Buy the full book now in eBook or Print format.

The full book contains 96 chapters and 760 pages of in-depth information.

Learn more.

Preview  Buy eBook  Buy Print

 

Figure 25-2

Click on the Save button to save the scene to the new storyboard. Once saved, two changes will have taken place. First, a review of the Project Navigator panel will reveal the presence of a new storyboard file named Second. storyboard, which, when selected, will reveal that it contains the third scene that was initially located in the Main.storyboard file.

Second, a review of the Main.storyboard file will show that the third scene has now been replaced by a storyboard reference, as shown in Figure 25-3, and that the segue is still in place:

Figure 25-3

Select the Second storyboard reference and display the Attributes Inspector panel. Note that the Storyboard property is set to the Second storyboard file and that, by default, it is configured to display the Initial View Controller within that storyboard, which in this case is the only scene within the second storyboard:

Figure 25-4

Compile and run the app and verify that the Go to Scene 3 button does indeed segue to the third scene.

Establishing a Connection between Different Storyboards

The previous section explored separating existing scenes within a storyboard into separate storyboard files. Consider a segue that needs to be established between two scenes in two different storyboards where no reference has yet been established. To see this in action, select the File -> New File… menu option and, in the resulting panel, locate the User Interface section and select the Storyboard option. Click Next and name the file Third.storyboard before clicking on Create.

 

You are reading a sample chapter from Building iOS 17 Apps using Xcode Storyboards.

Buy the full book now in eBook or Print format.

The full book contains 96 chapters and 760 pages of in-depth information.

Learn more.

Preview  Buy eBook  Buy Print

 

Select the Third.storyboard file from the Project Navigator panel and drag a View Controller instance from the Library panel onto the storyboard canvas. Next, add a label to the view and change the text to read Scene 4 before setting appropriate Auto Layout constraints.

The objective is now to establish a segue from the “Go to Scene 4” button in the scene in the Second.storyboard file to the new scene in the Third.storyboard file.

The first step is to assign a storyboard ID to scene 4. Within the Third.storyboard file, select the View Controller, so it is highlighted in blue, display the Identity Inspector (View -> Inspectors -> Identity) and change the Storyboard ID setting to Scene4Controller.

The next step is to add a reference to this scene from within the Second.storyboard file. Select this file and drag a Storyboard Reference object from the Library onto the canvas. Select the reference object, display the Attributes Inspector, change the Storyboard menu to Third and enter Scene4Controller into the Referenced ID field as shown in Figure 25-5:

Figure 25-5

The storyboard reference is now configured to reference the scene 4 view controller in the Third storyboard file and can be used as the target for a segue. Remaining in the Second.storyboard file, Ctrl-click on the Go to Scene 4 button and drag the resulting line to the storyboard reference object. Release the line and select Present Modally from the popup menu.

 

You are reading a sample chapter from Building iOS 17 Apps using Xcode Storyboards.

Buy the full book now in eBook or Print format.

The full book contains 96 chapters and 760 pages of in-depth information.

Learn more.

Preview  Buy eBook  Buy Print

 

Compile and run the app a final time and verify that the button initiates the segue to the fourth scene as configured.

Summary

This chapter has covered the steps involved in organizing scenes over multiple storyboard files. In addition, it has covered the exporting of scenes from an existing storyboard file to a new storyboard file and outlined the steps required to manually establish storyboard references between scenes residing in different storyboard files.


Categories