Introduction
We are all used to using view controllers now. We know how to use navigation controllers in order to push and pop view controllers. Apple believes this can be done easier and that's the whole story behind storyboards. Story boarding is the new way of defining the connection between different screens in your app. For instance, if you have 20 unique view controllers in your app which you coded a year ago, looking at the source code now you will need to find your way around the connection between these view controllers and what view controller is pushed when a certain action is taken by the user. This can be very difficult especially if you have not documented your code. Story- boards to the rescue. With storyboards, you can now view/create your entire app's UI and the connection between each view controller in one screen. It's that simple.
With storyboards, one screen's worth of content is called a scene. A scene on the iPhone can be thought of as the view of a view controller, where you put all your contents on the screen to be presented to the user at the same time. On the iPad, more than one scene can be presented to the user at the same time because of the bigger screen. Story- boarding supports transitioning from one scene to another, similar to a navigation controller pushing a view controller on top of another. That is a transition. Another type of transition is a modal view controller that slides from the bottom of the screen up to fill the screen temporarily. On the iPad, modal screens appear in the center of the screen and dim the rest of the screen usually to point out that they are the main input at that moment.
Creating a Project with Storyboards:
Note:You want to be able to manage multiple view controllers inside a storyboard-based application.
In order to add a navigation controller to your storyboard-based app, simply follow these steps:
We now have a navigation controller with a view controller inside it but our objective now is to trigger an action and then move from one view controller to another. Alright then; let's place a button on our view controller and push a view controller into the stack once the user presses the button. Alright....
We are all used to using view controllers now. We know how to use navigation controllers in order to push and pop view controllers. Apple believes this can be done easier and that's the whole story behind storyboards. Story boarding is the new way of defining the connection between different screens in your app. For instance, if you have 20 unique view controllers in your app which you coded a year ago, looking at the source code now you will need to find your way around the connection between these view controllers and what view controller is pushed when a certain action is taken by the user. This can be very difficult especially if you have not documented your code. Story- boards to the rescue. With storyboards, you can now view/create your entire app's UI and the connection between each view controller in one screen. It's that simple.
Creating a Project with Storyboards:
- In Xcode, select the File meny and then New→New Project...
- .In the New Project dialog, make sure iOS main category is selected and select Application sub-category under iOS. Once that is done, on the right side, select Single View Application and press Next
- Now select a product name and make sure your app is a Universal app.Apple wants developers to start writing universal apps whenever they can in order for iPad users to also enjoy the same apps that iPhone and iPod Touch users can enjoy. In this dialog, make sure you have checked the User Storyboards check box.
- You'll notice two files whose names end with .storyboard. Xcode, because this is a universal app, created a storyboard for iPhone and another storyboard for iPad
Note:You want to be able to manage multiple view controllers inside a storyboard-based application.
In order to add a navigation controller to your storyboard-based app, simply follow these steps:
- Click on the iPhone story board that Xcode created for you.I have name demoproject Adding a Navigation Bar to a Storyboard so my iPhone storyboard file is Main- Storyboard_iPhone.storyboard. Once you click on this file, Interface Builder will display the contents of this file automatically.
- Once the storyboard file is open in IB (Interface Builder), simply double-click on an empty space on the storyboard's canvas and you will see the content shrink in size and give you more free space.
- Under the View menu, select Utilities→Show Object Library.
- In the Object Library, find the Navigation Controller object and drag and drop it into the storyboard, to the left side of your existing view controller.
- As you can see, the navigation controller now has added another view controller to our UI. What we need to do is to simply delete this view controller by selecting it first and then pressing the Delete button on the keyboard. Now we are left with the navigation controller and our original view controller(Delete Root View).
- Now click once on the navigation controller object on the storyboard. Once the navigation controller object is selected, hold down the Control key on your keyboard and the left button on your mouse and drag your mouse over to the view controller (on the right) that we had on our storyboard originally. This will draw a line from the navigation controller all the way to the view controller
- Now release your mouse button at which point you will be presented with a dialog asking you what type of connection you want to create between the navigation and the view controller. Select the root View Controller item from the list by simply clicking on it.
- After this is done, the storyboard will show that your navigation controller is now connected to the original view controller.
- The most important step is to make our navigation controller the initial/root view controller. If we don't do this, the storyboard will use the view controller that we initially had as the initial view controller. Can you see that the view controller on the right side has a border around it. That indicates an initial view controller. To make our navigation the initial view controller, simply select the Navigation Controller under the Navigation Controller Scene panel in Interface Builder, Now select the View menu in Xcode and choose View→Show Attributes Inspector. Once the attributes inspector is opened, under the View Controller category, check the Is Initial View Controller check box.
We now have a navigation controller with a view controller inside it but our objective now is to trigger an action and then move from one view controller to another. Alright then; let's place a button on our view controller and push a view controller into the stack once the user presses the button. Alright....
- Go back to your .storyboard file.
- In the Object Library, find the View Controller object and drag and drop it onto the storyboard, on the right side of our existing view controller.
- In Object Library, find the Button object and drag and drop it into the first view controller. Note that if you are zoomed out, Interface Builder will not allow you to drop a button onto a view controller. You need to double click on an empty space on your storyboard to zoom into it before Interface Builder allows you to drop UI components onto your view controllers.
- Now select the button,hold down the Control key on your key board and then hold down the left mouse button and on the button and drag all the way to the second view controller
- Now lift your fingers off the mouse button and the Control key on your keyboard. You will now be presented with a dialog . Simply click on the performSegueWithIdentifier:sender: item Now if you have a look at your storyboard, you will see that the first view controller is connected to the second view controller.
- Now if you run your app and tap on the button on the first view controller, you'll see that the second view controller will automatically get pushed onto the stack of view controllers. Once the second view controller is presented, you will see a back button on the navigation bar. If you press that button, you will be sent back to the first view controller.

