Search code examples
swiftswiftuiwwdc

Set SwiftUI PageTabViewStyle vertical flow direction in TabView


It is now possible to create a horizontal scrolling page controller with the modifier:

.tabViewStyle(PageTabViewStyle())

By default, pages are presented horizontally. How can it be modified to scroll vertically the same way that UIPageViewController can?


Solution

  • I found an efficient way to obtain this, inspired by Ernist answer.

    GeometryReader { proxy in
        TabView(selection: selection) {
            everyView
                .frame(width: proxy.size.width, height: proxy.size.height)
                .rotationEffect(.degrees(-90))
                .rotation3DEffect(flippingAngle, axis: (x: 1, y: 0, z: 0))
        }
        .frame(width: proxy.size.height, height: proxy.size.width)
        .rotation3DEffect(flippingAngle, axis: (x: 1, y: 0, z: 0))
        .rotationEffect(.degrees(90), anchor: .topLeading)
        .offset(x: proxy.size.width)
    }.tabViewStyle(PageTabViewStyle())
    

    I have also built a swift package (VerticalTabView 🔝) that gives the possibility to wrap all that code in this:

    VTabView {
        everyView
    }.tabViewStyle(PageTabViewStyle())