In the beginning of mobile development, paper and pen were used to sketch out design flows for applications. Then came flowcharting software, in which you could digitally record your workflows and processes. Now developers have an Xcode tool called “Storyboards” that offers a visual representation of an app’s workflow, which can produce a working framework for your app.
In the first two recipes of this chapter, you will use storyboards to build a simple, multipage application in iOS 7 that contains information about a fictional app-making company. The last recipe of the chapter will show you how to create a tab-bar application using storyboards.
So, What’s in a Story (board)?
A storyboard is a collection of .xib files packaged together along with some metadata about the views and their relationships to each other. It is the ultimate separation of views from models and controllers that was intended since the early days of Model-View-Controller (MVC) programming. A storyboard provides a way for you to easily create multiple scenes and the connections between them by simply dragging and dropping components. The benefit to using storyboards is that you can do all of this with very little code.
The storyboard has two main components: scenes and segues.
A scene is any view that fills the screen of a device. Scenes contain user interface (UI) objects and are controlled by view controllers. Figure 2-1 displays five different scenes in the storyboard that you will soon build.
Figure 2-1. A storyboard with five scenes
A segue is basically a connection between two scenes that allows one scene to lead to another scene. When one scene leads to another, we say that the first scene is presenting the second. Likewise, the second scene is the presented scene.
There are several types of segues you can create:
- Push segue – A push segue requires a navigation controller or a tab-bar controller in order to operate. When moving from one view controller to another, you are pushing a new view controller on to that navigation or tab-bar controller’s stack. The benefit is that the navigation or tab-bar controller can keep track of other view controllers on the stack and automatically provide navigation between them. Whenever you use a navigation controller or tab-bar controller, you should use this type of segue.
- Modal segue – A modal segue does not need a navigation controller to perform the segue. The caveat is that you lose the functionality of the automatic navigation because a modal segue is simply one view controller presenting another view controller.
- Pop-over segue – A pop-over segue is like a modal segue except it creates a small window that is presented over the top of the current scene. A pop-over is available only in iPad apps.
- Custom segue – A custom segue is used for coding custom transitions between scenes.
A segue is of the class UIStoryboardSegue and contains three properties: sourceViewController, destinationViewController, and identifier. The identifier is an NSString that can be used to identify specific segues from your code.
The app would normally initiate a segue based on an action from the user. This can be the touching of a button or table view cell, or it could be the result of a gesture recognizer. Segues are represented on the storyboard by a line connecting two scenes, as shown in Figure 2-2.
Figure 2-2. A segue connecting two scenes
Multiple scenes can be tied to a single scene through segues, as you will see in later in this chapter. Depending on how you organize your storyboard, segues can go from right to left or from left to right.
Recipe 2-1: Implementing a Navigation Controller
In this example, you will build a simple project that displays information about a company. It uses a navigation bar to display the title of the current page.
Storyboards are available in all the application templates in Xcode except the empty project template. For this recipe you’ll use the Single View Application template. Name the project “Recipe 2-1 to 2-2: About Us,” as demonstrated in Figure 2-3.
Figure 2-3. Configuring a project for storyboard use
After you’ve created your project, you’ll see in the project navigator, as Figure 2-4 demonstrates, that your project contains a file named “Main.storyboard.” Click this file to load it into Interface Builder and start building your storyboard.
Figure 2-4. A project with a storyboard file
The first thing you’re going to do is embed the main view in a navigation controller. Do this by selecting the view and then selecting Editor 
Embed In Navigation Controller in the main menu. This creates a navigation controller and connects it to your existing storyboard view. Figure 2-5 shows an example.
Figure 2-5. The main view in a storyboard, embedded in a view controller
Finally, create the user interface of the main view. Add a label, a text view, and two buttons to it and make it resemble Figure 2-6. To save space, the view controller in the example has been moved to overlap the navigation controller.
Figure 2-6. A simple user interface to display company information
Note Typically, navigation controllers are tied directly to a table-view controller when you drag them from the object library. This is the default configuration for the navigation controller seen in the object library. Because we do not want to get into the intricacies of a table view controller quite yet, we opted to connect a navigation controller to a view instead.
When you run this application on a 3.5” display, the two buttons will be cut off. To fix this, select both buttons and, from the lower-right corner of the editor, press the button shown in Figure 2-7 and choose “reset to suggested constraints.” This is an AutoLayout feature that we’ll talk about in detail in Chapter 3.
Figure 2-7. Applying suggested constraints so buttons show up on a 3.5” display
Adding a New Scene to the Storyboard
The next step is to add a new scene that displays the company contact information when the “Contact Us” button is tapped. Do this by dragging a view controller from the object library onto the storyboard.
To start, set up the user interface of the new scene so that it resembles the view on the right in Figure 2-8.
Figure 2-8. The storyboard with a new scene for contact information
To connect the new contact information view to the About Us view, Ctrl-click the “Contact Us” button and drag a line to the Contact Info view, as shown in Figure 2-9. This is the same action used to connect outlets, only this time you’re using it to create a transition or segue between two scenes.
Figure 2-9. Pressing and holding the “Ctrl” key while dragging a line between the button and the scene creates a transition
When you release the mouse button a pop-up will display, asking how you want the transition to be performed. You can choose between push, modal, and custom seques. Because you are using a navigation controller, select “push” (as in Figure 2-10) so that a “Back” button is automatically set up for you in the navigation bar. After the connection is made, you’ll notice that the navigation bar is automatically added to the new view.
Figure 2-10. Selecting the “push” action segue
Make the navigation bar display the title of the current scene. One way to do that is to select “Navigation Item” in the view controller navigator (see Figure 2-11). Another way is to simply click the navigation bar.
Figure 2-11. Selecting the navigation item of a storyboard view controller
Set the Title attribute in the attribute inspector with the view selected, as shown in Figure 2-12. Set the title of the main view controller to “About Us.” Then select the view containing the contact information and set its navigation item’s title to “Contact Info.”
Figure 2-12. Setting the title of a navigation item
You set the identifier of a segue by selecting it in the storyboard and viewing its properties in the attributes inspector, as shown in Figure 2-13.
Figure 2-13. Setting a segue identifier in the attributes inspector
One habit to get into is providing your segues with an identifier. This helps future-proof your apps if you end up connecting multiple segues to one view. You can check the identifier of the calling segue to see the path the user is using to reach the presented scene. Typically you would take advantage of the prepareForSegue method to obtain the identifier.
If you run this app now, as shown by Figures 2-14 and 2-15, the “Contact Us” button will work and will display the Contact Info view. Note that this works without having to write a single line of code!
Figure 2-14. Main simulated view
Figure 2-15. The resulting view when the “Contact Us” button has been tapped
Recipe 2-2: Implementing a UITableViewController
Now let’s expand upon the example from Recipe 2-1 and implement a UITableViewController, a class that manages a table view. This recipe will show you how to create a detail view that dynamically changes based on the cell selected in a table view. The first item that should come to mind when thinking about lists in iOS is UITableViewController. Storyboarding takes UITableViewController to a whole new level of convenience (refer to Chapter 4 for an extensive introduction to table views as they are used outside storyboards).
First, drag a UITableViewController to the storyboard from the object library, creating an Apps Table view.
In a table view scene there is a section called “Prototype Cells” at the top (see Figure 2-16). With storyboards, you can customize the layout and objects of a UITableViewCell with something called a prototype. We’ll go into this further later in this recipe.
Figure 2-16. A table view controller scene
Select the table view and, in the attributes inspector, change the table view’s Content attribute from Dynamic Prototypes to “Static Cells.” Also, change the Style attribute to “Grouped,” which gives a good separation between groups. Figure 2-17 shows these settings and the resulting table view.
Figure 2-17. A table view scene with Content set to “Static Cells” and Style set to “Grouped”
Because every cell will have the same layout, delete the bottom two cells so you can customize and then quickly duplicate the top cell. You can customize the cell like any other container view by dragging objects from the object library.
Select the cell and choose “Subtitle” from the Style drop-down menu in the attributes inspector. This creates a title and a subtitle on the table view cell. Change these values, as shown in Figure 2-18, by double-clicking each one.
Figure 2-18. A customized table view cell
Now you’ll duplicate the cell to create three instances of it. Do that by clicking and holding the “Alt” key (⌥), while dragging the cell downward. Repeat again to add a third row to the table view. Now you can customize the two new cells so they contain unique information, resembling Figure 2-19.
Figure 2-19. A table view with three customized cells
All that is left is to connect the “Our Apps” button to this new view. Select the button in the About Us view and Ctrl-click-drag to the table view scene you just created. Then set up a push segue between the “Our Apps” button and the table view scene. Your storyboard should look similar to Figure 2-20.
Figure 2-20. A storyboard with three scenes
Note What you may discern from Figure 2-20 is that storyboards require a lot of screen space. As your app grows, it can get quite difficult to work effectively with the user interface, especially for iPad apps. This is one of the reasons why some developers, despite all the advantages that come with storyboards, prefer to stick with .xib files and keep designing the user interfaces individually.
Now when you run the application, you can tap the “Our Apps” button, and the table view scene will show as in Figure 2-21. You’ve accomplished all this without writing any code. Amazing!
Figure 2-21. The table view scene showing a list of “awesome” apps
The preceding app segment works well enough without any code, but by adding just a little bit of code behind the scenes you can create an even more powerful interface in a very short period of time. Before you start coding, you will need to set up the interface. When you see a table view, you instinctively know that there is likely to be a detail view waiting for you when you touch one of the cells. Let’s add that detail view now.
To create a detail view, you’ll first drag and drop a new view controller onto the storyboard. Make it look like Figure 2-22 by adding a label for the title and a text view for the description text.
Figure 2-22. A detail view user interface
In a real scenario, this page would likely contain additional information, such as a link to a web page where you can purchase the app in question. However, we’re going to keep this example as simple as possible and just show the name and the description.
You want each of the table view cells to segue to this view when touched, so Ctrl-drag the line from each of the three cells to the detail view. This time when you release the mouse button, you’ll notice that you can choose between setting up a selection segue or an accessory action. (see Figure 2-23). For the purpose of this recipe, though, create push selection segues that will trigger a transition when the cell is selected (as opposed to when its accessory button is tapped).
Figure 2-23. A pop-up with options to create either a selection segue or an accessory button action for a table view cell
Again, once you’ve connected the cells to the detail view using the push method, the view will display the navigator bar. In the same way you did earlier, set the title in the corresponding navigator item to “App Details.”
As Figure 2-24 shows, there should now be three segues connecting the table view to the app details scene.
Figure 2-24. Multiple segues connecting a table view to a detail view
Select the first segue and enter an identifier for it in the attributes inspector. Set it to “PushAppDetailsFromCell1,” as shown in Figure 2-25.
Figure 2-25. Setting an identifier for a segue that’s pushing a detail view
Repeat the process for the other two segues and set their identifier to “PushAppDetailsFromCell2” and “PushAppDetailsFromCell3,” respectively. You’ll use these identifiers later to identify which segue triggered a transition to the app details scene.
You’ve gotten this far without using any code, but that convenience is about to end. You need to start generating some dynamic content on the app details view controller, and you are going to need to dive into some code for that.
Create a model class to hold information about your apps. Create a new class (CMD + N), a subclass of NSObject, with the name “AppDetails.” (Refer to Recipe 1-6 for information about creating a new class.)
Add the following properties and init method declarations to the header file of the new class, as shown in Listing 2-1.
Listing 2-1. Adding a custom initializer method declaration and accompanying properties
//
// AppDetails.h
// Recipe 2-1 to 2-2: About Us
//
#import <Foundation/Foundation.h>
@interface AppDetails : NSObject
@property(strong, nonatomic) NSString *name;
@property(strong, nonatomic) NSString *description;
-(id)initWithName:(NSString *)name description:(NSString *)descr;
@end
The implementation of the initWithName:description: method goes into the AppDetails.m file, as shown in Listing 2-2.
Listing 2-2. Implementing the custom initializer method
//
// AppDetails.m
// Recipe 2-1 to 2-2: About Us
//
#import "AppDetails.h"
@implementation AppDetails
-(id)initWithName:(NSString *)name description:(NSString *)descr
{
self = [superinit];
if (self)
{
self.name = name;
self.description = descr;
}
returnself;
}
@end
In the preceding bit of code, you are simply creating a custom initializer that sets the name and description of the detail view controller when a new instance of the class is created.
Setting Up a Custom View Controller
With the data object in place, you can make the detail view controller display the attributes of an AppDetails object. For that, you need to attach a custom view controller class to the detail view.
To do this, create a new Objective-C class with the name “AppDetailsViewController” and make it a subclass of UIViewController. Make sure the “With XIB for user interface” checkbox is cleared. Refer to Figure 1-25 for the location of this checkbox.
Now attach the new view controller class to the app details scene. Go back to the storyboard editor and select the view controller object at the bottom of the app details scene (see Figure 2-26).
Figure 2-26. Selecting the view controller object of a scene
With the view controller object selected, go to the identity inspector and set the Class attribute to “AppDetailsViewController,” as shown in Figure 2-27.
Figure 2-27. Attaching a custom view controller class to a scene
Create outlets for the name label and the description text view. Do this by using the assistant editor (see Recipe 1-4). Use the following respective outlet names:
- nameLabel
- descriptionTextView
You also need a property to hold the current app details object. Add the code in Listing 2-3 to your AppDetailsViewController.h file.
Listing 2-3. Importing the AppDetails class and creating a property for it
//
// AppDetailsViewController.h
// About Us
//
#import <UIKit/UIKit.h>
#import "AppDetails.h"
@interface AppDetailsViewController : UIViewController
@property (weak, nonatomic) IBOutlet UILabel *nameLabel;
@property (weak, nonatomic) IBOutlet UITextView *descriptionTextView;
@property (strong, nonatomic) AppDetails *appDetails;
@end
In AppDetailsViewController.m, add the code in Listing 2-4 to the viewDidLoad method.
Listing 2-4. Setting the name label and description text outlets from the AppDetails class
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
self.nameLabel.text = self.appDetails.name;
self.descriptionTextView.text = self.appDetails.description;
}
The app details scene is now ready to accept an AppDetails object and populate its label and text view with data from it. What’s left to do is provide the scene with an appropriate object. For this, you need to create yet another custom view controller class, this time for the table view scene.
So, as you did before with the app details scene, create a new Objective-C class. This time make it a subclass of UITableViewController and name it “OurAppsTableViewController.” Attach the new class to the “Our Apps” scene by selecting its view controller object from the storyboard. In the identity inspector, set OurAppsTableViewController as its class.
Open the new OurAppsTableViewController.m file. The first thing you need to do is get rid of the existing table view datasource and delegate methods that are there by default. This is because you’re using a static table view content, as defined in your storyboard. So delete or comment out the following methods:
- numberOfSectionsInTableView:
- tableView:numberOfRowsInSection:
- tableView:cellForRowAtIndexPath:
- tableView:didSelectRowAtIndexPath:
Now you need to tie one of the three segues to the app details scene. You will need to know which segue is called upon by determining which table view cell was selected. This can be done by overriding the prepareForSegue:sender: method.
Note In our example, we are simply determining which segue triggered which transition, but the prepareForSeque:sender: method is also useful for passing data from one view controller to the next.
Add the code in Listing 2-5 to the OurAppsTableViewController.m file.
Listing 2-5. Implementing the “prepare for segue” method
//
// OurAppsTableViewController.m
// Recipe 2-1 to 2-2: About Us
//
#import "OurAppsTableViewController.h"
#import "AppDetailsViewController.h"
#import "AppDetails.h"
@implementation OurAppsTableViewController
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
NSString *name;
NSString *description;
if ([segue.identifierisEqualToString:@"PushAppDetailsFromCell1"])
{
name = @"Awesome App";
description = @"Long description of the awesome app...";
}
elseif ([segue.identifierisEqualToString:@"PushAppDetailsFromCell2"])
{
name = @"Even More Awesome App";
description = @"Long description of the even more awesome app...";
}
elseif ([segue.identifierisEqualToString:@"PushAppDetailsFromCell3"])
{
name = @"The Most Awesome App Ever";
description = @"Long description of the most awesome app ever seen...";
}
else
{
return;
}
AppDetailsViewController *appDetailsViewController = segue.destinationViewController;
appDetailsViewController.appDetails =
[[AppDetailsalloc] initWithName:name description:description];
}
// ...
@end
As you can see from the code, you are identifying each segue by its identifier and creating an AppDetails object with information about the corresponding app. You then hand over the object to the view controller for the app details scene.
If you run your app now, you’ll see that each of the table view cells will show different information in the app details scene. Figure 2-28 demonstrates a simulated result of this application.
Figure 2-28. Three app details scenes with information about three apps
The app is working as intended up to this point, but what if you add new apps to your inventory? With the current implementation, you would have to update the table view with new cells for each new app item. In this section, we show you how you can update the table view dynamically instead, using cell prototypes instead of static cells.
Start by changing the table view from static to dynamic. To do this, return to the “Our Apps” scene and delete the three rows. This also removes the three connected segues. Now select the table view and, in the attributes inspector, change the Content attribute from “Static Cells” to “Dynamic Prototypes,” as shown in Figure 2-29. Make sure the Prototype Cells field is set to “1” as well.
Figure 2-29. Changing table view content from “Static Cells” to “Dynamic Prototypes”
Next, you need to modify the prototype cell that will be the template for the cells you’ll later add dynamically. You can design the cell the same way you did with the static cells; however, you’ll make one change by adding a disclosure indicator icon to it. Do this with the Accessory attribute for the cell. Figure 2-30 shows the prototype cell with the gray disclosure indicator icon, which looks like an arrow pointing to the right.
Figure 2-30. A table view cell prototype with two labels and a disclosure indicator
Next, you need to set a reuse identifier, which will be used later to retrieve instances based on the prototype cell. With the prototype cell selected, go to the attributes inspector and enter “AppCell” for the Identifier attribute, as shown in Figure 2-31.
Figure 2-31. Setting a reuse identifier for a cell prototype
Now create a segue for the transition to the app details scene. Ctrl-drag a line from the prototype cell to the app details scene. As you did with the static cells, use the “push” selection segue type.
Select the segue you just created and set its Identifier attribute to “PushAppDetails.”
You are now finished with the setup of the prototype cell. The remaining task is to write the code for the dynamic displaying of the table view content. Switch to OurAppsTableViewController.m and add the code shown in Listing 2-6.
Listing 2-6. Adding table view delegate methods
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return1;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return3;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
//Set the CellIdentifier that you set in the storyboard
static NSString *CellIdentifier = @"AppCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
switch (indexPath.row)
{
case0:
cell.textLabel.text = @"Awesome App";
cell.detailTextLabel.text = @"Long description of the awesome app...";
break;
case1:
cell.textLabel.text = @"Even More Awesome App";
cell.detailTextLabel.text = @"Long description of the even more awesome app...";
break;
case2:
cell.textLabel.text = @"The Most Awesome App Ever";
cell.detailTextLabel.text =
@"Long description of the most awesome app ever seen...";
break;
default:
cell.textLabel.text = @"Unkown";
cell.detailTextLabel.text = @"Unknown";
break;
}
return cell;
}
You can now make the prepareForSegue:sender: method a lot simpler by utilizing the information stored in the cells. Update the prepareForSegue:sender: method’s implementation, as shown in Listing 2-7.
Listing 2-7. Simplifying the prepareForSegue method
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
if ([segue.identifierisEqualToString:@"PushAppDetails"])
{
AppDetailsViewController *appDetailsViewController = segue.destinationViewController;
UITableViewCell *cell = sender;
appDetailsViewController.appDetails =
[[AppDetailsalloc] initWithName:cell.textLabel.text
description:cell.detailTextLabel.text];
}
}
Now when you run the app, the table view loads as before using the one prototype cell and the datasource. Figure 2-32 shows the simulated result of your newest updates to your application. In this example, you are still using static data for the AppDetails class, but this app could easily be extended to use a core data object model or even to pull a list of apps from a remote file on your server. Those features will be covered in more detail in Chapter 14.
Figure 2-32. The same table view loading its content through its view controller using a prototype cell
Recipe 2-3: Implementing a UITabBarController
A tab bar controller is another handy controller for segmenting your application into multiple sections. Ideally, these sections would contain a series of views that are related to each other. A good example of a UITabViewController is the one currently used by the iTunes app. At the bottom of the app you’ll see tabs for Music, Movies, TV Shows, and so on. This recipe demonstrates the creation of a tab bar controller app that will display some news categories.
To begin, we’ll need to create a new single view application project. Yes, we could create a tabbed application, but that takes the fun out of it. Title the new project “Recipe 2-3: News App.” When the new single view project opens, select the Main.storyboard file from the project navigator and delete the view that is already created for you. With the Main.storyboard file still open, drag a tab bar controller object into the storyboard from the object library. Your storyboard should now resemble Figure 2-33.
Figure 2-33. Storyboard with new tab bar controller object
The first two scenes have already been created for you, so drag two more view controllers onto the screen so as to have four scenes.
Once the two new view controllers are on the storyboard, while holding the control button, click and drag from the tab bar controller to one of the new view controllers. When prompted for the segue type, choose Relationship Segue view controllers from the dialog box, as shown in Figure 2-34. Repeat for the other view controller you added to the screen.
Figure 2-34. Selecting the correct segue type for a tab bar controller
At this point, all the segue connections should be made between the view controllers and the tab bar controllers. If you have done everything correctly, you should see segue connections, as shown in Figure 2-35.
Figure 2-35. Tab bar controller with all segue connections made
If you look at the bottom of the tab bar controller in Figure 2-36, you’ll see that the tabs have updated accordingly. You will also notice that all the icons are the same and that the labels are not very descriptive. We’ll fix these next.
Figure 2-36. Updated icons that appear as a result of connecting a view controller
For this app we’re going to create four new categories: Headlines, Sports, Tech, and Politics. To change these icons and labels, we simply need to change the individual view icon properties.
To change the image icon, we’ll first need to add images to the project. The iOS Human Interface Guidelines from Apple specify that tab bar icons should be 60 x 60 pixels for retina devices and 30 x 30 pixels for non-retina devices. Both sizes will be needed for any project that needs to maintain compatibility with non-retina devices. Files need to be in PNG format and work best when they are black and white. You can find the iOS Human Interface Guidelines at https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/.
If you create your own images, title the 30 x 30 pixel icon whatever you want and give the 60 x 60 pixel icon the same name but add @2x to the end of the file name. For example: anImage.png and [email protected]. Prior to Xcode 5, this naming convention was a requirement in order for the compiler to choose the appropriate size for retina devices. Now, with the introduction of image assets, this is no longer a requirement. Still, it’s a good naming convention from an organizational standpoint.
Because we’ll be creating four categories, we’ll need four icons. Select the “images.xcassets” file in the project navigator and create four new image sets by pressing the “+” button in the lower-left corner of the editor window and choosing “New Image Set,” as shown in Figure 2-37.
Figure 2-37. Creating a new image set
Name the image sets “headlinesIcon,” “politicsIcon,” “sportsIcon,” and “techIcon” by double-clicking each image set in the left pane of the editor window (Figure 2-38).
Figure 2-38. Creating a new image set
Once the images are created, drag and drop the .png icon file from your finder onto one of the boxes provided in the image set, as shown in Figure 2-39. The 1x box corresponds to the 30 x 30 pixel image, and the 2x box corresponds to the 60 x 60 pixel image. Do this for each of the image sets.
Figure 2-39. Dragging and dropping a 30 x 30 pixel image to a 1x location
Now that we have all our images sets, we can start editing the icon attributes on the view controllers. Select the Main.storyboard file and then select the icon on the first view item (Item 1) by clicking it, as shown in Figure 2-40.
Figure 2-40. Selecting a tab bar icon for editing
From the attributes inspector you can change the title, image, badge, identifier, and tag. For this example, you’ll set only the title and image. Give the first view icon a title of “Headlines” and change the image title to “headlinesIcon” (Figure 2-41). Repeat this process for the tab bar icons of the other three views.
Figure 2-41. Changing icon attributes
Next, you should add a label to each of the view controllers so you know for sure that the view has changed. Add labels and title them, as shown in Figure 2-42.
Figure 2-42. Changing icon attributes
Now you are ready to run the application. You’ll notice at the bottom of the screen in Figure 2-43 that the four icons are there with the images we specified. The selected icon gets highlighted by default when that view controller is active.
Figure 2-43. The final tab bar controller app
Summary
In this chapter, we have covered navigation controllers, table view controllers, and tab view controllers. By now you should have a pretty good grasp of how to navigate and utilize storyboards. In the next chapter, we will demonstrate auto layout, a subject we briefly touched on in this chapter. Auto layout can help you position objects in a view so that they display correctly on all screen sizes and in various orientations.