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

Address your IoT software testing needs – improve quality, security, safety, and compliance across the development lifecycle.

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.

Accelerate the delivery of high-quality software in the connected IoT era through an integrated analysis, testing, security, and analytics platform. Parasoft's comprehensive portfolio of testing toolsautomates time-consuming testing tasks and provides management with intelligent analytics and reporting so they can focus on what matters.

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

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

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

{{ parent.tldr }}

{{ parent.urlSource.name }}