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.
Fill in Product Name.
Then choose where your Xcode project will be stored.
Now in ViewController.swift class change base class from UIViewController to UITableViewController.
In Main.storyboard remove existing view controller from canvas.
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.
In storyboard choose your view controller and in Identity Inspector enter ViewController as class name of the class.
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.
Choose Table View in storyboard and in Attributes Inspector change table’s Style from Plain to Grouped.
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.
Add array to the class. Array will be our data source.
var array = [ ["Moscow", "Saint Petersburg", "Novosibirsk", "Novosibirsk", "Nizhny Novgorod", "Samara", "Omsk" ], ["Kiyv", "Odessa", "Donetsk", "Harkiv", "Lviv", "Uzhgorod", "Zhytomyr", "Luhansk", "Mikolayv", "Kherson"], ["Berlin", "Hamburg", "Munich", "Cologne", "Frankfurt", "Stuttgart", "Düsseldorf", "Dortmund", "Essen", “Bremen"]]
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.
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return array.count
}
numberOfRowsInSection returns number of rows in particular section.
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return array[section].count
}
And cellForRowAtIndexPath makes cell and fills it with data.
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
var cell = tableView.dequeueReusableCellWithIdentifier("Cell", forIndexPath: indexPath) as UITableViewCell;
cell.textLabel?.text = array[indexPath.section][indexPath.row]
return cell
}
Build and Run and see table view with cells grouped in three groups.
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.
Build and run and see table view with sections and sections have headers.
That’s it.
Related Posts
Strings and Characters in Swift
Optionals in Swift
Swift Integer Types
Dictionaries in Swift
Functions in Swift 2
Curried Functions In SWIFT
Indexed Table Views In Swift
Creating ListView With Sections