How to build Navigation controller and table view by storyboard

In this tutorial, we will explain you how to use Storyboards to build a Navigation interface and integrate it with UITableView. We try to keep thing simple and focus on explaining the concept.

Now, let’s get started.

Creating Navigation Controller in Storyboards

Here, we’ll build a simple app that creates use of both UITableView and UINavigationController. We use the table view to display a list of Menus. When users select any of the Menu, the app navigates to the next screen showing the details. It’ll be easy.

First, fire up Xcode (ensure that you using 4.2 or up) and create a new project using “Single View application” template.

Tap “Next” to continue. In the below image, fill in all the required values for the Xcode project. Make sure you permit the “Use Storyboards” option.

Tap “Next” to continue. Xcode then asks you where you save the “SimpleTable” project. Pick any folder (e.g. Desktop) to save your project.

You may note there is a minor difference in the Xcode project, as compared with those you came across in previous tutorials. The .xib file (interface builder) is replaced with the MainStoryboard.storyboard file.

By default, Xcode builds a standard view controller. As we’ll utilize navigation controller to control the screen navigation, first modify the view controller to navigation controller. Choose the Simply select “Editor” in the menu and select “Embed in”, followed by “Navigation Controller”.

Xcode automatically embeds the Menu Book View Controller with Navigation Controller. Your screen should look like this:

Before moving on, let’s run the app and see how it looks. Click the “Run” button and you must get an app with a blank view but added with a navigation bar. This shows you’ve successfully embed your Menu Book View Controller in a Navigation Controller.

RecipeBookApp Empty

Adding Table View for Your Data

Then, we will add a table view for displaying our Menus. Choose “Table View” in Object Library and pull it into “Menu Book View Controller”.

Make a note of you can’t drag stuff when the editor is zoomed out. If you can’t drag the table views into the view controller, zoom in and try again.

Then write code to populate the table data. In Project Navigator, choose “Menu BookViewController.h”. Append “” after “UIViewController”. Your code must look like below:

#import <UIKit/UIKit.h>
 
@interface MenuBookViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>
 
@end

If you read our previous table tutorial, you must be very familiar with the code.I’ll not explain the code in details. If you find it is complex to follow, check out our previous tutorial.

Then, choose “Menu BookViewController.m” and define an instance variable (i.e. Menus array) for holding the table data.

@implementation MenuBookViewController {
 NSArray *menu;
}

Include the following code in the “viewDidLoad” method, to initialize the “Menu” array:

 (void)viewDidLoad
{
 [super viewDidLoad];
 // Initialize table data
 menu = [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil];
}

At last, we have to execute two datasource methods to populate the table data: “tableView:numberOfRowsInSection” and “tableView:cellForRowAtIndexPath”. Recalled that these two methods are part of the UITableViewDataSource protocol, it’s compulsory to execute the methods when configuring a UITableView. The first method is used to notify the table view how many rows are in the section, while the second method is used to fill the cell data. So let’s include the below code.

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

The following are complete source code of “Menu BookViewController.m” for your reference

//
// MenuBookViewController.m
// MenuBook
//
// Created by Simon Ng on 14/6/12.
// Copyright (c) 2012 Webnexs. All rights reserved.
//
 
#import "MenuBookViewController.h"
 
@interface MenuBookViewController ()
 
@end
 
@implementation MenuBookViewController {
 NSArray *menu;
}
 
- (void)viewDidLoad
{
 [super viewDidLoad];
 // Initialize table data
 menu = [NSArray arrayWithObjects:@"Egg Benedict", @"Mushroom Risotto", @"Full Breakfast", @"Hamburger", @"Ham and Egg Sandwich", @"Creme Brelee", @"White Chocolate Donut", @"Starbucks Coffee", @"Vegetable Curry", @"Instant Noodle with Egg", @"Noodle with BBQ Pork", @"Japanese Noodle with Pork", @"Green Tea", @"Thai Shrimp Cake", @"Angry Birds Cake", @"Ham and Cheese Panini", nil];
}
 
 
- (void)viewDidUnload
{
 [super viewDidUnload];
 // Release any retained subviews of the main view.
}
 
- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
 return (interfaceOrientation != UIInterfaceOrientationPortraitUpsideDown);
}
 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
 return [Menu count];
}
 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
 static NSString *simpleTableIdentifier = @"MenuCell";
 
 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier];
 
 if (cell == nil) {
 cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:simpleTableIdentifier];
 }
 
 cell.textLabel.text = [menu objectAtIndex:indexPath.row];
 return cell;
}
 
@end

At last, we have to create the connection between the Table View and the two methods we just created. Go back to the Storyboard. Press and hold the Control key on your keyboard choose the “Table View” and drag to the View Controller icon. Your screen will appear like the following image:

A pop-up displays both “dataSource” & “delegate”, when both buttons releases. Choose “dataSource” to create a connection between the Table View and its data source. Follow the same step which is mentioned above and make a connection with the delegate.

Before we test out the app, one last thing to do is include a title for the navigation bar. Simply choose the navigation bar of “Menu Book View Controller” and fill in the “Title” under “Attributes Inspector”. Consider to knock ENTER after keying in the title to effectuate the modify.

Now, it’s time to implement your code. Click the Run button and test out your app. If your code is correct, you must end up with an app displaying a list of Menus. The app should be very comparable to the Simple Table app you’ve built before. At this time, the main variation is it’s embedded in a Navigation Controller.

Introducing Prototype Cell

In our previous tutorial we explains you how to design your own custom table cell using Interface Builder. In brief, you need to generate a separate nib for the cell and programmatically load it in the table. Through the introduction of Prototype Cell in Storyboard, it’s much easier to make a custom cell. Prototype cell permits you to easily design the layout of a table cell right in the Storyboard editor.

In this tutorial, we are not go into the brief of the customization but just simply add “Disclosure Indicator” in the cell.

Select the table view to include a prototype. Xcode automatically displays you a prototype cell, as soon as you alter the value. In order to illustrate you another table style, let’s also modify the “Style” option from “Plain” to “Group”.

Then, choose the “Prototype Cell”. You must be able to customize the options of the cell. To exhibit a disclosure indication for each cell, modify the “Accessory” to “Disclosure Indicator”. It’s significant to describe the Reuse identifier. You can consider of this identifier as the cell’s ID. We can utilize it to refer to a particular prototype cell. Here, we define the identifier as “MenuCell” that matches with our code.

Now, run the app again. It appears a bit variation and we are creating progress. We’ve modified the table style to “Grouped” style and included the disclosure indicator.

Storyboards, UITableView and Navigation Controller are the essential UI elements and generally used when building iOS apps. So take some time read the tutorial and ensure you have a clear understanding of the material. if you have any questions, leave me comment or ask it at our experts.

Last Update: September 10, 2018  

September 10, 2018   156   Nandini R    Storyboard- ObjectiveC    
Total 1 Votes:
0

Tell us how can we improve this post?

+ = Verify Human or Spambot ?

Leave a Reply

Your email address will not be published. Required fields are marked *

Facebook
Twitter
INSTAGRAM
LinkedIn