How to combine UIScrollview with UIPagecontrol to show different views?

Question

I've searched and searched for a tutorial for this but none of them are what I'm looking for. I've tried Apple's sample but it is just colors and I don't know how to make it views. All I'm looking for is a screen that will page while showing the page control. Each time the scroll view pages i want it to show a completely different view with buttons, a lot like the home screen of the iPhone. I found the sample code below which works very well with just images, but I'd like to modify to work with separate views. Please Help! Thank you.

- (void)setupPage {
    scrollView.delegate = self;

    [self.scrollView setBackgroundColor:[UIColor clearColor]];
    [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)];
}

Answer 1

I was experimenting with this just the other day. I'm still getting used to using a UIScrollView but here's how you can add views to your UIScrollView:

UIView *blueView = [[UIView alloc] init];
blueView.frame = CGRectMake(100, 0, 500, 1024);
blueView.backgroundColor = [UIColor colorWithRed:164.0/256 green:176.0/256 blue:224.0/256 alpha:1];
[scrollView addSubview:blueView];
[blueView release];

UIView *orangeView = [[UIView alloc] init];
orangeView.frame = CGRectMake(700, 0, 500, 1024);
orangeView.backgroundColor = [UIColor colorWithRed:252.0/256 green:196.0/256 blue:131.1/256 alpha:1];
[scrollView addSubview:orangeView];
[orangeView release];

Notice that I'm setting the x value in frame.origin of each view so that they're sitting adjacent to each other. You also have to set the content size of the UIScrollView with something like [scrollView setContentSize:CGSizeMake(1200, 1024)]; so that it knows how big its subviews are.

Then, if you need to control a UIPageControl, you would set its numberOfPages to 2 (for the example scrollview above) and change its currentPage property. You could do this by implementing scrollViewDidEndDecelerating:, which is a method in the UIScrollViewDelegate. You could check which "page" the scrollview is at by checking its contentOffset.x value.

Hope this helps!

Answer 2

Here's the Apple PageControl code with images. To use, just drag your images to the project. The default images are image1.jpg, image2.jpg, etc. If you need png, just change the extension to .png.

Then replace the MyViewController.m code with this code, and you've got pagecontrol with Images.

Cheers, Jordan

http://pastebin.com/raw.php?i=c3hS29sC

Answer 3

// Adding UIView to PageControl example

  - (id)initWithPageNumber:(int)page {
        UIScreen *screen = [UIScreen mainScreen];
        CGRect frame = [screen applicationFrame];
        frame.origin.y=0;

        if (self = [super initWithNibName:@"MyView" bundle:nil]) {      
                UIView *view = [[UIView alloc] initWithFrame:frame];

                [self.view addSubview:view];

                            // Add whatever you want to the view here.
                [view release];
            pageNumber = page;
        }
        return self;
    }

Answer 4

Here's another answer...

NSArray* nibViews =  [[NSBundle mainBundle] loadNibNamed:@"Views" owner:self options:nil];
infoView = [nibViews objectAtIndex:0];
[self.view addSubview:infoView];

Then you have your view.

Cheers