CODEWITHSUNDEEP
swiftswiftuiwwdc
Lorenzo Fiamingo
Lorenzo Fiamingo

Reputation: 4069

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?

Upvotes: 4

Views: 7511

Answers (2)

Lorenzo Fiamingo
Lorenzo Fiamingo

Reputation: 4069

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())

Upvotes: 10

Ernist Isabekov
Ernist Isabekov

Reputation: 1233

Is this what you need

.tabViewStyle(PageTabViewStyle())
.rotationEffect(.degrees(90))

Upvotes: 1

Related Questions