Almost in every mobile application we have seen one component which showing listed products, listed contacts, mails, messages, photos etc, this component is known as UITableView. UITableView can be found in very different types of applications from social to business applications and most of the time is used for listing user data in rows, but also this component can be used with UINavigationController which we have seen in previous tutorials, Using UINavigationController component into your iOS App Part One and Using UINavigationController component into your iOS App Part Two as menu for navigation in the application. As rows UITableView is displaying data in cells using UITableViewCell component which can be easy customized for displaying any kind of data, textual, numerical and graphic. We have seen this component in mail application, in contacts application , in messages etc.

As UIPickerView component which we saw in tutorial Using UIPickerView component into your iOS App , UITableView depends on methods from data source UITableViewDataSource for loading and displaying user data and on methods from delegate UITableViewDelegate for executing action.

Starting from this tutorial we will see different scenarios where UITableView component can be used and how can be implemented. In this tutorial we will see basic displaying of data provided from the array with strings and displaying textual data from selected row using UIAlertController component which we saw in tutorial Using UIAlertController component into your iOS App.

Let’s start.

 

We are starting with creating the Single View Application in our Xcode IDE.

Screen Shot 2016-07-11 at 11.09.50

 

Next we are setting Product Name, Organisation Name, Identifier, Language ( Objective-C or Swift ) and Device.

Screen Shot 2016-08-19 at 22.44.43

 

Your project should look like this after finishing previous step:

Screen Shot 2016-08-19 at 22.45.23

 

We are setting the size and we are choosing compact, portrait for all iPhones.

Screen Shot 2016-08-19 at 22.45.58

 

From Object Library we are taking UITableView component.

Screen Shot 2016-08-19 at 22.46.37

 

After positioning UITableView component from Object Library we are taking UITableViewCell and we are dropping over UITableVIew.

Screen Shot 2016-08-19 at 22.47.56

 

For loading our UITableView component with data and interacting with we must connect datasource and delegate properties from Connection Inspector with File’s Owner.

Screen Shot 2016-08-19 at 22.48.18

 

Screen Shot 2016-08-19 at 22.48.29

 

Screen Shot 2016-08-19 at 22.48.39

 

From UITableView we are dragging in Assistant Editor to make IBOutlet from the component.

Screen Shot 2016-08-19 at 22.50.04

 

Screen Shot 2016-08-19 at 22.50.23

 

After IBOutlet from the UITableView is created we are creating one strings array for demonstration, also in class declaration right after UIViewController we are putting data source UITableViewDataSource and delegate UITableViewDelegate because our class must conform with the data source and delegate from the UITableView.

Screen Shot 2016-08-19 at 22.54.24

Next step is setting the Cell Identifier from the Interface Builder with first selecting the UITableViewCell which we have taken from the Object Library and in Attributes Inspector we are setting the name for Cell Identifier which we will use later in the code. Setting the Cell Identifier is very important because UITableView component is making cell reusability which mean its not creating UITableViewCell for each record loaded from the data source but is overriding the content in already existing cells which some of them are not visible at the moment if there are more then the visible space, so the UITableView is creating enough cells and is optimizing the speed of loading so the user will not see how they are reused.

Screen Shot 2016-08-19 at 22.55.42

 

We must implement some of the methods from the UITableView data source and delegate, so like with UIPickerView we are implementing methods for setting the height of the cell, heightForRowAtIndexPath, we are setting number of sections in method numberOfSectionsInTableView because we can separate our data in different sections, we will see more advance examples in the following tutorials, and we are setting the number of rows in sections in method numberOfRowsInSection where we return the number of elements in our strings array.

In some of the methods we can see one variable indexPath which is the instance from the class NSIndexPath which contain the path to the specific resource in this case row, so the indexPath contain row index and section index.

Screen Shot 2016-08-19 at 23.24.39

The most important method is cellForRowAtIndexPath were we are loading created cell and we are setting the data. As we can see we have one constant CellIdentifier which is with the same value as the Cell Identifier on the UITableViewCell we set in Attributes Inspector. Next we are looking for already created cell from the table view and we are setting the text on the default cell label and we are returning that cell so can be displayed.

Screen Shot 2016-08-20 at 15.03.30

And in the method didSelectRowAtIndexPath, we are detecting which cell was selected by the user, we are taking the correct string value from the strings array by row index property from the indexPath and we are using UIAlertController to display the selected value.

Screen Shot 2016-08-19 at 23.25.20

When we compile and run the application in the simulator we can try selecting different rows in our UITableView so we can see if everything we have implemented correctly how its working.

Screen Shot 2016-08-19 at 23.25.58 Screen Shot 2016-08-19 at 23.26.29

 

Complete source code can be found on my GitHub ready for testing.

Print Friendly

Leave a Comment

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