One unique way to display the contents of two or more View Controllers is through a Page View Controller, which lets users swipe left and right. Each swipe displays a different View Controller like swiping through pages in an e-book. To use a page controller, you need to add a Page Controller to a storyboard. Then you can customize this Page Controller by defining the following properties in the Attributes Inspector pane:
After customizing the behavior of the Page Controller, the next step is to create multiple View Controllers that are completely separate from the storyboard (not connected to any existing storyboard scenes through segues). To make these View Controllers appear within a Page Controller, each View Controller needs a unique Storyboard ID that you can define within the Identity Inspector pane.
Finally, you need to create separate .swift files and connect them to each View Controller. In addition, you need to create a separate .swift file and connect it to the Page Controller. Altogether, you need two types of .swift files:
Once you’ve added a Page Controller to your storyboard and multiple View Controllers that are not connected to any part of the storyboard through segues, you can then write Swift code to load the multiple View Controllers.
Adding and Customizing a Page Controller
The first step to using a Page Controller is to add one to your storyboard. To see how to place a Page Controller in a storyboard, follow these steps:
Adding View Controllers
A Page Controller displays one or more View Controllers. To make each View Controller appear within a Page Controller, each View Controller needs:
To make it obvious when we’re viewing different View Controllers, we also need to change the background color of each View Controller, but in a real app, each View Controller would display different information such as text, pictures, or user interface designs.
To see how to add View Controllers to a storyboard to use in a Page Controller, follow these steps:
To make multiple View Controllers appear inside a Page Controller, you must first connect the Page Controller to a .swift UIPageController class file. Then within this UIPageController.swift file, you need to write Swift code to do the following:
viewControllerBefore
method to define which View Controller to display when the user swipes to open the previous view.viewControllerAfter
method to define which View Controller to display when the user swipes to open the next view.To see how to write Swift code to make a Page Controller work, follow these steps:
PageViewController
.UIPageViewController
.class PageViewController: UIPageViewController, UIPageViewControllerDataSource {
Under the class PageViewController line, add the following line that declares an array of UIViewControllers:
var controllerArray: [UIViewController]? = nil
Modify the viewDidLoad
method as follows:
override func viewDidLoad() { super.viewDidLoad() dataSource = self let storyBoard = UIStoryboard(name: "Main", bundle: nil) let firstVC = storyBoard.instantiateViewController(withIdentifier: "page01") let secondVC = storyBoard.instantiateViewController(withIdentifier: "page02") let thirdVC = storyBoard.instantiateViewController(withIdentifier: "page03") controllerArray = [firstVC, secondVC, thirdVC] self.setViewControllers([controllerArray![0]], direction: UIPageViewController.NavigationDirection.forward, animated: true, completion: nil) }
Add the following function to define the View Controller to appear when the user displays the previous View Controller:
func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? { guard let vcIndex = controllerArray!.firstIndex(of: viewController) else { return nil } let preIndex = vcIndex - 1 guard preIndex >= 0 else { return controllerArray!.last // loops back to end } guard controllerArray!.count > preIndex else { return nil } return controllerArray![preIndex] }
Add the following function to define the View Controller to appear when the user displays the next View Controller:
func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? { guard let vcIndex = controllerArray!.firstIndex(of: viewController) else { return nil } let nextIndex = vcIndex + 1 guard controllerArray!.count != nextIndex else { return controllerArray!.first } guard controllerArray!.count > nextIndex else { return nil } return controllerArray![nextIndex] }