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

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


I didn't have the rep to comment on the answer that originated this, but I really like it. I improved the code and converted it to swift for the below subclass of UIPageViewController:

class UIPageViewControllerWithOverlayIndicator: UIPageViewController {    override func viewDidLayoutSubviews() {        for subView in self.view.subviews as! [UIView] {            if subView is UIScrollView {                subView.frame = self.view.bounds            } else if subView is UIPageControl {                self.view.bringSubviewToFront(subView)            }        }        super.viewDidLayoutSubviews()    }}

Clean and it works well. No need to maintain anything, just make your page view controller an instance of this class in storyboard, or make your custom page view controller class inherit from this class instead.


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];}


sn3ek Your answer got me most of the way there. I didn't set the current page using the viewControllerCreation methods though.

I made my ViewController also the delegate of the UIPageViewController. Then I set the PageControl's CurrentPage in that method. Using the pageIndex maintained I'm the ContentViewController mention in the original article.

- (void)pageViewController:(UIPageViewController *)pageViewController didFinishAnimating:(BOOL)finished previousViewControllers:(NSArray *)previousViewControllers transitionCompleted:(BOOL)completed{  APPChildViewController *currentViewController = pageViewController.viewControllers[0];  [self.pageControl setCurrentPage:currentViewController.pageIndex];}

don't forget to add this to viewDidLoad

self.pageViewController.delegate = self;

To follow up on PropellerHead's comment the interface for the ViewController will have the form

@interface ViewController : UIViewController <UIPageViewControllerDataSource, UIPageViewControllerDelegate>