UIPageViewController
Introduction#
UIPageViewController provides users the ability to easily transition between several views by using a swipe gesture. In order to create a UIPageViewController, you must implement the UIPageViewControllerDataSource methods. These include methods to return both the UIPageViewController before and after the current UIPageViewController along with the presentationCount and presentationIndex methods.
Syntax#
- UIPageViewControllerTransitionStyle
- UIPageViewControllerNavigationOrientation
- UIPageViewControllerSpineLocation
- UIPageViewControllerNavigationDirection
Remarks#
Apple Developer reference here
Create a horizontal paging UIPageViewController programatically
-
Init array of view controllers which will be managed by UIPageViewController. Add a base view controller class which has property
identifier
which will be used to identify view controllers when working with UIPageViewController data source methods. Let the view controllers to inherit from that base class.UIViewController *firstVC = [[UIViewController alloc] init]; firstVC.identifier = 0
UIViewController *secondVC = [[UIViewController alloc] init];
secondVC.identifier = 1 NSArray *viewControllers = [[NSArray alloc] initWithObjects: firstVC, secondVC, nil]; -
Create UIPageViewController instance.
UIPageViewController *pageViewController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];
-
Data source is current class which must implement
UIPageViewControllerDataSource
protocol.pageViewController.dataSource = self;
-
setViewControllers
will add only first view controller, next will be added to the stack using data source methodsif (viewControllers.count) { [pageViewController setViewControllers:@[[viewControllers objectAtIndex:0]] direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil]; }
-
Add UIPageViewController as a child view controller so it will receive from it’s parent view controller
appearance
androtation
events.[self addChildViewController:pageViewController]; pageViewController.view.frame = self.view.frame; [self.view addSubview:pageViewController.view]; [pageViewController didMoveToParentViewController:self];
-
Implementing UIPageViewControllerDataSource methods
- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController { index = [(Your View Controler Base Class *)viewController identifier]; index—; return [self childViewControllerAtIndex:index];
}
- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController { index = [(Your View Controler Base Class *)viewController identifier]; index++; return [self childViewControllerAtIndex:index];
}
- (NSInteger)presentationCountForPageViewController:(UIPageViewController *)pageViewController
{ return [viewControllers count]; }
- (NSInteger)presentationIndexForPageViewController:(UIPageViewController *)pageViewController
{ return index; }
-
Utility method which returns a view controller using an index, if index is out of bounds it returns nil.
- (UIViewController *)childViewControllerAtIndex:(NSInteger)index
{ if (index <= ([viewControllers count] - 1)) { return [viewControllers objectAtIndex:index]; } else { return nil; } }
A simple way to create horizontal page view controllers ( infinite pages )
- Let’s create a new project, I’m choosing Single View Application for better demonstration
- Drag a page view controller to the storyboard, there are 2 things you should change after that:
- Set the page view controller as initial view controller
- Change the transition style to scroll
-
And you need to create a UIPageViewController class, then set it as custom class of the page view controller on the storyboard
-
Paste this code into your UIPageViewController class, you should get a colorful infinite paged app :)
class PageViewController: UIPageViewController, UIPageViewControllerDataSource { override func viewDidLoad() { self.dataSource = self let controller = createViewController() self.setViewControllers([controller], direction: .forward, animated: false, completion: nil) } func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? { let controller = createViewController() return controller } func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? { let controller = createViewController() return controller } func createViewController() -> UIViewController { var randomColor: UIColor { return UIColor(hue: CGFloat(arc4random_uniform(360))/360, saturation: 0.5, brightness: 0.8, alpha: 1) } let storyboard = UIStoryboard(name: "Main", bundle: nil) let controller = storyboard.instantiateViewController(withIdentifier: "View Controller") controller.view.backgroundColor = randomColor return controller } }
This is what the final project looks like, you get a view controller with different color with every scroll: