UIPageControl bug: showing one bullet first and then showing everything

Question

I have some strange behavior using a UIPageControl:

First it appears showing only one bullet, then when I move the scroll view all the bullets appear correctly. Is there something I'm missing before I add it as a subview?

Here is my code imageScrollView.h :

@interface ImageScrollView : UIView <UIScrollViewDelegate> {
  NSMutableDictionary *photos;
  BOOL *pageControlIsChangingPage;
  UIPageControl *pageControl;
}
@property (nonatomic, copy) NSMutableDictionary *photos; 
@property (nonatomic, copy) UIPageControl *pageControl; 
@end

Here is the code for imageScrollView.m:

#import "ImageScrollView.h"


@implementation ImageScrollView
@synthesize photos, pageControl;

- (id)initWithFrame:(CGRect)frame {
    if ((self = [super initWithFrame:frame])) {
    // Initialization code
    }
    return self;
}

- (void) drawRect:(CGRect)rect
{
  [self removeAllSubviews];

  UIScrollView *scroller = [[UIScrollView alloc]      initWithFrame:CGRectMake(0,0,self.frame.size.width,self.frame.size.height)];
  [scroller setDelegate:self];

  [scroller setBackgroundColor:[UIColor grayColor]];

  [scroller setShowsHorizontalScrollIndicator:NO];
  [scroller setPagingEnabled:YES];

  NSUInteger nimages = 0;
  CGFloat cx= 0;

  for (NSDictionary *myDictionaryObject in photos)
  {
    if (![myDictionaryObject isKindOfClass:[NSNull class]]) {
    NSString *photo =[NSString stringWithFormat:@"http://www.techbase.com.mx/blog/%@",[myDictionaryObject objectForKey:@"filepath"]];
    NSDictionary *data = [myDictionaryObject objectForKey:@"data"];

    UIView *imageContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height - 30)];

    TTImageView *imageView = [[TTImageView alloc] initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height - 30)];
    imageView.urlPath=photo;
    [imageContainer addSubview:imageView];

    UILabel *caption = [[UILabel alloc] initWithFrame:CGRectMake(0,imageView.frame.size.height,imageView.frame.size.width,10)];

    [caption setText:[NSString stringWithFormat:@"%@",[data objectForKey:@"description"]]];
    [caption setBackgroundColor:[UIColor grayColor]];
    [caption setTextColor:[UIColor whiteColor]];
    [caption setLineBreakMode:UILineBreakModeWordWrap];
    [caption setNumberOfLines:0];
    [caption sizeToFit];
    [caption setFont:[UIFont fontWithName:@"Georgia" size:10.0]];
    [imageContainer addSubview:caption];

    CGRect rect = imageContainer.frame;
    rect.size.height = imageContainer.size.height;
    rect.size.width = imageContainer.size.width;
    rect.origin.x = ((scroller.frame.size.width - scroller.size.width) / 2) + cx;
    rect.origin.y = ((scroller.frame.size.height - scroller.size.height) / 2);
    imageContainer.frame=rect;
    [scroller addSubview:imageContainer];
    [imageView release];
    [imageContainer release];
    [caption release];

    nimages++;
    cx +=scroller.frame.size.width;

    }

  }

  [scroller setContentSize:CGSizeMake(nimages * self.frame.size.width, self.frame.size.height)];
  [self addSubview:scroller];
  pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(self.frame.size.width/2,  self.frame.size.height -20, (self.frame.size.width/nimages)/2, 20)];
  pageControl.numberOfPages=nimages;
  [self addSubview:pageControl];

  [scroller release];

  }

  -(void)dealloc {
    [pageControl release];
    [super dealloc];
  }


   -(void)scrollViewDidScroll:(UIScrollView *)_scrollView{
     if(pageControlIsChangingPage){
     return;
   }
   CGFloat pageWidth = _scrollView.frame.size.width;
   int page = floor((_scrollView.contentOffset.x - pageWidth /2) / pageWidth) + 1;
   pageControl.currentPage = page; 
   }

  -(void)scrollViewDidEndDecelerating:(UIScrollView *)_scrollView{
 pageControlIsChangingPage  = NO;
}

@end

Answer 1

Since you're drawing the UIPageControl in the drawRect method, you need to call the setNeedsLayout method of this control after you initialize it. Otherwise it won't render itself properly until an event that forces this redrawing is called.

pageControl = [[UIPageControl alloc] initWithFrame:CGRectMake(self.frame.size.width/2,  self.frame.size.height -20, (self.frame.size.width/nimages)/2, 20)];
pageControl.numberOfPages=nimages;
[pageControl setNeedsLayout];
[self addSubview:pageControl];

Answer 2

Have you found a solution yet? I have the same problem. Also a pageControl allocated in DrawRect. The suggested calling of setNeedsLayout doesn't solve this issue.