How to implement UIPageViewController that utilizes multiple ViewControllers

Question

I've been working on a simple test app to learn the ins and outs of the UIPageViewController. I have it working but I'm not convinced my execution is the best way. I hope some of you can point me in the right direction.

To get a basic understanding I used this tutorial as a starting point. http://www.appcoda.com/uipageviewcontroller-storyboard-tutorial/

The tutorial creates an app that uses one viewController for each of the pages presented by the UIPageViewController. However I need to utilize the UIPageViewController to scroll thru pages that have completely different layouts. Therefore to take the tutorial a step further I created an master-detail application that uses the UIPageViewController in the detail view to display three different view controllers. I stuck with just displaying images and labels for this test app, but the app I am currently building has three viewControllers that will contain either a tableview, imageView and textViews, or some textFields.

Here is the storyboard for my test app.

I use the DetailViewController as the data source for the PageViewController. In viewDidLoad of the DVC I establish the labels and images that will be used in the three content view controllers firstViewController, secondViewController, and thirdViewController in this manner.

if ([[self.detailItem description] isEqualToString:@"F14's"]) {
    //Here the page titles and images arrays are created 
    _pageTitles = @[@"Grim Reapers", @"Breakin the Barrier!", @"Top Gun"];
    _pageImages = @[@"F14_Grim.jpg", @"F14boom.jpg", @"F14_topgun.jpg"];

    //Here I call a method to instantiate the viewControllers 
    FirstController *selectedController = [self viewControllerAtIndex:0];
    SecondController *nextController = [self viewControllerAtIndex:1];
    ThirdController *lastController = [self viewControllerAtIndex:2];
    [_vc addObject:selectedController];
    [_vc addObject:nextController];
    [_vc addObject:lastController];
    _vc1 = @[selectedController];


} else if ([[self.detailItem description] isEqualToString:@"F35's"]){
    //code is above is repeated

Below is the method to instantiate the viewControllers

- (UIViewController *)viewControllerAtIndex:(NSUInteger)index
{
    if (([self.pageTitles count] == 0) || (index >= [self.pageTitles count])) {
        return nil;
    }

    // Create a new view controller and pass suitable data.
    if (index == 0) {
        FirstController *fvc = [self.storyboard instantiateViewControllerWithIdentifier:@"FirstPageController"];
        fvc.imageFile = self.pageImages[index];
        fvc.titleText = self.pageTitles[index];
        fvc.pageIndex = index;
        if ([_vc count]) {
             //Here I have to replace the viewController each time it is recreated
             [_vc replaceObjectAtIndex:0 withObject:fvc];
        }
        return fvc;
    } else if (index == 1) {
//Code is repeated for remaining viewControllers

The code in viewDidLoad is one area I feel I am doing unnecassary work. I don't believe I need to instantiate all three view controllers upon loading the DVC, but I didn't know how else to provide an array for the UIPageViewControllerDataSource protocol methods (viewControllerBeforeViewController and viewControllerAfterViewController).

Here is the viewControllerBefore.. method.

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController
{

    NSUInteger index = [_vc indexOfObject:viewController];

    if ((index == 0) || (index == NSNotFound)) {
        return nil;
    }

    index--;

    //notice here I call my instantiation method again essentially duplicating work I have already done!
    return [self viewControllerAtIndex:index];
}

In summary it seems that I am unnecassarily recreating the view controllers with every swipe from from one page to another. Is this just how the pageViewController works or have I way over complicated the process. Any input would be great!

SOLUTION

Matt suggested an incredibly simple solution in using identifiers. In my Storyboard i simply checked the box that uses my already implemented Storyboard identifier as the Restoration Identifier

Then in viewDidLoad rather than creating an array of viewControllers, simply create an array of strings that match the restoration identifiers.

if ([[self.detailItem description] isEqualToString:@"F14's"]) {
    _pageTitles = @[@"Grim Reapers", @"Breakin the Barrier!", @"Top Gun"];
    _pageImages = @[@"F14_Grim.jpg", @"F14boom.jpg", @"F14_topgun.jpg"];
    FirstController *selectedController = [self viewControllerAtIndex:0];
    [_vc addObject:@"FirstPageController"];
    [_vc addObject:@"SecondPageController"];
    [_vc addObject:@"ThirdPageController"];
    _vc1 = @[selectedController];

Finally to determine the index in the delegate methods do this rather than what I was doing before:

NSString * ident = viewController.restorationIdentifier;
NSUInteger index = [_vc indexOfObject:ident];

It now works without having to unnecessarily instantiate the view controllers.

As a last note if anyone is using exactly what I have here you can get rid of the following snippet from the viewControllerAtIndex: method.

if ([_vc count]) {
     //Here I have to replace the viewController each time it is recreated
     [_vc replaceObjectAtIndex:0 withObject:fvc];
}

Answer 1

First of all, you are absolutely right that the view controllers that constitute the "pages" of the UIPageViewController can be completely different in nature. Nothing whatever says that they have to be instances of the same view controller class.

Now let's get to the actual problem, which is that you very sensibly need a way to provide the next or previous view controller given the current view controller. That is, indeed, the main issue when using a page view controller.

It would not really be terrible to hold an array of view controllers. After all, a view controller is a lightweight object (it is the view that is the heavyweight object). However, you are also right that the way you're handling this seems clumsy.

My suggestion is: if you are going to hold the view controller instances in a storyboard, then why not just keep an array of their identifiers? Now you've got an array of three strings. How simple can you get? You will also need a single instance variable that keeps track of which identifier corresponds to the view controller that having its view used as the current page (so that you can work out which one is "next" or "previous"); this could just be an integer indexing into the array.

There is then absolutely nothing wrong with instantiating a view controller each time the user "turns the page". That is what you are supposed to do when a view controller is needed. And you can readily do this by identifier.

Finally, note that if you use the scroll style of page view controller, you won't even have to do that, because the page view controller caches the view controllers and stops calling the delegate methods (or, at least, calls them less).

Answer 2

Came across this question as I was looking for a solution to this same problem - thanks to Matt for the guidance that he provided and to Ben for the solution description.

I built a sample project to understand this myself and since I noticed some comments asking for sample code I've uploaded this to GitHub. My solution mimics Matt's suggested approach & Ben's stated solution by:

• Setting the restoration IDs in the Storyboard for each of the view controllers that are part of the PageViewController.
• Using an NSArray of NSString objects which contain the above mentioned RestorationIDs.
• Instantiating the appropriate view controller based on this configuration.

Additionally, the implementation problem I was trying to solve required the ability to navigate backwards/forwards from the child view controllers, so this sample project also supports that functionality by asking the root view controller to go to the previous or next page (this could also be applied to go to a specific page).

Sample code on GitHub

Side note: I was admittedly hoping that similar to a UITabBarController that I could simply wire everything up from within the Storyboard and specify the order of the view controllers but alas it doesn't seem like we're there yet (as of Xcode 6 / iOS 8.1). The code required for this solution however is pretty minimal and straightforward.

Answer 3

Basically, I managed to get a slightly different way which is based on the template provided by XCode 6.4 (Page-Based Application) methods and the insights from other authors (including this, @Ben from other answers):

- (void)viewDidLoad {
    [super viewDidLoad];

    self.viewControllersArray = @[@"FirstViewController", @"SecondViewController"];
...
}

...

- (UIViewController *)viewControllerAtIndex:(NSUInteger)index {

    UIViewController *childViewController = [self.storyboard instantiateViewControllerWithIdentifier:[self.viewControllersArray objectAtIndex:index]];
    //childViewController.index = index;
    return childViewController;

}

- (NSUInteger)indexOfViewController:(UIViewController *)viewController {
    NSString *restorationId = viewController.restorationIdentifier;
    return [self.viewControllersArray indexOfObject:restorationId];
}

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController {

    NSUInteger index = [self indexOfViewController:(UIViewController *)viewController];
    if ((index == 0) || (index == NSNotFound)) {
        return nil;
    }

    index--;
    return [self viewControllerAtIndex:index];
}

- (UIViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController {

    NSUInteger index = [self indexOfViewController:(UIViewController *)viewController];
    if (index == NSNotFound) {
        return nil;
    }

    index++;
    if (index == [self.viewControllersArray count]) {
        return nil;
    }
    return [self viewControllerAtIndex:index];
}