Adding dots to bottom of UIPageViewController screen

Question

I have implemented the data source methods of UIPageViewController and still not getting dots at bottom of my iOS app. Anybody have any solution to make dots appear on my app?

KlimczakM · Accepted Answer · 2020-05-05T05:09:27.997

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:).

Changing the transition style of my UIPageViewController fixed the issue. Thank you! — Axe, Jun 29 '16 at 17:20

score 26 · Answer 2 · answered Jan 06 '17 at 19:08

For Swift 3.0, you need:

private func setupPageControl() {
    let appearance = UIPageControl.appearance()
    appearance.pageIndicatorTintColor = UIColor.gray
    appearance.currentPageIndicatorTintColor = UIColor.white
    appearance.backgroundColor = UIColor.darkGray
}

func presentationCount(for pageViewController: UIPageViewController) -> Int {
    setupPageControl()
    return self.images.count
}

func presentationIndex(for pageViewController: UIPageViewController) -> Int {
    return 0
}

score 14 · Answer 3 · edited Aug 24 '17 at 16:10

If anyone is searching for this kind of question still, I found a good tutorial about adding the page dots to your UIPageViewController. It worked for me, at least.

http://www.seemuapps.com/page-view-controller-tutorial-with-page-dots

This is the relevant part for this question:

Make sure you have the appropriate delegate and datasource

import UIKit

class PageViewController: UIPageViewController, UIPageViewControllerDelegate, UIPageViewControllerDataSource

To add the page dot indications add a pageControl as follows:

create an instance of UIPageControl.

var pageControl = UIPageControl()

Now add the following function. This will position the page control at the bottom of the screen. The current page indication will be black, and the rest of the indicators will be white. You can change these to suit the design of your app.

func configurePageControl() {
    pageControl = UIPageControl(frame: CGRect(x: 0,y: UIScreen.main.bounds.maxY - 50,width: UIScreen.main.bounds.width,height: 50))
    self.pageControl.numberOfPages = orderedViewControllers.count
    self.pageControl.currentPage = 0
    self.pageControl.alpha = 0.5
    self.pageControl.tintColor = UIColor.black
    self.pageControl.pageIndicatorTintColor = UIColor.white
    self.pageControl.currentPageIndicatorTintColor = UIColor.black
    self.view.addSubview(pageControl)
}

Now in viewDidLoad() add these two lines:

self.delegate = self
configurePageControl()

And add the following function, this will make sure the page control indicator changes to the correct page as you scroll through.

// MARK: Delegate functions
func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
    let pageContentViewController = pageViewController.viewControllers![0]
    self.pageControl.currentPage = orderedViewControllers.index(of: pageContentViewController)!
}

Answers should have a little more of a description then just a link. That's how StackOverflow like's them :) — sniperd, Aug 22 '17 at 17:59
Thanks for the tip! I updated my answer to do as you suggested. — Josh, Aug 22 '17 at 18:31
The "secret" is that you must add a UIPageControl. Thank you, @Josh — Verticon, Sep 15 '17 at 14:23

score 7 · Answer 4 · answered Apr 20 '16 at 05:32

use the presentationCountForPageViewController and presentationIndexForPageViewController datasource methods then show UIPageViewController dots,

swift code:

private func setupPageControl() {
        let appearance = UIPageControl.appearance()
        appearance.pageIndicatorTintColor = UIColor.grayColor()
        appearance.currentPageIndicatorTintColor = UIColor.whiteColor()
        appearance.backgroundColor = UIColor.darkGrayColor()
    }

func presentationCountForPageViewController(pageViewController: UIPageViewController) -> Int
  {
    setupPageControl()
    return self.arrimg.count
  }

  func presentationIndexForPageViewController(pageViewController: UIPageViewController) -> Int
  {
    return 0
  }

objective-C code:

- (void) setupPageControl
{
    [[UIPageControl appearance] setPageIndicatorTintColor: [UIColor lightGrayColor]];
    [[UIPageControl appearance] setCurrentPageIndicatorTintColor: [UIColor blackColor]];
    [[UIPageControl appearance] setTintColor: [UIColor blackColor]];

}

- (NSInteger) presentationCountForPageViewController: (UIPageViewController *) pageViewController
{
    [self setupPageControl];
    return [arrimg count];
}

- (NSInteger) presentationIndexForPageViewController: (UIPageViewController *) pageViewController
{
    return 0;
}

its working for me, hope its helpful

what is the wrong with my answer if you tell to me i will change it? — Iyyappan Ravi, Apr 20 '16 at 05:55
It's working. But i don't want a separate function setupPageControl(). I used these lines of code in my viewDidLoad() method. — Himanshu, Apr 20 '16 at 06:23
ok but if you use separate function setupPageControl() where you need call it, — Iyyappan Ravi, Apr 20 '16 at 06:26
Read my comment again. I said i use these lines of code in my viewDidLoad() rather than creating a new method for it! — Himanshu, Apr 20 '16 at 06:28

Vahid · Answer 5 · 2019-06-10T10:50:16.133

6

Swift 4 and Swift 5

private func changeIndicatorColor() {
    let appearance = UIPageControl.appearance(whenContainedInInstancesOf: [YourUIPageViewController.self])
    appearance.pageIndicatorTintColor = .lightGray
    appearance.currentPageIndicatorTintColor = .black
}

edited Jun 10 '19 at 10:50

answered Jun 11 '18 at 11:47

Vahid

3,352
2
34
42

score 5 · Answer 6 · answered Aug 02 '17 at 00:42

When using the Page-Based Application template in Xcode 7 the following code works when inserted into the ModelController class:

func presentationCountForPageViewController(pageViewController: UIPageViewController) -> Int {
    setupPageControl()
    return self.pageData.count
}

func presentationIndexForPageViewController(pageViewController: UIPageViewController) -> Int {
    return 0
}

private func setupPageControl() {
    let appearance = UIPageControl.appearance()
    appearance.pageIndicatorTintColor = UIColor.grayColor()
    appearance.currentPageIndicatorTintColor = UIColor.whiteColor()
    appearance.backgroundColor = UIColor.darkGrayColor()
}

score 2 · Answer 7 · answered Aug 03 '19 at 05:50

First ensure your Page View Controller settings are set correctly, namely:

Navigation is set to Horizontal
Transition Style is set to Scroll

Once that is set go to your UIPageViewController class and add these two functions in:

func presentationCount(for pageViewController: UIPageViewController) -> Int {
    return //NUMBER OF DOTS HERE
}

func presentationIndex(for pageViewController: UIPageViewController) -> Int {
    return //CURRENT DOT TO BE SELECTED
}

Here is an example of my case:

func presentationCount(for pageViewController: UIPageViewController) -> Int {
    return viewControllerList.count
}

func presentationIndex(for pageViewController: UIPageViewController) -> Int {
    return currentIndex
}

The two functions in addition to the settings in the storyboard are required for the dots to appear.

score 0 · Answer 8 · answered Dec 04 '18 at 23:04

In the UiViewPageViewController class you can read:

// A page indicator will be visible if both methods are implemented, transition style is 'UIPageViewControllerTransitionStyleScroll', and navigation orientation is 'UIPageViewControllerNavigationOrientationHorizontal'.
// Both methods are called in response to a 'setViewControllers:...' call, but the presentation index is updated automatically in the case of gesture-driven navigation.
@available(iOS 6.0, *)
optional public func presentationCount(for pageViewController: UIPageViewController) -> Int // The number of items reflected in the page indicator.

@available(iOS 6.0, *)
optional public func presentationIndex(for pageViewController: UIPageViewController) -> Int // The selected item reflected in the page indicator.

Adding dots to bottom of UIPageViewController screen

8 Answers8