Using TabView on WatchOS

Daily Coding Tip 048

The screenshot above comes from implementing Apple’s TabView example.

I already mentioned the .tabItem when I went through the new standard View Modifiers in the “Views and Controls” chapter of my SwiftUI documentation. In the version of SwiftUI released at WWDC 2020, this modifier has changed in the same way as the TabView it applies to. To recap what I said then, I’ll post Apple’s example with the addition of the @available attribute at the top.

Source code: TabItem.swift

Notice anything?

TabView, along with the modifier .tabItem that allows you to create the icon that represents that page on the tab bar, is new to watchOS. Although it was available on Mac, iOS, iPadOS and tvOS last year, it has only just come to the watch this year. What form could it possibly take, you might ask? It resembles a UIPageViewController from UIKit, with each page requiring you to swipe horizontally from one to the other. The although the .tabItem modifier exists, neither the Text nor the Image that Apple’s example provides are visible. In other words, there is no way to provide tab icons at the bottom of the screen on WatchOS. These tab names or icons will be displayed on other platforms though, so your SwiftUI code will still be cross-platform.

Instead of the tab icons or titles we get dots, much in the same way that UIPageViewController makes use of a UIPageControl, which Apple describes as "a horizontal series of dots, each of which corresponds to a page in the app’s document or other data-model entity.” The WatchOS user interface is much more restrictive due to it being a much smaller screen, so don’t be surprised when controls end up looking different.

Remember that SwiftUI is meant to be platform agnostic, as is shown by the fact that SwiftUI symbols are described as being ‘environment-dependent.’

---

Get more Daily Coding Tips in your inbox!