UIPageControl Dots Not Visible But Frame is Visible

Question

I have created my first UIPageControl and I cannot see it.

Every question I see regarding this same issue talks about the color of the dots and the color of the background being the same and that being the problem - this is not my problem.

Here is what is happening: 1) I add a UIPageControl to my view which also contains a scroll view. The scroll view paginates through a few different views. The UIPageControl is added just below the scroll view using autolayout. 2) I update the page control's current page just after the view loads and then every time the scroll view is scrolled. 3) My view background is dark grey and the dots of the UIPageControl should be white as a default color, yet I do not see them. HOWEVER, when I set the background of the UIPageControl to a color other than clear, I can see the frame of the control sitting there, I just don't see the dots. 4) I checked to make sure that the UIPageControl currentPage property is being set properly and it is.

I must be making a stupid mistake, but I can't seem to find it. Here is my code:

//create UIPageControl

    - (void)viewDidLoad
    {
      [super viewDidLoad];

      self.view.backgroundColor = [UIColor colorWithRed:32/255.0f green:68/255.0f blue:90/255.0f alpha:1];

      //...create self.scrollView and add it to the view

      [self createArrayOfViews]; //this is what makes up the pages in the scroll view
      NSInteger pageCount = self.onboardImages.count; //this array is set in create array of views method above

      self.pageControl.currentPage = 0;
      self.pageControl.numberOfPages = pageCount;

      self.pageViews = [[NSMutableArray alloc] init];
      for (NSInteger i = 0; i < pageCount; ++i) {
        [self.pageViews addObject:[NSNull null]];
      }

      self.scrollView = onBoardScrollView;
      [self.view addSubview:self.scrollView];
      [self.view addConstraints:@[onBoardScrollViewWidth, onBoardScrollViewHeight, onBoardScrollViewCenterY, onBoardScrollViewCenterX]];

      UIPageControl *onBoardImagePageControl = [[UIPageControl alloc]init];
      onBoardImagePageControl.translatesAutoresizingMaskIntoConstraints = NO;
      onBoardImagePageControl.backgroundColor = [UIColor clearColor];

      NSLayoutConstraint *onBoardPageControlTop = [NSLayoutConstraint constraintWithItem:onBoardImagePageControl attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:onBoardScrollView attribute:NSLayoutAttributeBottom multiplier:1.0f constant:10.0f];
      NSLayoutConstraint *onBoardPageControlCenterX = [NSLayoutConstraint constraintWithItem:onBoardImagePageControl attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1.0f constant:0.0f];

      CGSize sizeForPageControl = [onBoardImagePageControl sizeForNumberOfPages:self.onboardImages.count];

      NSLayoutConstraint *onBoardPageControlWidth = [NSLayoutConstraint constraintWithItem:onBoardImagePageControl attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f constant:sizeForPageControl.width];
      NSLayoutConstraint *onBoardPageControlHeight = [NSLayoutConstraint constraintWithItem:onBoardImagePageControl attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f constant:sizeForPageControl.height];

      self.pageControl = onBoardImagePageControl;

      [self.view addSubview:self.pageControl];
      [self.view addConstraints:@[onBoardPageControlTop, onBoardPageControlCenterX, onBoardPageControlHeight, onBoardPageControlWidth]];

      //... add a few other UI elements

    }

//after frames have been created using autolayout, load visible pages

    - (void)viewDidLayoutSubviews
    {
      [super viewDidLayoutSubviews];
      CGSize pagesScrollViewSize = self.scrollView.frame.size;
      self.scrollView.contentSize = CGSizeMake(pagesScrollViewSize.width * self.onboardImages.count, 250); 
      self.scrollView.delegate = self;
      [self loadVisiblePages];
    }

//code to load visible pages

    - (void)loadVisiblePages {
      // First, determine which page is currently visible
      CGFloat pageWidth = self.scrollView.frame.size.width;
      NSInteger page = (NSInteger)floor((self.scrollView.contentOffset.x * 2.0f + pageWidth) / (pageWidth * 2.0f));

      // Update the page control
      self.pageControl.currentPage = page;

      // Work out which pages you want to load
      NSInteger firstPage = page - 1;
      NSInteger lastPage = page + 1;

      // Purge anything before the first page
      for (NSInteger i=0; i<firstPage; i++) {
        [self purgePage:i];
      }

        // Load pages in our range
      for (NSInteger i=firstPage; i<=lastPage; i++) {
        [self loadPage:i];
      }

        // Purge anything after the last page
      for (NSInteger i=lastPage+1; i<self.onboardImages.count; i++) {
        [self purgePage:i];
      }
    }

    - (void)loadPage:(NSInteger)page {
      if (page < 0 || page >= self.onboardImages.count) {
        // If it's outside the range of what you have to display, then do nothing
        return;
      }

      UIView *pageView = [self.pageViews objectAtIndex:page];
      if ((NSNull*)pageView == [NSNull null]) {

        CGRect frame = self.scrollView.frame;
        frame.origin.x = frame.size.width * page;
        frame.origin.y = -20.0f; //adjust

        //UIImageView *newPageView = [[UIImageView alloc] initWithImage:[self.onboardImages objectAtIndex:page]];
        UIView *newPageView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.scrollView.frame.size.width, self.scrollView.frame.size.height)];
        UIView *currentView = [self.onboardImages objectAtIndex:page];
        [newPageView addSubview:currentView];
        currentView.center = newPageView.center;
        newPageView.contentMode = UIViewContentModeScaleAspectFit;
        newPageView.frame = frame;
        [self.scrollView addSubview:newPageView];
        [self.pageViews replaceObjectAtIndex:page withObject:newPageView];
      }
    }

//scroll view delegate method continues to load visible pages

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
      // Load the pages that are now on screen
      [self loadVisiblePages];
    }

//remove unseen pages from scroll view

    - (void)purgePage:(NSInteger)page {
      if (page < 0 || page >= self.onboardImages.count) {
        // If it's outside the range of what you have to display, then do nothing
        return;
      }

      // Remove a page from the scroll view and reset the container array
      UIView *pageView = [self.pageViews objectAtIndex:page];
      if ((NSNull*)pageView != [NSNull null]) {
        [pageView removeFromSuperview];
        [self.pageViews replaceObjectAtIndex:page withObject:[NSNull null]];
      }
    }

Any help is appreciated.

Answer 1

The order seems wrong. You are setting the currentPage and pageCount on an object that gets overwritten.

  //Set here
  self.pageControl.currentPage = 0;
  self.pageControl.numberOfPages = pageCount;

  UIPageControl *onBoardImagePageControl = [[UIPageControl alloc]init];
  onBoardImagePageControl.translatesAutoresizingMaskIntoConstraints = NO;
  onBoardImagePageControl.backgroundColor = [UIColor clearColor];

  //Overwritten here
  self.pageControl = onBoardImagePageControl;

  [self.view addSubview:self.pageControl];