In the early days of iOS development the Interface Builder was cumbersome and not too helpful. Now the interface builder is nicely integrated into Xcode and can be very helpful and easy to use. This article serves as an introduction into the storyboard as well as how to work with segues.
The storyboard in Xcode allows a developer to lay out the design of an App before any code has to be written. This can be helpful for conceptualizing an idea. Often a developer may want to transition between multiple scenes. To transfer between scenes with the storyboard a Segue needs to be implemented.
- You Are Familiar with Xcode 4.5 if not, do so here.
- You know how to create a project with a single view controller
A segue is basically a connection between two views which allows one view to present another when an action(most commonly a button push) is performed. depending on the application, one of two types of segues may be used.
The Modal Segue
The modal segue is the most simple type of segue. Generally a modal segue would be used when there is no need to share information between the presenting view and the presented view. A good example of this would be a login screen.
The Push Segue
A push segue will be necessary for either the navigation controller or the tab bar controller. These types of controllers handle memory managment and help with passing data between views.
Using A Modal Segue
A modal segue is really pretty simple as far as implementation. For this example we’ll make a login screen that will take us to a view. Start of with a new single view controller project titled “modalview”.
In the main story board drag three Labels, two text fields, and a button from the objects explorer in the bottom right hand pane to the view. Then change the text on the labels and buttons to look like the following image:
next drag a new view controller onto the storyboard. From the new storyboard control drag from the login button to the new view controller. When prompted choose “modal” from the dialogue.
On the new View Controller add a label that says “You’re Logged In” and change the background color. I also changed the font size. You can do this from the attributes inspector in the top right pane. When you’re done it should look like the following:
Now go ahead and simulate the App. Ok, I guess you may have noticed that the login screen doesn’t actually do anything. The purpose of this tutorial is to show how segues work. we do not want to get into the in deep realm of credentials and validations. The point of this is to basically show you how to move to a new view when a button is pushed. I imagine we’ll have a recipe for Logins later.
In a real app. we may have the login screen jump right to a navigation controller or a tab bar controller. In which case, we would do what was done right here except control drag from our button to the navigation controller or tab bar controller.
Using the Push Segue With The Navigation Controller
Go ahead and start another single view controller project titled “navsegue”.
select the single view controller on the storyboard and delete it.
From the objects explorer pane in the bottom right hand corner drag a navigation controller onto the storyboard. You should see something like this:
You’ll notice that the navigation controller we added to the screen has a table view controller as it’s root view controller. We don’t want a table view controller so go ahead and select it and delete it.
Drag a standard view controller on the storyboard where the table view controller used to be. control drag from the navigation controller to the new view controller and choose root view controller from the prompt. Now our new view controller is the root view of the navigation controller.
Now go ahead and add two more view controllers to the storyboard. On the root and the first view controllers add a button that has the text “Next”. Your scene should now look something like this (I added backgrounds but you don’t have to):
Now control drag from the button on the root view controller to the first view controller and choose push from the prompt. Repeat this step from the first view controller to the second view controller.
On the First and Second view controllers, select the navigation bar at the top and within the attributes inspector change their titles to “First” and “Second”.
That’s all it takes to set up a navigation controller from the storyboard. At this point you may have noticed that we didn’t actually have to write any code to do this. Code will be needed when it comes to sharing data between Navigation controllers. We’ll handle this topic in future posts. For now if you simulate the app you should see the following:
Notice on the the first view controller that a button for the root view controller was added there for you. Kinda nifty huh? The reason it’s called a Push segue is because it’s pushing views onto a memory stack. The Navigation controller pushes and pulls view controllers on and off the stack as you navigate.
That’s it for part one of this recipe series. Part II will cover the Tab Bar Controller.
As a beginning developer, interface builder can get you up and going quickly. The caveat is that it kind of mystifies what is happening behind the scenes. Therefore, as a beginning developer, I would recommend learning how to work with and without the interface builder.