Indexed Table Views In Swift

indexedtableviewsinswift

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

1 

Fill in Product Name.

2

Then choose where your Xcode project will be stored.

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

3

In Main.storyboard remove existing view controller from canvas.

4

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.

5

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

6

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

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

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

7

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.

8

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

 

 

 

This array is array of strings which we will display in our table. Array is quite big. To make navigating through table easier we are willing to order it and display cells grouped in sections according to their first letter.

Add this line to viewDidLoad method to sort array to it’s alphabetical order:

 

 

 

Now we have to split this array on groups of elements, each will be displayed in separate section of table view. We won’t split array literally but just bring into play another supplementary array which will help us to remember where each section starts, how many elements are in a section and what title of a section is.

 

 

 

Elements of this array are tuples, special Swift type. Tuple has a number of named elements. index is index in array array of first element of section. length is number of elements in section. And title is one character string which will be used for section title in table view.

Now we have to build this array. Add code below to viewDidLoad method just under sorting line:

 

 

 

We traverse through array beginning from the first element. Inside of for loop we look for common prefix of elements in array array with indexes i and index. If these strings don’t have common index, that means we have finished with section. We make new tuple and insert it into array sections. Then we remember where next section starts and repeat loop.

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

 

 

 

numberOfRowsInSection returns number of rows in particular section. We take this from sections array.

 

 

 

And cellForRowAtIndexPath makes cell and fills it with data.

 

 

 

To make index work we need to implement another three methods. titleForHeaderInSection will return appropriate title of the section. We get title from sections array:

 

 

 

sectionIndexTitlesForTableView should return array of all section titles. We have all section titles in sections array. To make new array with titles only we use map function:

 

 

 

sectionForSectionIndexTitle returns section number. In our case it will be index parameter of this method.

 

 

 

9

Build and Run and see table view with index.

11. Build and Run and see table view with index

To make app a little bit neat we can make table view go just below status bar. There are different ways of doing that. Most simple way – just embed table view controller into navigation controller. To do that choose ViewController in canvas. Then go in menu Editor -> Embed In -> Navigation Controller:

10

Build and run:

13

That’s it.

Leave a Reply

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