UIPageViewController page location dots appear overlapped? - ios

Question

I am having this issue where the dots in my PageViewController are appearing with a dot in-between two dots. When I save the pages and load them, then the pages appear with normal dots, the appropriate number of dots, and normal placement. Here is an image of what I am talking about.
Hierarchy debugger shows this image. Obviously the dots are appearing multiple times, behind one another.
Here is the code that I use for the dots:
func configurePageControl() {
pageControl = UIPageControl(frame: CGRect(x: 0,y: UIScreen.main.bounds.maxY - 50,width: UIScreen.main.bounds.width,height: 50))
self.pageControl.numberOfPages = storyPageViewControllers.count
self.pageControl.currentPage = 0
self.pageControl.tintColor = UIColor.black
self.pageControl.alpha = 0.5
self.pageControl.pageIndicatorTintColor = UIColor.white
self.pageControl.currentPageIndicatorTintColor = UIColor.black
self.view.addSubview(pageControl)
}
configurePageControl() is called in the viewDidAppear. I tried moving it to the viewDidLoad, but it only showed one dot and didn't show more as I made new pages.
Here is my extension on the UIPageViewController class if you want to see how my pages are created:
extension BookPageViewController: UIPageViewControllerDelegate, UIPageViewControllerDataSource {
func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
guard let viewControllerIndex = storyPageViewControllers.index(of: viewController as! TemplateViewController) else { return nil }
if viewControllerIndex == 0 { return nil } // Page won't scroll below first page.
let previousIndex = viewControllerIndex - 1
guard storyPageViewControllers.count > previousIndex else { return nil }
currentPage = Double(previousIndex)
return storyPageViewControllers[previousIndex]
}
func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
guard let viewControllerIndex = storyPageViewControllers.index(of: viewController as! TemplateViewController) else { return nil }
let nextIndex = viewControllerIndex + 1
let storyPageViewControllersCount = storyPageViewControllers.count
guard storyPageViewControllersCount != nextIndex else { return nil }
guard storyPageViewControllersCount > nextIndex else { return nil }
currentPage = Double(nextIndex)
return storyPageViewControllers[nextIndex]
}
// MARK: Delegate function
func pageViewController(_ pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
let pageContentViewController = pageViewController.viewControllers![0]
self.pageControl.currentPage = storyPageViewControllers.index(of: pageContentViewController as! TemplateViewController)!
}
func presentationCountForPageViewController(pageViewController: UIPageViewController) -> Int {
return storyPageViewControllers.count
}
func presentationIndexForPageViewController(pageViewController: UIPageViewController) -> Int {
guard let firstViewController = viewControllers?.first,
let firstViewControllerIndex = storyPageViewControllers.index(of: firstViewController as! TemplateViewController) else
{ return 0 }
return firstViewControllerIndex
}
}

Answer 1

1- Definitely don't call configurePageControl() on viewDidappear. Is wrong, can give u bugs and weird user experience.
2- U r calling configurePageControl() 3 times. By chance do you have 3 viewController on your pageViewController?
Solutions:
A: I would create the pageViewController in Storyboard and just update the dots number just after u finish setting all ViewControllers.
B: Keep all as is BUT:
1- Move configurePageControl() to ViewDidLoad()
2- Leave it like this, with initial dots to 0
(tip 1: avoid using "self" when is not necessary)
(tip 2: avoid using frames, use constraints)
func configurePageControl() {
pageControl = UIPageControl(frame: CGRect(x: 0,y:
UIScreen.main.bounds.maxY - 50,width:
UIScreen.main.bounds.width,height: 50))
pageControl.numberOfPages = 0
pageControl.currentPage = 0
pageControl.tintColor = UIColor.black
pageControl.alpha = 0.5
pageControl.pageIndicatorTintColor = UIColor.white
pageControl.currentPageIndicatorTintColor = UIColor.black
view.addSubview(pageControl)
}
3- Just after u finish setting all viewControllers, update the pageViewControllers dots number
pageControl.numberOfPages = storyPageViewControllers.count
Notice it should work if placed here, but is not the right place. U can do it just for testing.
func presentationCountForPageViewController(pageViewController:
UIPageViewController) -> Int {
pageControl.numberOfPages = storyPageViewControllers.count
return storyPageViewControllers.count
}

Answer 2

UIPageViewController already has a page control; all you have to do is show it (by implementing the two data source methods that do that). You shouldn't be adding another page control to it. The included page control already syncs itself to the page view controller. You're doing far more work than you should be doing.