iOS: Page View Controller
The content of iOS applications is displayed through the usage of content View Controllers and containers. To make it easy for the user to switch between view controllers, the application must have a mechanism for navigating between them. This tutorial segment will cover the PageViewController, a container view controller that controls how content is navigated across its pages. Each page is under the supervision of a child view controller. It is a UIPageViewController instance that derives from UIViewController.
class UIPageViewController : UIViewController
Many iOS applications use the PageViewController to allow the user to switch between the different pages that contain the application’s content. Within the application, programmatic control over the navigation is possible. The change is animated by the PageViewController using the specified transition.
UIPageViewControllers Properties
| SN | Property | Description |
|---|---|---|
| 1 | var dataSource: UIPageViewControllerDataSource? | It is the object of the UIPageViewControllerDataSource protocol that contains the method to provide view controllers to navigate. |
| 2 | protocol UIPageViewControllerDataSource | The protocol UIPageViewControllerDataSource provides the view controllers on demand of the application in response to navigation gestures. |
| 3 | var delegate: UIPageViewControllerDelegate? | It is the delegate object of the Page View Controller. |
| 4 | protocol UIPageViewControllerDelegate | This protocol contains the delegate methods that are notified when the device orientation changes and when the user navigates to a new page. |
| 5 | var viewControllers: [UIViewController]? | It is the list of UIViewControllers that are displayed by the page view controller. |
| 6 | var gestureRecognizers: [UIGestureRecognizer] | The list of Gesture Recognizer objects that are configured to handle user interaction. |
| 7 | var navigationOrientation: UIPageViewController.NavigationOrientation | It is the direction of navigation. |
| 8 | var spineLocation: UIPageViewController.SpineLocation | It represents the location of the spine. |
| 9 | var transitionStyle: UIPageViewController.TransitionStyle | It is the style used for transition between the view controllers. |
| 10 | var isDoubleSided: Bool | It is a Boolean value that indicates whether the content is displayed on the backside of the pages. |
UIPageViewController Functions
| SN | Method | Description |
|---|---|---|
| 1 | func setViewControllers([UIViewController]?, direction: UIPageViewController.NavigationDirection, animated: Bool, completion: ((Bool) -> Void)?) | This method is used to set the view controllers to be displayed by the page view controller. |
Â
Example
In this example, we will develop a project that has two view controllers, and the navigation between the view controllers is controlled by a root page view controller.
Main.storyboard
The PageViewController must first be added to the storyboard. Use the object library to search for Page View Controller for this reason, then drag the result onto the storyboard.
As seen in the accompanying image, this will add the Page View Controller to the storyboard. In the Identity inspector, we will assign the storyboard id to RootVC and RootPageViewController.swift as the initial view controller, and we will designate this view controller as the initial view controller in the attribute inspector.
We have created a PageViewController to handle the navigation between various view controllers. As a result, as seen in the accompanying image, we will also add two View Controllers to this project. To help with identification, we have given each View Controller a distinct backdrop color. Additionally, we have assigned the view controllers’ storyboard ids in the identity inspector as FirstVC and SecondVC.
This is where the project’s storyboard has been constructed. We will now define the navigation in the RootPageViewController class programmatically. It uses its two methods to return the view controller that will be present before and after to the current view controllers, and it complies with the UIPageViewControllerDataSource protocol.
The list of View Controllers that are used for navigation is defined by the RootPageViewController class. The setViewControllers() function of the PageViewController class is used to set the first view controller in the list as the active view controller.
RootPageViewController.swift
import UIKit
class RootPageViewController: UIPageViewController {
lazy var vcList:[UIViewController] = {
let storyboard = UIStoryboard(name: "Main", bundle: nil)
let firstVC = storyboard.instantiateViewController(identifier: "FirstVC")
let secondVC = storyboard.instantiateViewController(identifier: "SecondVC")
return [firstVC, secondVC]
}()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
self.dataSource = self
if let vc = vcList.first{
self.setViewControllers([vc], direction: .forward, animated: true, completion: nil)
}
}
}
extension RootPageViewController : UIPageViewControllerDataSource{
func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
guard let index = vcList.lastIndex(of: viewController) else { return nil }
let previousIndex = index - 1
guard previousIndex >= 0 else {return nil}
guard previousIndex < vcList.count else {return nil}
return vcList[previousIndex]
}
func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
guard let index = vcList.lastIndex(of: viewController) else { return nil }
let previousIndex = index + 1
guard previousIndex >= 0 else {return nil}
guard previousIndex < vcList.count else {return nil}
return vcList[previousIndex]
}
}
Output
