Using WatchKit Tables

DZone 's Guide to

Using WatchKit Tables

Writing apps for the Apple Watch is very different than for the iPhone. One major difference is User Interface (UX) elements. This shows how to display tables.

· IoT Zone ·
Free Resource

The release of the Apple Watch has meant a whole host of possiblities for application developers. However writing apps for watches is very different to writing apps for phones. One particular area that is different is the User Interface elements. This article will explore how to display data in a table on a watch using the WatchKit components.

These are the pre-requisites for this article:

  • Git
  • XCode 6.3

The application will be a simple table showing a list of names and ages of people.

1.Start by checking out the src code fromhttps://github.com/codingricky/sample-watchkit-table.

2.If you go to the Interface.storyboard of WatchTable WatchKit app, you will see a very basic scene with a table.

Important to note that the TableRowController has a custom class theTableRow. There are outlets attached from the labels to the TableRow class.

The TableRow class looks like:

import WatchKit

class TableRow: NSObject {  
    @IBOutlet weak var nameLabel: WKInterfaceLabel!   
    @IBOutlet weak var ageLabel: WKInterfaceLabel!

Also the identifier of the Table is set to tableRow which will be referenced later on.

3.Open the InterfaceController class.

We will define a map with some sample data that will be displayed in the watch table. Obviously you can source data from anywhere. The map is purely to simplfy things in this article.

    let personData = ["Taylor" : 25, "Katy" : 30, "Ellie" : 28]

4.In the willActivate() fuction we will load the data into the table.

We will set the row count of the table like this.

        table.setNumberOfRows(personData.count, withRowType: "tableRow")

Notice how the row identifier tableRow is referenced.

5.Lastly we load the data into the table.

   let keys = personData.keys.array
        for (index, key) in enumerate(keys) {
            let tableRow = table.rowControllerAtIndex(index) as! TableRow

Now if you start the application, you will see the watch with the data loaded. You can source the data from anywhere. I hope that helps you on your way to building watch applications.

apple watch ,ios ,iot ,mobile ,swift ,watchkit ,watchkit tables

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}