Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Build an open IoT platform with Red Hat—keep it flexible with open source software.

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
            tableRow.nameLabel.setText(key)
            tableRow.ageLabel.setText(personData[key]!.description)
        }

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.

Download Red Hat’s blueprint for building an open IoT platform—open source from cloud to gateways to devices.

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}