Tutorial - Swift Watchkit Table - Seemu AppsSeemu Apps

In this post we will look at implementing a table in XCode.

If you have ever done a tableview in a iPhone app forget everything you know, as it is implemented differently in a watch kit app. It’s not to difficult to implement through!

First of create a new blank XCode project and add a Watchkit extension in. Once done go to the watch kit interface and drag a table from the bottom right onto the main watch kit interface controller.

Now we need to connect the table up to our InterfaceController.swift class. To do this click on the assistant editor to split up the view. Now make sure the table is selected under interface controller.

Drag it into your InterfaceController.swift code and drop it just under the Class InterfaceController, now you will see a popup. Name it tableview.

Once this has been made, add the following line under:

var tableData = [“I”, “Love”, “Apple”, “Watch”, “:)”, “:)”]

This will be each item in our table, in our table we will just have tables with text.

Now we need to setup a custom class for our TableRow. To do this go File–>New–>File. Make a new NSObject type named TableRowObject.

Once created go back to the Interface.storyboard for the Watchkit app, we need to set our TableRow to be of the TableRowObject swift class we just created.

Select the Table Row Object on the interface controller, then in the top right set the class to “TableRowObject” under the Identity Inspector.

Once done select the attributes tab (On the right of identity inspector, and set the Identifier to “Cell”

Now we are going to add a label to our table and connect it to our TableRowObject.swift class so we can set it’s value!

Still on the interface inspector, drag a label onto your table row. Once done make sure Cell is selected on the Interface Controller. Click the assistant editor

Make sure TableRowObject is selected in the right window of the split view.

Select the label and hold control to drag it into your class. Name it lblTblRowItem

Also up the top of the class add import WatchKit so it can access the label correctly (As it is a special Watchkit label)

Your class should look like the following:

import UIKit
import WatchKit // Need this to access WK Class

class TableRowObject: NSObject {
    @IBOutlet var lblTblRowItem: WKInterfaceLabel!
}

Now time to add in our code to load our items into the table, then we can test it out!

Go to your InterfaceController.swift class and add the following function:

// Load table into the data
func loadTableData() {
    // Set total row count. Remember our identifier was Cell
    tableView.setNumberOfRows(tableData.count, withRowType: "Cell")
    
    var i = 0 // Used to count each item
    for item in tableData { // Loop over each item in tableData
        let row = tableView.rowControllerAtIndex(i) as TableRowObject // Get a single row object for the current item
        row.lblTblRowItem.setText(item) // Set the row text to the corresponding item
        i++ // Move onto the next item
    }
    
}

This function will add all the items from tableData (I, Love, Apple, Watch, :), :)) into our table. Now in awakeWithContext add loadTableData() to load everything into your table!

override func awakeWithContext(context: AnyObject?) {
   super.awakeWithContext(context)
        
   // Configure interface objects here.
   loadTableData()
}

Run the app as a Watchkit app and you will see your table in action!, Source code can be downloaded below.