How do I add views to an UIScrollView and keep it synchronized with a UIPageControl?

Question

I need to dynamically create some views in my app and place some buttons on them dynamically again. If the amount (count) of the buttons is more then ten I want to place the buttons on a new view and the transitions between the views must be with UIPageControl. Even though I googled and searched from Apple's Developer page I couldn't find a way of solving my problem. Can someone please help?

Answer 1

Add your views as side-by-side subviews of an UIScrollView, using the addSubview method. Then use the UIPageControl with the UIScrollView, as in this example.

---

I made a class that manages a UIScrollView, a UIPageControl, and an array of UIViews. It is a simplified version of what I use in my own code. It does the following:

• Sets up the scroll view to display an array of UIViews. It doesn't care if the views have been generated dynamically or not.
• Handles scroll and page control events.
• Synchronizes the scroll view with the page control.

---

PageViewManager.h

#import <Foundation/Foundation.h>

@interface PageViewManager : NSObject <UIScrollViewDelegate>
{
    UIScrollView* scrollView_;
    UIPageControl* pageControl_;
    NSArray* pages_;
    BOOL pageControlUsed_;
    NSInteger pageIndex_;
}

- (id)initWithScrollView:(UIScrollView*)scrollView
             pageControl:(UIPageControl*)pageControl;
- (void)loadPages:(NSArray*)pages;
- (void)loadControllerViews:(NSArray*)pageControllers;

@end

---

PageViewManager.m

#import "PageViewManager.h"

@interface PageViewManager ()

- (void)pageControlChanged;

@end

@implementation PageViewManager

- (id)initWithScrollView:(UIScrollView*)scrollView
             pageControl:(UIPageControl*)pageControl
{
    self = [super init];
    if (self)
    {
        scrollView_ = scrollView;
        pageControl_ = pageControl;
        pageControlUsed_ = NO;
        pageIndex_ = 0;

        [pageControl_ addTarget:self action:@selector(pageControlChanged)
               forControlEvents:UIControlEventValueChanged];
    }
    return self;
}

/*  Setup the PageViewManager with an array of UIViews. */
- (void)loadPages:(NSArray*)pages
{
    pages_ = pages;
    scrollView_.delegate = self;
    pageControl_.numberOfPages = [pages count];

    CGFloat pageWidth  = scrollView_.frame.size.width;
    CGFloat pageHeight = scrollView_.frame.size.height;

    scrollView_.pagingEnabled = YES;
    scrollView_.contentSize = CGSizeMake(pageWidth*[pages_ count], pageHeight);
    scrollView_.scrollsToTop = NO;
    scrollView_.delaysContentTouches = NO;

    [pages_ enumerateObjectsUsingBlock:^(id obj, NSUInteger index, BOOL *stop)
    {
        UIView* page = obj;
        page.frame = CGRectMake(pageWidth * index, 0,
                                pageWidth, pageHeight);
        [scrollView_ addSubview:page];
    }];
}

/*  Setup the PageViewManager with an array of UIViewControllers. */
- (void)loadControllerViews:(NSArray*)pageControllers
{
    NSMutableArray* pages = [NSMutableArray arrayWithCapacity:
                             pageControllers.count];
    [pageControllers enumerateObjectsUsingBlock:
        ^(id obj, NSUInteger idx, BOOL *stop)
        {
            UIViewController* controller = obj;
            [pages addObject:controller.view];
        }];

    [self loadPages:pages];
}

- (void)pageControlChanged
{
    pageIndex_ = pageControl_.currentPage;

    // Set the boolean used when scrolls originate from the page control.
    pageControlUsed_ = YES;

    // Update the scroll view to the appropriate page
    CGFloat pageWidth  = scrollView_.frame.size.width;
    CGFloat pageHeight = scrollView_.frame.size.height;
    CGRect rect = CGRectMake(pageWidth * pageIndex_, 0, pageWidth, pageHeight);
    [scrollView_ scrollRectToVisible:rect animated:YES];
}

- (void)scrollViewDidScroll:(UIScrollView*)sender
{
    // If the scroll was initiated from the page control, do nothing.
    if (!pageControlUsed_)
    {
        /*  Switch the page control when more than 50% of the previous/next
            page is visible. */
        CGFloat pageWidth = scrollView_.frame.size.width;
        CGFloat xOffset = scrollView_.contentOffset.x;
        int index = floor((xOffset - pageWidth/2) / pageWidth) + 1;
        if (index != pageIndex_)
        {
            pageIndex_ = index;
            pageControl_.currentPage = index;
        }
    }
}

- (void)scrollViewWillBeginDragging:(UIScrollView*)scrollView
{
    pageControlUsed_ = NO;
}

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

@end

---

To use this class, you embed it inside a UIViewController than contains the UIScrollView and the UIPageControl.

Usage:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    // Create some views dynamically
    UIView* v1 = ...
    UIView* v2 = ...

    // Put the views inside an NSArray:
    NSArray* pages_ = [NSArray arrayWithObjects:v1, v2, nil];

    /* Create the PageViewManager, which is a member (or property) of this
       UIViewController. The UIScrollView and UIPageControl belong to this 
       UIViewController, but we're letting the PageViewManager manage them for us. */
    pageViewManager_ = [[PageViewManager alloc]
                        initWithScrollView:self.scrollView
                               pageControl:self.pageControl];

    // Make the PageViewManager display our array of UIViews on the UIScrollView.
    [pageViewManager_ loadViews:pages_];
}

My sample code assumes that you're using ARC.