How to create table view using storyboard in iOS App?

In this tutorial, we will explain to you how to create a table view using Storyboard in the iOS app with a Navigation interface and integrate it with UITableView. We try to keep things simple and focus on explaining the concept.

We create engaging mobile experiences for Apple smartphones and gadgets, Get consulted today!!!

Now, let’s get started.

Creating Navigation Controller and Table view in Storyboard in iOS app

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’re using 4.2 or up) and create a new project using the “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 a 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 add with a navigation bar. This shows you’ve successfully embedded your Menu Book View Controller in a Navigation Controller.

We create engaging mobile experiences for Apple smartphones and gadgets, Get consulted today!!!

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 detail. 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

We create engaging mobile experiences for Apple smartphones and gadgets, Get consulted today!!!

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 release. 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 knocking 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 STORYBOARD in iOS app

In our previous tutorial, we explain to 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 going 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 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 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” which matches our code.

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

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