In this tutorial we’re going to discuss and implement the TableView UI element in our iOS application.

iOS TableView Overview

A TableView is used to display a list of data in our application. It’s used for displaying a vertically scrollable view which consists of a number of cells that are reusable. Headers, footers, rows and sections can be included in such a UI element. Let’s jump onto the implementation of the TableView, from where we’ll give more insight to it’s working, usages and customisations. Create a new project first, following the same steps as shown in the previous tutorial.

Implementation

We’ll use an NSMutableArray to hold the data that’ll be displayed in our TableView. Our ViewController would adopt the UITableViewDataSource and UITableViewDelegate as the protocols. Protocols are analogous to Interfaces. Basically, in order to display data in TableView, we have to conform to the requirements defined in the protocols and implement all the mandatory methods.

The ViewController.h header file is defined below.

ViewController.h

UITableViewDelegate and UITableViewDataSource

UITableView is the base class that’s used to implement a TableView.

UITableViewDataSource protocol acts as a link between the data and the table view. This protocol consists of the following two methods that need to be implemented.

The implementation of the above two methods deals with specifying the number of rows and type of data in each row.

UITableViewDelegate protocol deals with the appearance of the TableView such as height of TableRow configure section headings and footers, re-order table cells etc.

Few methods of this protocol include:

Now we need to implement the data source and delegate methods in the ViewController.m file.
We’ll initialise the NSMutableArray in the viewDidLoad method.

Before we do that let’s design the view in our StoryBoard.xib file.

Search for TableView in the object attributes and drag and drop it over the view. Resize it to cover the screen leaving the space out for the status bar. Your screen should look similar to the one given below.

ios-simple-table-view-image-1

Note: Adding the IBOutlet for the TableView in the ViewController.h file can be done in another way from the storyboard itself. Press option+command+Enter on the keyboard to open the assistant editor. Press control and drag the tableview to the editor as shown below and release it. Enter the variable name and choose the Storage type as strong.

We need to set the delegate and datasource for the tableview onto the file owner icon at the top of the dock. Press control and drag the tableview to it. Release the click and chose datasource to make a connection. Do the same for the delegate.

ios-simple-table-view-image-1

To ensure that the connections are properly made look into the connections inspector tab in the right pane.

The ViewController.m file contains the implementation part of the protocol methods that we had defined earlier. It’s given below
ViewController.m

  1. The NSMutableArray is populated in the viewDidLoad method
  2. Two sections with there separate headers and footers are defined
  3. The NSMutableArray data elements are divided into the two sections equally. The first half of the array goes into the first section and the other half into the second section
  4. NSLog is used to print the selected row index and its data

The output of the application in action is given below.
ios-simple-table-view-output-1

Note: As you can see we have grouped each section. This can be done from the attributes inspector pane by choosing the style as grouped.

Clicking a row prints a log in the XCode console as shown below.

ios-simple-table-view-output-2-1

This brings an end to this tutorial. We’ve developed a simple table view iOS Application with two sections in which the data is loaded from an array. This tutorial was aimed at getting familiar with the table view and implementing it’s methods. In general data is not always loaded from a array. It’s loading in other ways like from a file. We’ll discuss and implement them in later tutorials. You can download the iOS SimpleTable Project from the link given below.

By admin

Leave a Reply