CODEWITHSUNDEEP
swiftswiftuiwatchkitapple-watchwatchos
braza
braza

Reputation: 4662

Vertical TabView or pagination on Apple Watch using Digital Crown to scroll

I'm trying to recreate the vertical scroll used by something like the Apple Workout app on the Apple watch. See screenshot below:

workout app vertical tabs

It uses both a regular TabView and something that looks similar to a vertical TabView on the right. You can either scroll with your finger or the digital crown and it will jump between pages like tabs. In the screenshot the top part with the time is fixed and only the part below is changing for different views.

Are they using a public component here and if not, how can it be recreated?

It behaves almost identically to a regular TabView except it allows scrolling with the digital crown and when you do it turns green instead of white before fading out.

This is what I've attempted so far but it's pretty hacky and not ideal using rotation. You would also need to manually implement page changes based on the digital crown movement.

 GeometryReader { proxy in
            VStack {
                Text("00:00:00 - Fixed above")
                TabView {
                    VStack {
                        Text("Page 1")
                    }.rotationEffect(.degrees(90))
                    VStack {
                        Text("Page 2")
                    }.rotationEffect(.degrees(90))
                    VStack {
                        Text("Page 3")
                    }.rotationEffect(.degrees(90))
                }.rotationEffect(.degrees(-90)).frame(width: proxy.size.height, height: proxy.size.width)
            }
        }

demo code output

Upvotes: 4

Views: 1359

Answers (1)

braza
braza

Reputation: 4662

Turns out it's as simple as setting the style to carousel. It even does the digital crown page turning for you.

TabView{
  Text("Page 1")
  Text("Page 2")
  Text("Page 3")
}.tabViewStyle(.carousel)

result

Upvotes: 7

Related Questions