Search code examples
storyboardwatchkitapple-watchwatchoswkinterfacetable

Apple watch: How to scroll only table contents, and not the whole watch user interface?

To learn watch programming, I have set up a little test app that consists only of an image and a table:

enter image description here

The app is executed by the iOS and watch simulators. Image and table contents are correctly set by the app.

When the table is too long to fit completely on the watch screen, I expected that tapping on the table would allow it to scroll the table contents. However, the complete watch content is scrolled, including the image (please note that the green disk has been scrolled half out of sight):
enter image description here

What do I have to do to keep the image fixed on the screen, yet allow the table contents to vertically scroll?

Solution

  • While the private API supports what you want to do, that feature isn't publicly available to us either in watchOS 2 or watchOS 3.

    We're limited to either the entire interface scrolling (when its content is larger than the screen size), or the entire interface not scrolling at all (when its content fits within the screen size).

    You may want to submit a feature request asking for a static group, sticky table row header, or scrolling region.

    What comes close...

    The new WKCrownSequencer and WKCrownDelegate would let you interact with a scene or specific interface object, but there's no way to override the system's gesture recognition and scroll support on behalf of the entire scrolling interface controller.

    I don't think there's an elegant way to implement what you want now, that would work perfectly.

    If you're determined to hack or rethink this...

    If you don't want to wait for Apple to eventually offer proper support for what you want, here are a few options which might help you approach this from a different direction.

    • Try replacing the table with a picker. The picker would let you scroll through different items on the smaller screen, but it obviously won't look like a table.

    • Limit your table to a fixed number of rows which didn't exceed the screen size. You could update the row content as the crown scrolls but it would be a paging effect rather than a scrolling effect.

    • Drop down to Core Graphics to either draw the location activity indicator, or the table text to create the illusion that a portion of the screen is (not) scrolling.

    • Change the background color of table's row(s), and let the background color function as the location activity indicator.