Creating Grouped Table Views In Swift

Let’s start creating new project in Xcode. We well start with Single View Application Template. In Xcode go File->New-Project in menu and choose Single View Application template.

image1

Fill in Product Name.

image2

Then choose where your Xcode project will be stored.

Now in ViewController.swift class change base class from UIViewController to UITableViewController.

image3

In Main.storyboard remove existing view controller from canvas.

image4

Look at Object Library which is on bottom right. Find Table View Controller there. Drag it to the canvas and drop it there. In Attributes Inspector on the right turn on “Is Initial View Controller” check box.

image5

In storyboard choose your view controller and in Identity Inspector enter ViewController as class name of the class.

image6

Now if you Build and Run you will see empty table in simulator.

image7

Choose cell in storyboard and fill in Identifier field in Attributes inspector. That’s cell reuse identifier which will be used in code.

image8

Choose Table View in storyboard and in Attributes Inspector change table’s Style from Plain to Grouped.

image9

Now let’s do some coding. In ViewController.swift add protocol UITableViewDataSource to class declaration. That means our class ViewController intends to implement some methods from protocol UITableViewDataSource.

image10

Add array to the class. Array will be our data source.

 

 

 

Elements of this array are arrays of strings. So our table will consist of three groups. Each group will represent cities from one country.

Lets implement three of UITableViewDataSource methods. numberOfSectionsInTableView returns number of sections in table. In will be count of our array.

 

 

 

numberOfRowsInSection returns number of rows in particular section.

 

 

 

And cellForRowAtIndexPath makes cell and fills it with data.

 

 

 

image11

Build and Run and see table view with cells grouped in three groups.

image12

We could add header to each section implementing one more UITableViewDataSource method, titleForHeaderInSection. This method returns string which will be used for header title. Method will take first element of section array for header title. For that we change our array adding new elements. A little bit of change is needed for methods numberOfRowsInSection and cellForRowAtIndexPath to take that into consideration.

image13

Build and run and see table view with sections and sections have headers.

image14

That’s it.

Leave a Comment: