How to put the UIPageControl element on top of the sliding pages within a UIPageViewController?

Question

Regarding to this tutorial by AppCoda about how to implement a app with UIPageViewController I'd like to use a custom page control element on top of the pages instead of at the bottom.

When I just put a page control element on top of the single views which will be displayed, the logical result is that the control elements scrolls with the page view away from the screen.

How is it possible to put the control element on top of the views so the page views are full screen (like with an image) so the user can see the views underneath the fixed control element?

I attached an example screenshot - credits to AppCoda and Path:

Answer 1

After further investigation and searching I found a solution, also on stackoverflow.

The key is the following message to send to a custom UIPageControl element:

[self.view bringSubviewToFront:self.pageControl];

The AppCoda tutorial is the foundation for this solution:

Add a UIPageControl element on top of the RootViewController - the view controller with the arrow.

Create a related IBOutlet element in your ViewController.m.

In the viewDidLoad method you should then add the following code as the last method you call after adding all subviews.

[self.view bringSubviewToFront:self.pageControl];

To assign the current page based on the pageIndex of the current content view you can add the following to the UIPageViewControllerDataSource methods:

- (UIPageViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerBeforeViewController:(UIViewController *)viewController
{
    // ...
    index--;
    [self.pageControl setCurrentPage:index];

    return [self viewControllerAtIndex:index];
}

- (UIPageViewController *)pageViewController:(UIPageViewController *)pageViewController viewControllerAfterViewController:(UIViewController *)viewController
{
    // ...
    index++;
    [self.pageControl setCurrentPage:index];

    // ...
    return [self viewControllerAtIndex:index];
}