How to create Table View Controller in Objective C ?

Introduction of Table View

A table view has only one column and allow vertical scrolling only. It consists of rows in sections. Programmatically, the UIKit framework identifies rows and sections through their index number:

Sections are number 0 through n-1 from the top of a table view of the bottom; Rows are numbered 0 through n-1 within a section.

In this tutorial, you are going to create an Application of Table View listing apple devices names like 'Contacts' App in iPhone / iPad.

Follow below Steps to create Table View Project using Objective-C Language:

Step 1: Launch Xcode and create new project by clicking on Single View Application template under iOS tab as shown in below image and click Next  button.

Step 2: Enter product name as TableViewDemo and select Language as Objective-C then again click on Next button as shown in below image. Later click on Create button to create project on the next pop-up window. 

Step 3: On your project, just go to main.storyboard file available in the project navigator, in storyboard canvas, select the View Controller so that it is highlighted in blue colour and hit delete button to remove the controller. 

Step 4: Further, search Table View Controller in Object Library on the right-bottom side. Drag and drop that controller using Ctrl button and place it onto the storyboard.

Also make sure that you have checked “Is Initial View Controller” from Attributes Inspector to give initial entry point to the controller. 

Step 5: Creating Class for TableViewController

Now, you need to make a class for Table View Controller and its superclass should be UITableViewController as can be seen in given image. To create new class, select  Xcode File -> New -> File… menu option. 

select the Cocoa Touch Class and click on Next. 

After clicking on Next, enter class name as TableViewController and make sure its subclass is UITableViewController as said earlier too, click on Next and create button. 

Also, associate the class with the your Table View Controller. By selecting Table View Controller from main.storyboard and select ‘Identity Inspector’ from right hand side as mentioned below. 

Now, there is no need of ViewController class files i.e. ViewController.h & ViewController.m showing in project Navigator. Hence you can delete both the files.

Step 6: Coding for Table View Controller

Select TableViewController.h file & add following protocols just after the subclass as mentioned in below image:

1. UITableViewDataSource
2. UITableViewDelegate 

Next, select TableViewController.m file, there you will find below mandatory methods to build Table:

1. numberOfSectionsInTableView
2. numberOfRowsInSection
3. cellForRowAtIndexPath

In 1st method, you need to return 1 because we are taking only one section in our case.

In 2nd method, you need to return number of Rows in one section which you want to display in each cell.

In 3rd method, you need to return cell after creating its variable within that method and further call array (contains number of items) to display using indexPath.row property.

Furthermore, you need to declare an array & define it in viewDidLoad() method. 

In our case, we declared array name “devices” using NSArray class in block of interface.

NSArray *devices;

And gave definition in viewDidLoad() method within the block of  implementation.

devices = @[@"iPhone",@"iPad",@"iPod",@"iMac",@"iWatch", @"iTV"];

Now, its time to code for protocol methods discussed above.

In numberOfRowsInSection() method, you need to return “devices.count” which means returning number of items present in our array.

Most importantly, uncomment cellForRowAtIndexPath() method and in place of reuseidentifier, write @“Cell” . This “Cell” is the name of cell identifier need to set by selecting cell in table view from Storyboard and type cell in identifier option under Attribute Inspector on left side.

Array will be called and assign it to cell.textLabel.text to display in TableView.

Setting Up Identifier name to cell in below image.  

You are Ready with your TableView. Just Run the program & will be seen below result in simulator. 

In above result, there is some clashing with the 1st cell and signal. To remove this you can embed Navigation Controller but firstly select your existing controller i.e. Table View Controller then follow below steps.

For this just go to Xcode Menu Bar ‘Editor’ -> Embed In -> choose ‘Navigation Controller’. That’s it

Again Run the project, here is the result with the Navigation Controller. 

Enjoy! Have Fun 😇👍🏻

You can download complete xcode project.

For YouTube Video, visit https://youtu.be/3ucV0FpOmcE

In case of any doubt or confusion, comment below.