How do I use UIPageControl in my app?

Question

I am making an app where I need some images can be scrolled through using a UIPageControl. Sadly, I don't know how to use a UIPageControl, or a UIScrollView either. A link to a YouTube video or Xcode documentation by Apple would be much appreciated!

Thanks in advance!!

Answer 1

This is a very good tutorial by the Ray Wenderlich team on how to set up a paging scrollview: How To Use UIScrollView to Scroll and Zoom Content

Apple's documentation also has an example of how to implement a paging scroll view: PhotoScroller

My answer to this previous question may also be useful to you.

Answer 2

ScrollView:

ScrollView is used to display the more number views/Objects. We can display those views by horizontal or vertical scrolling. You can handle zooming, panning, scrolling etc.

You can go through some of these tutorials Are there any good UIScrollView Tutorials on the net?

https://developer.apple.com/library/ios/documentation/windowsviews/conceptual/UIScrollView_pg/CreatingBasicScrollViews/CreatingBasicScrollViews.html

Example Code for Scrollview:

UIScrollView *scroll = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0,self.view.frame.size.width, self.view.frame.size.height)];
//This will create a scrollview of device screen frame

You can enable the scrolling by

    scroll.scrollEnabled = YES;

Example for adding 3 views to scrollview

 NSInteger numberOfViews = 3;
 for (int i = 0; i < numberOfViews; i++) {
      CGFloat xOrigin = i * self.view.frame.size.width;
      UIView *awesomeView = [[UIView alloc] initWithFrame:CGRectMake(xOrigin, 0, self.view.frame.size.width, self.view.frame.size.height)];
      awesomeView.backgroundColor = [UIColor colorWithRed:0.5/i green:0.5 blue:0.5 alpha:1];
      [scroll addSubview:awesomeView];
      [awesomeView release];
 }
 // 3 views added horizontally to the scrollview by using xOrigin.

The most important part in this for is to understand the xOrigin. This will place every UIView exactly where the previous UIView has stopped, in other words, each UIView will start at the end of the previous one. Now we got the scrollview with 3 views added horrizontally.

Set the UIScrollView contentSize

scroll.contentSize = CGSizeMake(self.view.frame.size.width * numberOfViews, self.view.frame.size.height);

The contentSize is just the sum of the widths of the three UIViews, if the width of each UIView is 320, and we have three UIViews, your contentSize width will be 920.

[self.view addSubview:scroll];
[scroll release];
//Add scrollview to viewcontroller

Page Control: A Page control presents the user with a set of horizontal dots representing pages. The current page is presented as a white dot. The user can go from the current page to the next or to the previous page.

To enable paging you need to add

scroll.pagingEnabled = YES;
 pageControl = [[UIPageControl alloc] init]; //SET a property of UIPageControl
pageControl.frame = CGRectMake(100,self.view.frame.size.height-100,self.view.frame.size.width-200,100); 
pageControl.numberOfPages = 3; //as we added 3 diff views 
pageControl.currentPage = 0; 

Add delegate method of scrollview to implement the pagecontrol dots while scrolling

  - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
          CGFloat pageWidth = self.scrollView.frame.size.width;
          int page = floor((self.scrollView.contentOffset.x – pageWidth / 2 ) / pageWidth) + 1; //this provide you the page number
          pageControl.currentPage = page;// this displays the white dot as current page
   }

Now you can see pagecontrol for scrollview. Hope you understand. Refer this too https://developer.apple.com/library/ios/documentation/uikit/reference/UIPageControl_Class/Reference/Reference.html

Answer 3

here is a code which will help you

 CGSize size = [[UIScreen mainScreen] bounds].size;
 CGFloat frameX = size.width;
 CGFloat frameY = size.height-30; //padding for UIpageControl

 UIScrollView  *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(offsetX, offsetY, frameX, frameY)];
 scrollView.pagingEnabled = YES;

scrollView.backgroundColor = [UIColor clearColor];
scrollView.contentSize = CGSizeMake(frameX, frameY);


[self.view addSubview: scrollView];

// let say you have array of image in imageArray

for(int i = 0; i < [imageArray]; i++)
{
   UIImage *image = [UIImage imageNamed:[imageArray objectAtIndex:i]];
   imageView = [[UIImageView alloc] initWithImage:image];
   imageView.frame = CGRectMake(frameX * i, 0.0, frameX, frameY);
   [scrollView addSubview:imageView];
}

scrollView.contentSize = CGSizeMake(frameX*[imageArray count], frameY); 

please declare the variables according to scope of use. i have declared all the variables locally so that might not get confuse and also add the UIPageControl at the bottom of your viewcontroller

Implement the delegate method of UIScrollView to the current Page indicator

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
  {
     float width = scrollView.frame.size.width;
     float xPos = scrollView.contentOffset.x+10;

     //Calculate the page we are on based on x coordinate position and width of scroll view
     pageControl.currentPage = (int)xPos/width;   
  }

where pageControl is UIPageControl added on bottom your viewcontroller