StoryBoards in iOS – A Simple Example

Hey everyone,

Today we will see how we can use storyboards in an application.

First we will Create a sample project named “StoryBoardDemo”

Now we will Add the Navigation Controller
For that Go To Menu -> Editor >Embed In -> NavigationController

Now Double Click on the Title Bar and Add the title “Companies”

Now Drag a table View on to the ViewController.

Now we will add a prototype cell (a row) in the TableView

Search and Drag a “TableView Cell” inside the TableView.

Now Select the TableView Prototype Cell and Go to the Attributes Inspector.

Select “Style = Basic”
Identifier = “Company_cell” // This is for referencing each row inside the code.

Now a new Label will appear inside the Prototype Cell.

Make sure you link “delegate” and “datasource” to the view controller.
Otherwise data will not appear in the tableview.
For that Control Click on the tableView and Drag to the ViewController in the TreeView on
the left.

OK Now we will add another ViewController and add a connection between ViewControllers.

Right Click on the Project Name -> Add New Files > Cocoa touch
[Please UNTICK the checkbox to create the XIB file]

I said to UNTICK the creation of XIB file because we are here to study How STORYBOARD works right?

So we will add new controller to the storyboard as follows.
Click on the Main.StoryBoard. Go to the Controls section and Search for ViewController and Drag to the storyboard and add a label to it.
You may customise the label you want.

Now Do exactly the same step.

Ctrl + Click on the TableView Row(prototype Cell) in the Companies-List ViewController and Drag to DetailsViewController.

Now a window will popup , From that under the “Select Sugue” section click “show”.
Here what we have done is we are telling the controller that when we click on the Tableview Row it should navigate to DetailView Controller.

Next Step Ctrl Click on the Bridge between the ComapniesViewController and DetailViewController, then Go to the attributes inspector on the right.
Give a name for the bridge.

Now we will go to code

CompaniesViewController.h.

Add the tableview delegates, so that we can get the event on the click of the tableview.

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>

@property (nonatomic, strong) IBOutlet UITableView *_tableView;

@end

CompaniesViewController.m

#import "CompaniesViewController.h"
#import "DetailsViewController.h"

@interface ViewController ()

@end

@implementation ViewController{
    NSArray *_companies;
}

@synthesize _tableView;

- (void)viewDidLoad {
    [super viewDidLoad];
    
      _companies = [NSArray arrayWithObjects:@"Apple", @"Google", @"Sony", @"Samsung", @"HTC", nil];
    
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [_companies count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"RecipeCell";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
    
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
    }
    
    cell.textLabel.text = [_companies objectAtIndex:indexPath.row];
    return cell;
}

// THIS IS THE FUNCTION THAT GETS CALLED WHEN A LINK BETWEEN
// VIEWCONTROLLERS IS ADDED IN THE STORYBOARD.

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    if ([segue.identifier isEqualToString:@"ShowCompanyDetail"]) {  // This should be the same id as the bridge between controllers.
        NSIndexPath *indexPath = [self._tableView indexPathForSelectedRow];
        DetailsViewController *destViewController = segue.destinationViewController;
        destViewController._companyName = [_companies objectAtIndex:indexPath.row];
    }
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    
}

@end

In the DetailsViewController we will add two variables
one for the Label holding the value and the value itself

Make sure you link the label to the variable

DetailsViewController.h

#import <UIKit/UIKit.h>

@interface DetailsViewController : UIViewController

@property (nonatomic, strong) IBOutlet UILabel *_companyLabel;
@property (nonatomic, strong) NSString *_companyName;



@end

DetailsViewController.m

#import "DetailsViewController.h"

@interface DetailsViewController ()

@end

@implementation DetailsViewController

@synthesize _companyLabel;
@synthesize _companyName;

- (void)viewDidLoad {
    [super viewDidLoad];
    // we set the value passed from the companies view controller to the label
// in the Detailview controller.
    
    _companyLabel.text = _companyName;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

You can download the complete source code from here.