How to Customize the Page Indicator in Uipageviewcontroller

Can we customize the page indicator in UIPageViewController?

I don't believe that you can manipulate the UIPageViewController's page control. My solution:

I have a "root" UIViewController that is UIPageViewControllerDelegate and UIPageViewControllerDataSource.

On this root view controller, I have @property (strong, nonatomic) IBOutlet UIPageControl *pageControl. In the corresponding storyboard nib, I add a UIPageControl, position it, and check "Hides for Single Page". I can also change the colors, if I wish.

Then, I add the following in the root view controller's viewDidLoad: self.pageControl.numberOfPages = [self.features count]

My root view controller also has @property (strong, nonatomic) UIPageViewController *pageViewController. And in the implementation:

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

self.pageViewController.delegate = self;
DataViewController *startingViewController = [self viewControllerAtIndex:0 storyboard:self.storyboard];
NSArray *viewControllers = @[startingViewController];
[self.pageViewController setViewControllers:viewControllers
                                  direction:UIPageViewControllerNavigationDirectionForward
                                   animated:NO
                                 completion:NULL];
self.pageViewController.dataSource = self;      
[self addChildViewController:self.pageViewController];
[self.view addSubview:self.pageViewController.view];
self.pageViewController.view.frame = CGRectMake(0.0, 0.0, [[UIScreen mainScreen] bounds].size.width, [[UIScreen mainScreen] bounds].size.height + 10.0);
[self.pageViewController didMoveToParentViewController:self];
self.view.gestureRecognizers = self.pageViewController.gestureRecognizers;

(SIDE NOTE: That line that sets the frame makes the height of the UIPageViewController's view exceed the screen size so that the native page control is no longer visible. My app is portrait only, iPhone only, so I got off a bit easy here. If you need to handle rotations, you'll have to find a way to keep that native page control offscreen. I tried using auto layout, but UIPageViewController creates a set of magic views that have a bunch of autolayout mask constraints that I couldn't find a way to override.)

Anyway...then I add an extra UIPageViewController delegate method to change my new, non-native UIPageControl to the currently-selected page:

- (void)pageViewController:(UIPageViewController *)viewController didFinishAnimating:(BOOL)finished previousViewControllers:(NSArray *)previousViewControllers transitionCompleted:(BOOL)completed
{
  if (!completed){return;}

  // Find index of current page
  DataViewController *currentViewController = (DataViewController *)[self.pageViewController.viewControllers lastObject];
  NSUInteger indexOfCurrentPage = [self indexOfViewController:currentViewController];
  self.pageControl.currentPage = indexOfCurrentPage;
}

Not as pretty as I would like, but Apple's API for this class doesn't exactly lend itself to elegance.

Adding dots to bottom of UIPageViewController screen

When you use UIPageViewController the dots should be visible by default. I guess you have a white background and the dots are also white, so you just don't see them.

Try to change dots color:

Swift 4/5:

var appearance = UIPageControl.appearance(whenContainedInInstancesOf: [UIPageViewController.self])
appearance.pageIndicatorTintColor = UIColor.red
appearance.currentPageIndicatorTintColor = UIColor.red

Swift 3:

var appearance = UIPageControl.appearanceWhenContainedIn(UIPageViewController.self, nil)
appearance.pageIndicatorTintColor = UIColor.red
appearance.currentPageIndicatorTintColor = UIColor.red

If it doesn't help, make sure that you are using UIPageViewControllerTransitionStyleScroll transition style.

Also, make sure to implement this methods from the UIPageViewControllerDataSource: presentationCount(for:) and presentationIndex(for:).

Remove the page indicator from UIPageViewController

The dots are added once your UIPageViewController datasource implements the following methods:

presentationCountForPageViewController:
presentationIndexForPageViewController:

Avoid to implement those to get rid of the UIPageControl dots.

Increase the size of the indicator in UIPageViewController's UIPageControl

Scaling the page control will scale the dots, but will also scale the spacing in between them.

pageControl.transform = CGAffineTransform(scaleX: 2, y: 2)

If you want to keep the same spacing between dots, you'll need to transform the dots individually:

pageControl.subviews.forEach {
    $0.transform = CGAffineTransform(scaleX: 2, y: 2)
}

However, if you do this in viewDidLoad, the transform has been reset by the time the view appears, so you should do this in viewDidLayoutSubviews…

override func viewDidLayoutSubviews() {
    pageControl.subviews.forEach {
        $0.transform = CGAffineTransform(scaleX: 2, y: 2)
    }
}

UIPageViewController indicators don't change color

it appears that the best solution now is to set it as follows:

No, it isn't. You are adding a new UIPageControl, but the UIPageViewController already has a UIPageControl. What you want is to set the attributes of that UIPageControl.

The way to do that is to use the appearance proxy. Example:

    let proxy = UIPageControl.appearance()
    proxy.pageIndicatorTintColor = UIColor.redColor().colorWithAlphaComponent(0.6)
    proxy.currentPageIndicatorTintColor = UIColor.redColor()
    proxy.backgroundColor = UIColor.yellowColor()

---

Related Topics