iPhone Application Development – Storyboards

Share this article

In my previous tutorial, we developed an application ‘SampleListApp’ with the help of XIBs. In this tutorial, we will recreate the same application with the help of storyboards.

What is a Storyboard?

A storyboard is the visual representation of all the screens in an application. It also tells you about the transitions between various screens.

A storyboard is represented as scenes and segues.

A scene refers to a single view or view controller. Each scene has a dock to make outlet and action connections between the view and its view controller.

A segue manages the transition between two scenes. A segue is established by pressing ctrl key and dragging from one scene to the other. Pushing a view controller to the navigation stack and presenting a modal view controller on the click of a button can be done easily with the help of segue thereby reducing the need for coding.

The entire application flow can be seen in the storyboard file.

Sample Application

Create a New Application ‘SampleListAppNew’ using ‘Empty Application’ template.

Create all the View controllers that we created in my previous tutorial without XIBs (SPTTableViewController, SPTArticleDetailsViewController, SPTAddArticleViewController). Do not modify or add any code to these class files. Leave all the class files with its default implementation. We will add code as and when required from our previous project.

Let us create a new storyboard file and name it as ‘MainStoryboard’.

choose a template

Select ‘SampleListAppNew-Info.plist’ and add a new property ‘Main storyboard file base name’ and set the value as ‘MainStoryboard’.

main storyboard

Change the ‘application:didFinishLaunching’ method in the ‘SPTAppdelegate.m’ as follows.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    return YES;
}

The new property in the application property list that we added previously is enough to put the initial view controller’s view in the storyboard into the UIWindow object. So no extra coding is required in the above addpdelegate’s applaunch method.

Now, select the ‘MainStoryboard.storyboard’ file and drag a navigation controller from the objects library.

Select the ‘Navigation Controller Scene’. The ‘Is Initial View Controller’ option in the Attributes inspector is selected to indicate that this is the first view controller that should be loaded.

first view controller

The table view controller is set as the root view controller of the navigation controller. The relationship is specified under the Navigation controller scene. We should change the root view controller to ‘SPTTableViewController’ as follows.

root view controller

Select the Navigation bar in the Navigation controller scene and change the tint colour as given below.

tint controller

Do the following changes in the Table View Controller scene.

Select the Navigation item and change its title to ‘Articles’ using Attributes Inspector.

Select the Table View and change the style as Grouped using the Attributes Inspector

Select the Table View Cell and set the style as ‘Basic’ and Accessory as ‘Disclosure Indicator and cell Identifier as ‘ArticleCell’

set style

Select ‘Content View’ and the ‘Label’ and change the font size also.

Drag a bar button item from the objects library. Place it on the navigation bar and change its identifier as ‘Add’.

change identifier

Include the arrays and dictionaries that were used to populate data in the table view from the previous tutorial in the ‘viewDidLoad’ method of the ‘SPTTableViewController’ class. The navigation bar related settings that were included in the ‘viewDidLoad’ method should be omitted as we have done all the changes in the storyboard file.

Your ‘viewDidLoad’ method should look as given below.

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSDictionary *dictIosArticle1 = [[NSDictionary alloc] initWithObjects:[NSArray arrayWithObjects:@"iOS Application: Getting Started", @"iOS Application:Getting Started Description",nil] forKeys:[NSArray arrayWithObjects:@"Article",@"Desc", nil]];
    NSDictionary *dictIosArticle2 = [[NSDictionary alloc] initWithObjects:[NSArray arrayWithObjects:@"MVC And Programming Basics", @"MVC And Programming Basics Desc",nil] forKeys:[NSArray arrayWithObjects:@"Article",@"Desc", nil]];
    NSDictionary *dictIosArticle3 = [[NSDictionary alloc] initWithObjects:[NSArray arrayWithObjects:@"View Controllers", @"View Controllers Desc",nil] forKeys:[NSArray arrayWithObjects:@"Article",@"Desc", nil]];
    arrItems = [[NSMutableArray alloc] initWithObjects:dictIosArticle1,dictIosArticle2,dictIosArticle3, nil];
}

Include the datasource and delegate implementations for the table view from the previous example.

Do not include ‘tableView: didSelectRowAtIndexPath’ method.

The ‘tableView:cellForRowAtIndexPath’ method should be changed as follows

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *CellIdentifier = @"ArticleCell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];
    
    // Configure the cell...
    
    NSDictionary *dictTmp = [arrItems objectAtIndex:indexPath.row];
    cell.textLabel.text = [dictTmp objectForKey:@"Article"];
    return cell;
}

Run the application in iOS 7 simulator

simulator

Drag a UIViewController object in the ‘MainStoryboard’ file. Change its source class as ‘ SPTArticleDetailViewController’.

Select the UITableViewCell. CTRL + drag and drop from the cell to the SPTArticleDetailViewController. Select the ‘push selection’ segue from the popover menu.

popover menu
push selection
push segue

Select the Push segue and name the identifier as ‘ArticleDesc’

name identifier

Set the title of the ‘Article Detail View Controller’ scene as ‘Description’ .Add a text view and map an outlet ‘txtDetails’ for it.

Include the code for the ‘SPTArticleDetailViewController’ class from the previous tutorial. Need not set the title of the navigation bar in the code.

In order to pass the value from the ‘SPTTableViewController’ to the ‘SPTArticleDetailViewController’, we have to implement the following method in the ‘SPTTableViewController.m’.

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    
        if ([segue.identifier isEqualToString:@"ArticleDesc"]) {
            SPTArticleDetailViewController *detailViewController = (SPTArticleDetailViewController *)segue.destinationViewController;
            
            NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];
            NSDictionary *dictTemp = [arrItems objectAtIndex:indexPath.row];
            detailViewController.strDesc = [dictTemp objectForKey:@"Desc"];
        }
        
}

Now run the application and check if the navigation works properly.

Drag a navigation controller in the Storyboard file. Delete the default root view controller and add a view controller from the Objects library. Create a ‘Root view controller’ segue by ctrl + dragging from the navigation controller to the view controller. Set the view controller’s class as ‘SPTAddArticleViewController’.

Change the navigation bar tint color.

Change the title to ‘Add Article’.

Add save and cancel buttons and map outlet actions as well.

Add the text fields, map outlets, include save and cancel button action implementation similar to the previous article.

Create a ‘Modal’ segue from the ‘+’ or ‘Add’ button in the ‘SPTTableViewController’ to the newly added navigation controller.

The final storyboard file should look as given below.

final storyboard file

Select the ‘Modal’ segue and name the identifier as ‘AddArticle’.

Include the delegate implementation in the ‘SPTTableViewController’ class.

There is one more thing left to do. The ‘SPTTableViewController’ should declare itself as the delegate of ‘SPTAddArticleViewController’. This can be done in the ‘prepareForSegue’ method.

So the method should be changed as follows

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([segue.identifier isEqualToString:@"ArticleDesc"]) {
        SPTArticleDetailViewController *detailViewController = (SPTArticleDetailViewController *)segue.destinationViewController;
        
        NSIndexPath *indexPath = [self.tableView indexPathForSelectedRow];
        NSDictionary *dictTemp = [arrItems objectAtIndex:indexPath.row];
        detailViewController.strDesc = [dictTemp objectForKey:@"Desc"];
    }
    else if([segue.identifier isEqualToString:@"AddArticle"])
    {
        
        UINavigationController *navigationController = segue.destinationViewController;
        SPTAddArticleViewController *addArticleController = (SPTAddArticleViewController *)[[navigationController viewControllers] objectAtIndex:0];
        addArticleController.delegate = self;
    }
    
}

Now run the application in the simulator and check all the transitions.

Conclusion

We have learnt to develop applications using XIB and Storyboard. Select whichever method is easier for you when you develop applications.

Download all the code in this tutorial here.

There’s more to come in the next tutorial.

Kanya SrinisavanKanya Srinisavan
View Author
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week