How to Reuse Paging Interface Controllers in watchOS

watchOS is currently very non-dynamic. You have a storyboard and you have to put all your Interface Controllers in it, even when they’re all pretty much the same, like in this Italian Food Apple Watch app:

Each Interface Controller simply has an image and a label:

WatchOS Paging Storyboard

Even though these are exactly the same and have the exact same logic in the Interface Controllers, for the past year, I haven’t been able to figure out how to re-use one Interface Controller for each of these!

So I had three different controllers where I copied and pasted all the code and only changed the model-layer details for the image and label data. But alas, after searching once again, I finally stumbled on a horrible solution that actually works.

The Model

First, here is the simple FoodItem model that I’m using to populate the data for the Interface Controllers:

The Storyboard

The next step is to create the reusable Interface Controller, let’s name it FoodItemInterfaceController, and to assign it as the class for every single Interface Controller in the storyboard:


Next, create and connect the IBOutlets for the image and label in the FoodItemInterfaceController:


Finally, you have to add a unique identifier for each of your Interface Controllers in the Storyboard:


The Interface Controller

Now comes the ugly part… When the first interface controller loads, you have to trick it into loading all the others instead…


First, this is slower than just hardcoding all the Interface Controllers, since the first time the Interface Controller loads, it has to reload everything. But at least the code is in one place, right?

Also, there is no way to my knowledge to have a dynamic data set (e.g. you get the variable food item array data from the server and want to display it in more than 3 pages. Although in that case, you can use a table instead of paging interface.

Oh, and of course, you still have to duplicate the Interface Controllers in the Storyboard, so even though these all have the same-sized images and labels with the same layout and fonts, if you make a change to one, you have to remember to make it to all so they all look the same at the end. I forgot to do this a few times even for this demo…

You can view the full source code on Github here.

Enjoy the article? Join over 14,500+ Swift developers and enthusiasts who get my weekly updates.