How to Add Custom View Controllers in Your iOS App - dummies

How to Add Custom View Controllers in Your iOS App

By Jesse Feiler

Custom view controllers can be important for your iOS app project. The view controller provided by the storyboard is UIViewController (or UITableViewController, which is a type of view controller) and is blissfully unaware of what you want to display in a view, or how to respond to view actions (such as the user tapping the Test Drive button).

You start the process of adding a custom view controller to your project by adding the custom view controller class, as follows:

  1. To create a new group to keep your view controller classes in, select the RoadTrip group in the Project navigator and either right-click and choose New Group from the menu that appears or choose File→ New→New Group from the main menu.

    Note that you need to select the RoadTrip group, right there under RoadTrip Resources, and not the RoadTrip project, which is at the top of the Project navigator.

    To change a file’s group, select the file and drag it to the group you want it to occupy. The same goes for groups as well (after all, they can go into other groups).

  2. The New Group should be selected so you can name your new group View Controller Classes by typing it.

    If it is not already selected, or you want to change the name, select the name and name it (this is the same way you would name a folder on the Mac).

  3. In the Project navigator, select the (newly created) View Controller Classes group and either right-click and then choose New File from the menu that appears or choose File→New→New File from the main menu (or press ___⌘+N ) to bring up the New File dialog.

  4. In the left column of the dialog, select Cocoa Touch under the iOS heading, select Objective-C class template in the top-right pane, and then click Next.

  5. In the Class field, enter TestDriveController, choose UIViewController from the Subclass Of drop-down menu, make sure that the Target for iPad option is selected and that the With XIB for User Interface option is deselected, and then click Next.

    You could also name this TestDriveViewController. It is a view controller but it generally controls the test drive feature. It’s up to you. Apple engineers have gradually been moving to longer and more descriptive names for things. Even the most typing-challenged engineers can live with longer names thanks to Xcode’s Fix-it and code completion logic.

  6. In the Save sheet that appears, select a location, and then click Create.

If you examine the (generated) code added in TestDriveComtroller, you’ll notice two methods.

The first one to focus on is viewDidLoad— you’ll be adding code to it to do any view controller or view initialization after the view controller and its view have been loaded from the storyboard:

- (void)viewDidLoad{ [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib.}

Now that you have a custom view controller (it doesn’t do anything yet, but it will), you need to let the storyboard know that you want to load your custom view controller rather than a UIViewController.

In the Project navigator, select the file Main_iPad.storyboard, and in the Document Outline, select View Controller – TestDrive in the View Controller – TestDrive Scene.

Using the Inspector selector bar, open the Identity inspector in the Utility area and then choose TestDriveController (replacing UIViewController) from the Class drop-down menu in the Custom Class section. This means that when the Detail cell in the Master Controller is tapped, your custom controller — the TestDriveController— will be instantiated and initialized, meaning it will now receive events from the user and connect the view to the Trip model.

image0.jpg

When you write your own code, it’s pretty obvious how an app works: You create an object, initialize it, and then send it messages. When you work with storyboards, however, how your app works may not be so obvious.

How do you go from the objects you added to your user interface in Interface Builder to code that enables you to access these objects? How do you get an Image view to change its image or receive a message that the user has tapped a button, for example?

The objects in your user interface must communicate with each other and with your source code if your app is to allow the user to interact with it. In order to access a user interface object and specify which messages are sent and received, you use Interface Builder to create connections. There are two basic types of connections you can create:

  • Outlet connections, which connect your code to Interface Builder objects that enable you to get and set properties (change the image in an Image view, for example)

  • Action connections, which specify the message to be sent to your code when the control is interacted with (the user taps a button, for example)