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

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”.

PageControl1

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

PageControl2

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

PageControl3

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.

PageControl4

PageControl5

PageControl6

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!

Now, compile and run the UIPageViewController example. It should look something like below:

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.

This page was last edited on November 18th, 2016, at 16:42.
 
 

Have an App Idea?

Get your free consultation now