How do I use UIPageControl to create multiple views?

Question

I need to use UIPagecontrol for my application, and I'm not sure how to get started. I'm a beginner, and the examples that apple gives me are pretty complicated. All I need are 3 pages with different views for each of them.

Below there is an accepted answer that is unfortunately rather link-only. I will [add the link here](http://cocoawithlove.com/2009/01/multiple-virtual-pages-in-uiscrollview.html) in case the answer is deleted. — halfer, Dec 18 '18 at 22:20

score 22 · Answer 1 · answered Nov 29 '09 at 18:36

22

You'll want to use a UIScrollView, and then, as a sibling, position the UIPageControl over it. Then put each of your pages into the scroll view and turn paging on for it. This way each 'flick' will move the scroll view one page over.

Now, assign your view controller to be the delegate of the scroll view, and watch for scrollViewDidEndScrollAnimation, and use the contentOffset to determine which page is current.

answered Nov 29 '09 at 18:36

Ben Gottlieb

85,404
22
176
172

4

wow that seems kind of complicated. do you have a tutorial to do this or a sample code so i can see how it looks like? – lab12 Nov 29 '09 at 18:53

score 15 · Answer 2 · answered Sep 14 '11 at 12:36

Based on Ben Gottlieb's quite excellently correct answer there, I got what I wanted. Here's the code I used to accomplish it:

.h

@interface MyViewController : UIViewController <UIScrollViewDelegate> {
}
@property (nonatomic, retain) UIPageControl *helpPageCon;

.m

@synthesize helpPageCon;

- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
    CGRect frame = [[UIScreen mainScreen] applicationFrame];
    float roundedValue = round(scrollView.contentOffset.x / frame.size.width);
    self.helpPageCon.currentPage = roundedValue;    
}

- (void)viewDidLoad
{
    UIScrollView *scrollView = [[[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, frame.size.height-50)] autorelease];
    scrollView.contentSize = CGSizeMake(frame.size.width*5, frame.size.height-50);
    [scrollView setPagingEnabled:YES];
    scrollView.showsHorizontalScrollIndicator = NO;
    scrollView.delegate = self;
    [self.view addSubview:scrollView];

    CGRect frame = [[UIScreen mainScreen] applicationFrame];
    self.helpPageCon = [[[UIPageControl alloc] initWithFrame:CGRectMake(0, 0, frame.size.width, 50)] autorelease];
    self.helpPageCon.center = CGPointMake(frame.size.width/2, frame.size.height-75);
    self.helpPageCon.numberOfPages = 5;
    [self.view addSubview:self.helpPageCon];
}
- (void)dealloc
{
    [super dealloc];
    [helpPageCon release];
}

vignesh kumar · Answer 3 · 2016-02-10T05:34:16.343

Just add 3 views to the Scroll view Horizontally one after other with paging enabled in scrollview and add a UIPageControl control below the scrollView , And with the help of both delegate methods of scrollview and the Action method of pageview you can achieve basic working of UIPageControl

I used the contentoffset to find the current page

 // scrollview delegate

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {

    CGFloat pageWidth = mainScroll.frame.size.width;
    int page = floor((mainScroll.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    pageControl.currentPage=page;

  }

    // page view action method

  - (IBAction)pageControlInteracted:(UIPageControl *)sender {
      NSLog(@"%d",sender.currentPage);
      CGRect frame = mainScroll.frame;
      frame.origin.x = frame.size.width * sender.currentPage;
      frame.origin.y = 0;
      [mainScroll scrollRectToVisible:frame animated:YES];

   }

score 1 · Answer 4 · edited May 23 '17 at 12:31

1

See my answer here: Is UIPageControl Useless By Itself?

for a reusable class encapsulating the UIPageControl and UIScrollView.

edited May 23 '17 at 12:31

Community

1
1

answered Oct 25 '10 at 12:11

Werner Altewischer

10,080
4
53
60

Hi, looks like you did a very good job creating this class. I'm a beginner and I cant quite wrap my head around how you go about telling it which UIviews are to be included(I have laid them out in IB.) – Hippocrates Mar 03 '11 at 22:38
You'll have to implement the PagedViewDelegate just in the same way you would implement a UITableViewDelegate. The method cellForRowAtIndexPath is now replaced by viewForPageAtIndex. You could implement it with a switch statement and load the view from the appropriate nib using [[NSBundle mainBundle] loadNibNamed: owner:nil] – Werner Altewischer Mar 06 '11 at 20:25

How do I use UIPageControl to create multiple views?

4 Answers4

Linked