UIPageControl -- View's not changing on click of dots

Question

I'm using pageControl in my application. View's are not changing on click on dots but on the either end's of pageControl, when i click view's are changing. I want them to change on clicks on dot. What to do? Is there any method i need to implement?

Here's the Code

#import "ScrollingViewController.h"

@implementation ScrollingViewController
@synthesize scrollView;
@synthesize pageControl;

- (void)viewDidLoad 
{
    [super viewDidLoad];
    [self setupPage];
    pageControl =[[UIPageControl alloc] initWithFrame:CGRectMake(0,390,320,100)]; 
    pageControl.userInteractionEnabled =YES;
    pageControl.numberOfPages = 5; 
    pageControl.currentPage = 0;
    [self.pageControl setBackgroundColor:[UIColor blackColor]];
    pageControl.enabled = TRUE;
    [pageControl setHighlighted:YES];
    [pageControl addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:pageControl]; 
}


- (void)didReceiveMemoryWarning 
{
    [super didReceiveMemoryWarning];
}

- (void)viewDidUnload 
{
    [scrollView release];
    [pageControl release];
}


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


- (void)setupPage
{
    scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0,0,320,400)];
    [scrollView setContentSize:CGSizeMake(1000, 800)];
    //scrollView.contentSize = CGSizeMake(1000,800);
    scrollView.scrollsToTop = NO;
    [self.scrollView setBackgroundColor:[UIColor blackColor]];
    [scrollView setCanCancelContentTouches:NO];
    scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;
    scrollView.clipsToBounds = YES;
    scrollView.scrollEnabled = YES;
    scrollView.pagingEnabled = YES;

    NSUInteger nimages = 0;
    CGFloat cx = 0;
    for (; ; nimages++) 
    {
        NSString *imageName = [NSString stringWithFormat:@"image%d.jpg", (nimages + 1)];
        UIImage *image = [UIImage imageNamed:imageName];
        if (image == nil) 
        {
            break;
        }
        UIImageView *imageView = [[UIImageView alloc] initWithImage:image];

        CGRect rect = imageView.frame;
        rect.size.height = image.size.height;
        rect.size.width = image.size.width;
        rect.origin.x = ((scrollView.frame.size.width - image.size.width) / 2) + cx;
        rect.origin.y = ((scrollView.frame.size.height - image.size.height) / 2);

        imageView.frame = rect;

        [scrollView addSubview:imageView];
        [imageView release];

        cx += scrollView.frame.size.width;
    }

    self.pageControl.numberOfPages = nimages;
    [scrollView setContentSize:CGSizeMake(cx, [scrollView bounds].size.height)];
    scrollView.delegate = self;
    [self.view addSubview:scrollView];
}


- (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;
}



- (IBAction)changePage:(id)sender 
{
    /*
     *  Change the scroll view
     */
    CGRect frame = scrollView.frame;
    frame.origin.x = frame.size.width * pageControl.currentPage;
    frame.origin.y = 0;
    [scrollView scrollRectToVisible:frame animated:YES];
    pageControlIsChangingPage = YES;
}

@end

Solution 1

Increase the width of the page control as much as possible. Even if you keep the width of page control short enough to as many dots that it cannot hold, it can show them. But fails to receive the action.

Solution 2

Use in ScrollView.m

#pragma mark -
#pragma mark loadGalleryView

-(void) loadGalleryView{
    galleryArr = [memberDic objectForKey:@"arrKey"];

    if ([galleryArr count]%5 != 0) 
    {
        noOfPages = ([galleryArr count]/5)+1;
    }
    else 
    {
        noOfPages = [galleryArr count]/5;
    }


    viewControllers = [[NSMutableArray alloc] init];
    for (int i=0; i<noOfPages; i++) 
    {
        [viewControllers addObject:[NSNull null]];
    }

    [galleryScrollView setPagingEnabled:TRUE];

    [galleryScrollView setContentSize:CGSizeMake(self.view.frame.size.width* noOfPages,69.0f)];
    [galleryScrollView setShowsHorizontalScrollIndicator:FALSE];
    [galleryScrollView setShowsVerticalScrollIndicator:FALSE];
    [galleryScrollView setScrollsToTop:FALSE];
    [galleryScrollView setDelegate:self];

    [pageControl setNumberOfPages:noOfPages];
    [pageControl setCurrentPage:0];

    [self loadScrollViewWithPage:0];
    [self loadScrollViewWithPage:1];
}

//-----------------Load scroll View----------------------------------

-(void) loadScrollViewWithPage:(int) page{
    if (page < 0) 
    {
        return;
    }

    if (page >= noOfPages) 
    {
        return;
    }

    GalleryViewController *givc = [viewControllers objectAtIndex:page];
    if ((NSNull *)givc == [NSNull null]) 
    {
        givc = [[GalleryViewController alloc] initWithPageNumber:page];
        givc.imageArr = [galleryArr retain];
        [viewControllers replaceObjectAtIndex:page withObject:givc];
        [givc release];
    }

    if (nil == givc.view.superview) 
    {
        CGRect frame = self.view.frame;

        frame.origin.x = frame.size.width * page;
        frame.origin.y = 0.0f;
        givc.view.frame = frame;
        [galleryScrollView addSubview:givc.view];
    }
}

- (void)scrollViewDidScroll:(UIScrollView *)sender {
    // We don't want a "feedback loop" between the UIPageControl and the scroll delegate in
    // which a scroll event generated from the user hitting the page control triggers updates from
    // the delegate method. We use a boolean to disable the delegate logic when the page control is used.
    // Switch the indicator when more than 50% of the previous/next page is visible
    CGFloat pageWidth = galleryScrollView.frame.size.width;
    int page = floor((galleryScrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    pageControl.currentPage = page;

    // load the visible page and the page on either side of it (to avoid flashes when the user starts scrolling)
    [self loadScrollViewWithPage:page - 1];
    [self loadScrollViewWithPage:page];
    [self loadScrollViewWithPage:page + 1];

    // A possible optimization would be to unload the views+controllers which are no longer visible
}

// At the end of scroll animation, reset the boolean used when scrolls originate from the UIPageControl

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    isPageControlUsed = NO;
}

Use in GalleryView .m

- (void)viewDidLoad {
    [super viewDidLoad];

    float x = 7.0f;

    for (int i = (pageNumber*5); i<(pageNumber+1)*5; i++) 
    {
        if (i<[imageArr count]) 
        {
            NSString *url = [imageArr objectAtIndex:i];

            MyImageView *imgView = [[MyImageView alloc] initWithFrame:CGRectMake(x, 7.5f, 55.0f, 55.0f)];
            [imgView addImageFrom:url];
            [self.view addSubview:imgView];
            [imgView release];

            x = x+62.5f;
        }

    }

}

-(id)initWithPageNumber:(int) page{
    if (self = [super initWithNibName:@"GalleryViewController" bundle:nil]) 
    {
        pageNumber = page;
    }
    return self;
}

Comments

[Pål Brattberg]

Show us some code please

[sam]

width of the pageControl is big enough.though its not working?

[Admin]

If you have width of page control in xib showing 2 dots and if in the program you have set its numberOfPages to 10, then this problem will arise. Width of the page control in the application showing x number of dots should be same as the width of the page control in the xib file showing x number of dots.

[sam]

I have changed width but didn't worked. I have displayed my code above ,can u help me with that?

[Admin]

I tried your code only with page control. I set number of pages to 7. When i clicked on dots 2 and 3, it didn't respond. I clicked on dot 4 and it responded and kept on clicking it until i reached last dot i.e. 7. Now when i click on dot 2 and 3, it responds !! Same goes for the reverse case. It shows that dots 2 and 3 actually respond. But they don't in some cases. Looks to me as if apple has provided us this.