Vertical TabView

I am using .tabViewStyle(.page). I like this functionality and styling but want it to be swipe up/down rather than left/right.

Is there a simple way to achieve that while keeping the little dots that mark what page your on?

Answered by DTS Engineer in 800571022

Vertical paging isn't supported by TabView. When using the .page style, TabView only allows horizontal paging.

However, you can wrap a UIPageViewController in a UIViewControllerRepresentable and set its navigationOrientation to vertical to achieve vertical page-by-page navigation.

    func makeUIViewController(context: Context) -> UIPageViewController {
        let pageViewController = UIPageViewController(
            transitionStyle: .scroll,
            navigationOrientation: .vertical)
        pageViewController.dataSource = context.coordinator
        pageViewController.delegate = context.coordinator

        return pageViewController
    }

Review Interfacing with UIKit tutorial, it has a step- by step walkthrough of the implementation.

Accepted Answer

Vertical paging isn't supported by TabView. When using the .page style, TabView only allows horizontal paging.

However, you can wrap a UIPageViewController in a UIViewControllerRepresentable and set its navigationOrientation to vertical to achieve vertical page-by-page navigation.

    func makeUIViewController(context: Context) -> UIPageViewController {
        let pageViewController = UIPageViewController(
            transitionStyle: .scroll,
            navigationOrientation: .vertical)
        pageViewController.dataSource = context.coordinator
        pageViewController.delegate = context.coordinator

        return pageViewController
    }

Review Interfacing with UIKit tutorial, it has a step- by step walkthrough of the implementation.

Vertical TabView
 
 
Q