How to Create Enthralling PageViews Like ‘Angry Birds’ With UIPageViewController Storyboard

angry birds

The UIPageViewController class was first introduced in iOS 5 that allowed iOS developers to build pages of content.

Each of the pages managed by its own view controller.

However, this UIPageViewController class was further improved in iOS 6 to support the scrolling transition.

In simple words, the iOS PageViewController is used to navigate the screens/pages with animations and customized contents. With this UIPageControl, users can easily navigate between multiple pages through the simple gestures.

You can find such examples of PageView implementations in addictive games like Angry Birds.

This is what we’re going to share in this tutorial.

Let’s Get Started

Create a new project under the file menu and select “Single View Application” and click on next button.

PageControl 0

In the next tab, write the name of your project. Here, we’re naming it as “SOPageViewController”.


Next, create a new class file (MainPageVC) and inherit UIPageViewController.


After you create the class file, add UIPageVIewController in Main.Storyboard and assign MainPageVC.


Create n number of ViewControllers you want in your app. Here, we’ve created 3 ViewControllers by name FirstVC, SecondVC, and ThirdVC. Next, set the storyboard identifier as well with FirstVCID, SecondVCID, and ThirdVCID.




After this, declare an array in “MainPageVC” and set DataSource of UIPageViewController.

class MainPageVC: UIPageViewController, UIPageViewControllerDataSource

var arrViewControllers: [UIViewController]? = nil
In ViewDidLoad() function, create an array of View Controller to show in Page Control.

//Create array of ViewControllers
let storyBoard = UIStoryboard(name: "Main", bundle: nil)
let firstVC = storyBoard.instantiateViewControllerWithIdentifier("FirstVCID")
let secondVC = storyBoard.instantiateViewControllerWithIdentifier("SecondVCID")
let thirdVC = storyBoard.instantiateViewControllerWithIdentifier("ThirdVCID")

arrViewControllers = [firstVC, secondVC, thirdVC]
Next, set the DataSource self to UIPageViewController in ViewDidLoad() function.

self.dataSource = self

Set the first page of the PageViewController from ViewDidLoad() function.

//Get fist viewcontroller show in screen.
self.setViewControllers([arrViewControllers![0]], direction: UIPageViewControllerNavigationDirection.Forward, animated: false, completion: nil)

Lastly, declare DataSource of UIPageViewController for next and previous view controller.

//MARK: DataSource of UIPageViewController
func pageViewController(pageViewController: UIPageViewController,
viewControllerBeforeViewController viewController: UIViewController) -> UIViewController? {
guard let vcIndex = arrViewControllers!.indexOf(viewController) else {
return nil

let preIndex = vcIndex - 1

guard preIndex >= 0 else {
return nil

guard arrViewControllers!.count > preIndex else {
return nil

return arrViewControllers![preIndex]

func pageViewController(pageViewController: UIPageViewController,
viewControllerAfterViewController viewController: UIViewController) -> UIViewController? {
guard let vcIndex = arrViewControllers!.indexOf(viewController) else {
return nil

let nextIndex = vcIndex + 1
let vcCount = arrViewControllers!.count

guard vcCount != nextIndex else {
return nil

guard vcCount > nextIndex else {
return nil

return arrViewControllers![nextIndex]

That’s it!


How simple is that, isn’t it?

However, this is just a simple demo. You can create more interactive page views just as Angry Birds with UIPageViewController Storyboard.

If you’ve such mobile app idea in which you want to include interactive page views and searching for a mobile app development company to discuss it, you can contact us.

You can download the source code of UIPageViewControlle from GitHub.

You may also like,

This page was last edited on April 24th, 2020, at 2:46.


Have an App Idea?

Get your free consultation now

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Your Free Quote