Implementing the WatchKit Table Interface View

In today’s video, we’re going to be talking about one of the most fundamental elements in iOS and Apple Watch programming. For those that may have some experience in iOS, it is called the Table View Controller. In WatchKit, it is called the WatchKit Interface Table, or WK Interface Table.

So let’s first start off by creating an xcode project. So open up xcode, click Create a New Xcode Project, and navigate to the Watch OS section. Inside the Watch OS section, create and I click on iOS App with WatchKit app option. I’m going to name this application Table Demo. And for everything in this section, keep that unchecked because we’re not going to be using any of these scenes or complications. And make sure the development language is SWIFT.

So once the application has been selected, let’s navigate to the WatchKit app section of the source code. In the WatchKit app section, we’ll see an interface.storyboard file. In the interface storyboard file, we want to add a table object. So let’s open up the objects pane, scroll down or scroll up, and you should see the table object. All you do is click on the table object and drag it over to the interface controller.

Now the next step that we want to do is we want to create a row controller for the table. So in the WatchKit extension folder for the application, right-click on it and click New File. In the new file, let’s create a WatchKit class and call this Table Row Controller. Let’s leave it as a subclass of MS Object and make sure the language is SWIFT. And we will save it in the WatchKit extension target.

Now you should see a class that has been created. What we’ll do now is we’ll navigate over to the interface.storyboard. We’ll click on the table row controller and the interface controller scene right over here and make sure that it is a custom class. So I’m just going to search for a custom class called table row controller. Click on it, and now this is a table row controller custom class.

Now I want to add a label to our table row option. This label will be used to display text in the table row. So I’m going to go, again, in the objects pane and drag over the label object and place it inside the table row. Next, what we want to do is we want to open up the assistant editor so we can see the interface storyboard file and the associated code with it. I’m going to open up this file, just make these a little smaller so it’s easier to see.

And if you click automatic, your table row controller SWIFT file should automatically show up. If not, you can go inside and click the appropriate file. Now what I want to do is I’m going to control click and drag the label object to my class so that I can insert an outlet. In this tutorial, we’re going to be displaying a list of cities around the world on the Apple Watch. So I’m going to call this label City Name label. I’ll keep these default properties the same and click Connect. OK.

Next thing you want to do is you want to click back on the table row controller and click on the row controller and set its identifier. In this case, I’m going to call it the identifier row. You’ll see where we use this in a few minutes. So just type in row and press Enter and it should be set.

So the next thing I’m going to do is I’m going to click on this interface controller and open up the associated storyboard file. And you can just click interface controller SWIFT. And what I’m going to do is I’m going to create a WatchKit interface table outlet connection inside my code. So I will just call this table Cities Table and click Connect. And I connected it the same way as I did before, just a control drag from the objects pane into the interface controller SWIFT file.

Now we can close up the Assistant Editor and click on the interface controller SWIFT file. Inside the interface controller SWIFT file, we want to create a method that is responsible for taking the data and populating the Cities table with city names.

So what I’m going to do is I’m going to create a function so Private Fun. And I’m going to call this function Load Data. I’m not going to give it any parameters and it’s not going to return anything. So it will return void.

The first thing I want to do is I want to create a data structure that is responsible for holding the data for the cities. In this case, the data structure is going to be an array of strings for cities. So we can just declare a constant array, let cities equal to. And then the first city will be San Francisco, then New York, then Mumbai, then London, then Paris.

OK. The next thing we want to do is we want to tell the Cities Table exactly how many rows it should create the table with. So the access to table object using self.citiestable.setnumberofrows. And it’s the first option that pops up here so we can click that. And you see that it has two arguments, number of rows and with row type.

In the number of rows, I’m just going to take the array that we created up here and use the count property to figure out how many items are in the array. Then with the row type, I’m going to use the row type that we set before in the interface storyboard file.

So now we have to iterate over each cell in the array and populate it with the city name. So the first thing I’m going to do is create a constant that holds the row count. So let row count equal to citiestable.numberofrows. And this row count just gets the number of rows from the Cities Table object that we created up here.

Now we just have to iterate over each row in the table. So 4i in 02 row count minus one. And the reason I’m doing row count minus one is so that we don’t get an index out of bounds error because arrays start from zero.

Now I’m going to let row equal to self.citiestable.rowcontrolleractinti. And what this does is it gets the row at this particular index, so we’re going to be looping from zero to however many indices there are in the array. And we have to make sure to cast this as our custom table row controller object that we created over here. So just set as table row controller.

And then once we have the row object created, we can just access the city name label property, and then for that property we can set its text. And in this case, I just want to access the appropriate city for that index. So it will be cities and then the i-th index. And now we want to just call this function. So we will call it after the Will Activate self load data. OK.

Now the next thing you want to do is you want to click on your active schemes up in the top left-hand corner and navigate to your WatchKit app, and build it for any of the WatchKit simulators that are preset in xcode, or build it on your own device. So I’m just going to click that one. And it just takes a second to build.

And your simulator should open up the watch. I’m using iOS12 and the latest Watch OS, but this should work in Watch OS. And as you can see, all of our cities have shown up in our table, and you can scroll up and down. Thank you.