UIPageViewController page indicator position

Question

Recently I coded this little Tutorial about UIPageViewController: http://www.appcoda.com/uipageviewcontroller-tutorial-intro/

After this tutorial I was wondering if I can change the position of the Page Indicators to the top of the screen.

Does anyone know how?

EDIT

Thank you for your help so far. i followed this post: How to put the UIPageControl element on top of the sliding pages within a UIPageViewController?

Now i have the page Control on the top, but some strange things happen: If you swipe from page 1 to page 2 the indicator indicates that the user is on page 3. i put in a NSLog which shows me the current index and it changes while swipe to the next page from 0 to 1 and than to 2.

Does anybody know why?

Current Code:

@property (weak, nonatomic) IBOutlet UIPageControl *pageControl;

@end

@implementation APPViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    self.pageController = [[UIPageViewController alloc] initWithTransitionStyle:UIPageViewControllerTransitionStyleScroll navigationOrientation:UIPageViewControllerNavigationOrientationHorizontal options:nil];

    self.pageController.dataSource = self;
    [[self.pageController view] setFrame:[[self view] bounds]];

    APPChildViewController *initialViewController = [self viewControllerAtIndex:0];

    NSArray *viewControllers = [NSArray arrayWithObject:initialViewController];

    [self.pageController setViewControllers:viewControllers direction:UIPageViewControllerNavigationDirectionForward animated:NO completion:nil];

    [self addChildViewController:self.pageController];
    [[self view] addSubview:[self.pageController view]];
    [self.pageController didMoveToParentViewController:self];
    UIPageControl *pageControl = [UIPageControl appearance];
    pageControl.pageIndicatorTintColor = [UIColor lightGrayColor];
    pageControl.currentPageIndicatorTintColor = [UIColor orangeColor];
    [self.view bringSubviewToFront:self.pageControl];


    //Or whatever number of viewcontrollers you have
    [self.pageControl setNumberOfPages:5];

    }

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

    APPChildViewController *childViewController = [[APPChildViewController alloc] initWithNibName:@"APPChildViewController" bundle:nil];
    childViewController.index = index;

    return childViewController;

}

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

    NSUInteger index = [(APPChildViewController *)viewController index];

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

    // Decrease the index by 1 to return
    index--;
    [self.pageControl setCurrentPage:index];

    return [self viewControllerAtIndex:index];

}

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

    NSUInteger index = [(APPChildViewController *)viewController index];

    index++;
    [self.pageControl setCurrentPage:index];

    if (index == 5) {
        return nil;
    }

    return [self viewControllerAtIndex:index];

}

AppChildViewController:

@property (assign, nonatomic) NSInteger index;    
- (void)viewDidLoad {

        [super viewDidLoad];
        // Do any additional setup after loading the view from its nib.
        switch(self.index)
        {
            case zero: {
                self.imageView.image = [UIImage imageNamed:@"page1.png"];
                NSLog(@"%d",self.index);
                break;
            }
            case one: {
                self.imageView.image = [UIImage imageNamed:@"page2.png"];
                NSLog(@"%d",self.index);
                break;
            }
            case two: {
                self.imageView.image = [UIImage imageNamed:@"page3.png"];
                NSLog(@"%d",self.index);
                break;
            }
            case three: {
                self.imageView.image = [UIImage imageNamed:@"page4.png"];
                NSLog(@"%d",self.index);
                break;
            }
            default: {
                self.imageView.image = [UIImage imageNamed:@"page5.png"];
                NSLog(@"%d",self.index);
                break;
            }
        }
    }

Here is the answer for the same question: http://stackoverflow.com/a/21048603/3532040 — Lebyrt, Apr 25 '14 at 19:58
i used this http://stackoverflow.com/questions/21073891/how-to-add-a-page-indicator-inside-the-navigation-bar to het it on top — Eloy, Apr 25 '14 at 20:01
Hi, I think best thing you can do is create a new question or change the header of the question? — Eloy, Apr 30 '14 at 10:44
Have you figured out the issue with indexing the page? I've had the same problem with my custom page indicator.. even though I've followed the example provided in several tutorials. — James Paul Mason, Feb 08 '15 at 19:43
assuming your parameter viewControllerAfterViewController is the next view controller and your are at index 0, viewControllerAfterViewController's index should be 1, if you add another 1 to the index (`index++`), it will be 2 — Francis Yeap, Oct 20 '15 at 08:46

score 1 · Answer 1 · answered Nov 05 '14 at 16:04

In our app, I put the page indicator at the top of a page view controller’s view by turning the view upside-down. This is really silly, and I would not recommend using this technique unless you’re confident. It goes something like this:

[pageWrapperView setTransform:CGAffineTransformRotate([pagingView transform], M_PI)];

Where the page view controller’s view is a subview of pageWrapperView.

Then you’ll need to flip the content views too, so they are the right way up.

I have a demo on Github where this technique is used to put a tab bar at the top of the screen.

score 0 · Answer 2 · answered Apr 25 '14 at 20:45

Have you tried explicitly creating the page control and adding it the view with a given frame such as:

UIPageControl *pageControl = [UIPageControl alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 44)];
[self.view addSubView:pageControl];

... or something similar?

score 0 · Answer 3 · answered Dec 07 '16 at 09:23

You can't handle the page index in viewControllerAfterViewController and viewControllerBeforeViewController because they are not necesseraly called when the page change, and you won't have the correct index.

Instead I suggest you to handle it in pageViewController: didFinishAnimating:previousViewControllers:transitionCompleted:

- (void)pageViewController:(UIPageViewController *)pageViewController didFinishAnimating:(BOOL)finished previousViewControllers:(NSArray *)previousViewControllers transitionCompleted:(BOOL)completed {
    if (finished) {
        APPChildViewController *childViewController = [pageViewController.viewControllers firstObject];
        [self.pageControl setCurrentPage:childViewController.index];
    }
}

UIPageViewController page indicator position

3 Answers3