You are here:    Home  > Blog  

Getting Started With StoryBoard in iOS

With the introduction of storyboard in new Xcode 4.x makes designing your iOS app so much easier. Storyboard allows you to graphically order all your views within a single canvas, where you can design the app’s logical flow and even assign transition animation. So without wasting any time let’s get started with our first iOS application using StoryBoard.

Step1: Open Xcode 4.x and create a Single View Application, name it “StoryBoardTutorial”, while providing name the make sure to check the use storyboard checkbox situated in the lower portion.

Step1_1

Step1

Step 2: Once your project has been created screen will look like this (below)

Step2_1

Now select the MainStoryboard.storyboard in the project navigator.

Step2_2

Step3: Xcode creates a default view controller (rootViewController) in the project. Remove default view controller and add one UITabBarController to the design canvas.

Screen Shot 2013-03-22 at 6.07.59 PM

Delete the two view controllers attached to the UITabBarController.

Screen Shot 2013-03-22 at 6.08.06 PM

Step4: Now add three UINavigationControllers to the Canvas, so that your storyboard starts looking like the following snapshot.

Screen Shot 2013-03-22 at 6.09.16 PM

First replace the three UITableViewControllers with the UIViewControllers( make them rootViewControllers of respective UINavigationController ) and also add three more UIViewControllers to the storyboard each in front of every previously added UIViewController (UIViewControllers in place of UITableVIewControllers).Screen Shot 2013-03-22 at 6.25.12 PM

Screen Shot 2013-03-22 at 7.01.34 PM

Screen Shot 2013-03-22 at 7.02.47 PM

Screen Shot 2013-03-22 at 6.18.26 PM

You can give different colour to each viewController’s view in order to identify them easily. In my case I have used the following colours.

Screen Shot 2013-03-22 at 7.05.44 PM

Also add the three UIButtons to the Dark Colour ViewController.

Screen Shot 2013-03-22 at 7.31.02 PM

Step5: Here the DarkGreen, DardRed, DarkBlue viewControllers are set as the rootViewController of the respective UINavigationControllers what is left is to connect each the LightGreen, LightRed, LightBlue ViewController to the DarkGreen, DarkRed, DarkBlue viewControllers respectively. Now right click the mouse on UIButton present in the DarkGreen controller and drag it to LightGreen viewController, as you release the click the following window appears

Screen Shot 2013-03-22 at 7.13.15 PM

Select “push” option provided in the following window. Repeat the step for DarkRed and DarkBlue ViewControllers. Now your Storyboard must look like the following

Screen Shot 2013-03-22 at 7.33.09 PM

What is left now is to serve to the dish. Build & execute the project.

Screen Shot 2013-03-22 at 7.42.51 PM Screen Shot 2013-03-22 at 7.42.54 PM

Screen Shot 2013-03-22 at 7.42.58 PMScreen Shot 2013-03-22 at 7.43.01 PM

Screen Shot 2013-03-22 at 7.43.07 PM Screen Shot 2013-03-22 at 7.43.10 PM

Congratulation without writing a single line of code here is your first iOS Tab based App using Storyboard

Happy Coding Happy Coding

By:

About Vipin Jain

(CEO / Founder of Konstant Infosolutions Pvt. Ltd.) Mobile App Provider (A Division of Konstant Infosolutions Pvt. Ltd.) has an exceptional team of highly experienced & dedicated mobile application and mobile website developers, business analysts and service personnels, effectively translating your business goals into a technical specification and online strategy. Read More