To state the obvious, The Apple Watch has very small screen real estate. There are times we need more screen space than is available. In iOS, there are scroll views. One subclass of scroll views are the table views. Table views come in two flavors: static and dynamic. Dynamic reads data from a collection type and displays it accordingly. Static tables allow for a vertical scroll view with a set of controls. Static table views are very often used as settings pages in applications. Once again, WatchKit goes for the simple route that we don’t get in iOS. Scroll views and Static table views are the same thing. What’s more you do everything in the storyboard — no coding necessary.
Make new project called SwiftWatchKitScroll, with Swift as the language and either Universal or iPhone for the device. Save the project.
Once the project loads, select Edit>New Target from the drop down menu. Add a WatchKit App. You will not need a notification for this project, so you can turn that off. Make sure the language is Swift. Click Finish, and then Activate.
In the WatchKit app folder, select the storyboard. From the object library, drag a switch on the WatchKit scene. Change the switch’s label to Option 1
To speed things up I’m keeping the defaults for position and size for my controls. Drag another switch and then a button, so we run out of room on the scene:
Label the switch Option 2 and the button Button1.
We’ve run out of space to put controls. Put another Switch under the button. Label it Option 3. The scene stretches to include the button
Build and run. On a 38mm watch the Option 3 label slips slightly out of view, on a 42mm watch, the interface fits
Add more controls to the scene. I added another switch button, a slider and another button
Build and run again. we start with the same controls.
On both the 38mm and 42mm watch simulator, you will be able to drag up by clicking and dragging on the black background to see the hidden items. On the watch, you can just move the digital crown or do a drag up gesture.
This is the basics for any scroll view and static table view. They are really the same thing. To make it look more like a table view, you can add a few decorations to the interface. Drag separators above and below the Option 3 switch like this:
Add a label below the separators and one at the very top. Change the labels to Part1, Part2, and Part3.
Build and run. Scroll down a bit and you’ll see your divided sections.
If you need to set up true sections, You can add groups as well. Below Button2 add a group.
Change the layout from Horizontal to Vertical
Change the background color of the group. I made mine 50% gray (#808080)
Add some controls, a separator and label to the group.
Build and Run. Scroll down to see the group at the end of the scroll.
This was short and rather simple lesson. To get scrolling behavior, all you need to do is add more controls, and set outlets for each of them. One last point: a watch app interaction lasts only a few seconds. Put your most important information at the top of a scroll so users can look and change it quickly. Put the least important at the bottom.
In our next lesson, we’ll look at the dynamic table in WatchKit.
Category: Swift Programming, Tutorial, WatchKitTags: Apple Watch, Buttons, glance, groups, layout, Notification, Programming Apple watch, scroll, scrollview, static table, Story Board, storyboard, swift, tableview, Watchkit
If you are making your own stuff, doing your own work and trying to sell it in the market, most advice isn't enough. You want it to work. You want to sell your works to those who most are touched by them. This newsletter is for you. I am one of those people like you, creative, independent and maybe a little bit crazy to the outside world. I'll talk about writing good apps for Apple platforms, the tools and API's to get there. Along the way I will show you how to become you best creative self. I will show you how to build and create, and make some money at it too.
Get exclusive content, new post notifications, tips and more in A Slice of App Pie.
This site may include links that provide monetary compensation to the owners of this site.