Part three is the next tutorial of the tutorial series where we get UITableView component as main component in the application and we learn how easy is to implement it in the application using step by step approach.

In this tutorial we will see how data can be listed grouped in sections, so for this tutorial we will not use such simple data array with strings as was in previous two parts, UITableView Basics Part One and UITableView Basics Part Two but much complex. Grouping the data in section can be seen for example in Contacts, where the contacts are grouped in sections alphabetically, in the following example we will see how we can use this feature of the UITableView component using much more complex data structure then before.

Its is always good to check previous two parts in case to understand the next features better.

Let’s start.

 

As in every previous tutorial i am trying to follow the approach step by step so with easy following the reader can understand very quickly.

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-09-01 at 17.55.56

 

Your project should look like this after finishing previous step:

Screen Shot 2016-09-01 at 17.56.39

 

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

Screen Shot 2016-09-01 at 17.57.02

 

From the Object Library we are taking UITableView component and we are placing it in our View Controller.

Screen Shot 2016-09-01 at 17.57.36

 

 

Screen Shot 2016-09-01 at 17.57.59

 

Next we are connecting properties datasource and delegate from Connection Inspector with File’s Owner.

Screen Shot 2016-09-01 at 17.58.18

 

 

Screen Shot 2016-09-01 at 17.58.31

 

If we have connected correctly in our Connection Inspector we can see how this properties are connected.

Screen Shot 2016-09-01 at 17.58.40

 

Next step is placing UITableViewCell in the UITableView component so from the Object Library we are taking one UITableViewCell and we are placing it in our UITableView.

Screen Shot 2016-09-01 at 18.00.17

 

 

Screen Shot 2016-09-01 at 18.00.31

 

After placing the UITableViewCell we also need to make some simple configuration like setting the Style and setting the Identifier. Because by default Style property is set as Custom in this example as in previous two parts, Part One and Part Two, we will use Basic cell style.

Screen Shot 2016-09-01 at 18.00.51

 

After setting the Style next we are setting the Identifier which is very important for the cell reusing.

Screen Shot 2016-09-01 at 18.01.04

 

After setting this property we are ready to start writing the code. First we must make our ViewController to conform with UITableViewDataSource and UITableViewDelegate so in the class declaration we are putting also this two protocols right after UIViewController.

Screen Shot 2016-09-01 at 18.07.11

As i mention at the beginning of this tutorial we want to display data grouped with sections so we must write much more complex data structure then before.

Screen Shot 2016-09-01 at 18.50.09

Short explanation, this property is array with dictionaries, each one containing two keys, “section” key which point to the section name and “elements” key which point to the new array of strings that will be displayed as rows of the section.

Because the rest of the code is already seen in the Part One and Part Two i will show the whole source and i will explain what are the differences.

Screen Shot 2016-09-01 at 18.50.40

In the first method numberOfSectionsInTableView, now we are returning the number of elements from our complex data structure, the array that holds dictionaries with data for each section, so in this case we have 4.

The second method numberOfRowsInSection, is returning the number of rows contained in each section which in our case is the array of string elements contained in ever dictionary that describe the data for the section as value of key “elements”.

From the third method heightForRowAtIndexPath we are returning just the height of the cell which is the row in the section.

The fourth method titleForHeaderInSection is returning the name of the section so in our case from each dictionary which presents section data we will return value from the key “section” which is the section name in this case.

And in the fifth method cellForRowAtIndexPath as in the previous two parts, Part One and Part Two, we are taking the string value from the array and we are setting as text in the cells text label. In this example because we have much more complex data structure then the previous tutorials with using property indexPath.section we are looking the dictionary which represent the data for the current section, then for getting the array with strings which are the rows in the current section we are looking the value from the dictionary which holds this array by calling the key “elements”. After the previous step we have in separate variable the array with strings which each one represent the row name in the section, now all we need to do is to use the property indexPath.row for finding the string value.

When we compile the application we can see that the strings from the data array are listed as rows but groped in section in our UITableView.

Screen Shot 2016-09-01 at 18.51.01  Screen Shot 2016-09-01 at 18.51.29

Screen Shot 2016-09-01 at 18.51.52  Screen Shot 2016-09-01 at 18.52.55

 

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 *