Using The Page Control to Navigation The Scroll View Images

Wouldn’t it be nice to display dots at the bottom of the Third scene (see image below) letting the user know how many pages of images there are. Further, the user should be able to scroll the view by swiping the current image or a dot.

Well, to perform above mentioned tasks, you’ll have to launch the ScrollContent project you worked on last week. You’ll have to modify the third scene’s user interface and its class code.

How The Page Control Work

First of a Page Control is an instance of the UIPageControl class. You use a Page Control in an iOS application to present 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 by click the Page Control’s dots. Instead of explaing how the Page Control work, I’ll let this image do the talking.

Here are five things you should never, ever forget about the Page Control:

• Dots shown on the Page Control are called page indicators.
• The current page indicator is shown as a white dot.
• The page indicator advances only one page in either direction, regardless of the indicator the user clicked.
• The Page Control can display up to 20 page indicators (dots) on the screen before they are clipped. Why? Because of these physical factors: the device screen size, the page indicator size, and the page indicator layout.
• The Page Control’s pages are zero-index. This mean the first page’s index number is 0, the second page’s index number is 1, and so on. The current page’s index number (indicated by the white dot in above image) is 3. The last page’s index number is 11.

Modify The Third Scene Interface

So you know how the Page Control work, let’s use it on the Third View Controller Scene. The first thing I want you to do is configure the third scene to look like what’s shown in the image below. As you can see, there’s only a Scroll View on the View and it covers the its surface.

The Scroll View Control’s Images

Download the zip file shown in the left column of the table below. It contain 12 png images shown in the right column. Once you’ve unzip the file, drag-and-drop all mages in the Images.xcassets folder.

zip file to download	content of the zip file

Modify The ThirdViewController Header File

Modify the ThirdViewController.h file’s code to what’s shown below.

What you’ve done is conformed the ThirdViewController class to the UIScrollVideDelegate class, so you can use a delegate method of the UIScrollView class in the ThirdViewController.m file. You declared an IBOutlet property variable for the Page Control you’ll configure in the ThirdViewController.m file.

Modify The ThirdViewController Implementation File

From now on, you’ll be adding code in the ThirdViewController.m file so click it to load it in the Standard code editor. Now, add these methods below the prefersStatusBarHidden method.

- (void)viewDidAppear:(BOOL)animated
{
}

- (IBAction)changePage:(id)sender
{
}

#pragma mark - UIScrollviewDelegate method

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
}

Let’s go over code you’ll add in above methods.

The viewDidAppear: Method

You’ll add code in this method to perform these tasks.

• create and initialize an array imageArray with the image names you downloaded and placed in the project’s Images folder.
• set the Scroll View control’s delegate property.
• initialize the pageControl object you declared in the ThirdViewController.h file.
• configure three properties of the pageControl object.
• add the pageControl object on the View’s canvas.
• declare and initialize a counter variable called xValue for use in the for() loop.
• set the Scroll View Control’s content size using the CGSizeMake(width, height) function
• call the changePage: method

In addition to above tasks, you will add a for() loop in the viewDidAppear method to create 12 Image View objects and initialize each one with an image stored in the imageArray variable, then add all 12 Image View objects on the Scroll View control.

The changePage: Method

First of all, this method is fired every time the page indicator is clicked. Code you’ll add in the method will only update the Page Control’s page indicator when more than 50% of the previous/next page is visible in the Scroll View control, like this:

By the way, the number of page indicator’s displayed on the Page Control represents the number of images names you’ll add in the imageArray. You’ll set up that array in the viewDidAppear method. Since you’ve added 12 images in the Images.xcassets folder, 12 page indicators (dots) will be displayed on the Page Control. Take a look at the image shown in above section, How The Page Control Work to see what I mean.

The scrollViewDidScroll: Method

This is a delegate method of the UIScrollView class and it is fired every time you scroll the view. You’ll add code in the ScrollViewDidScroll method to display the previous or next page in the Scroll View control. By the way data you can display on the Scroll View control’s pages could be text or images. In our case, pages of Image Views will be displayed on the Scroll View control. Each one will contain a single image.

So far I’ve given you an overview of what code you’ll add in three methods of the ThirdViewController.m file. Here’s the code to add in each method.

- (void)viewDidAppear:(BOOL)animated
{
  NSArray *imageArray = @[[UIImage imageNamed:@"20daystobetterspelling.png"],
  [UIImage imageNamed:@"bk_screen1.png"],
  [UIImage imageNamed:@"cordless_phone.png"],
  [UIImage imageNamed:@"fatia85217.png"],
  [UIImage imageNamed:@"apple.png"],
  [UIImage imageNamed:@"img_flwr.png"],
  [UIImage imageNamed:@"orange-juice.png"],
  [UIImage imageNamed:@"statue.png"],
  [UIImage imageNamed:@"iPod.png"],
  [UIImage imageNamed:@"javascriptineasysteps.png"],
  [UIImage imageNamed:@"ipod_large"],
  [UIImage imageNamed:@"crystalball.png"]
  ];

  self.scrollView.delegate = self;

  self.pageControl = [[UIPageControl alloc] init];
  self.pageControl.frame = CGRectMake(20,392,280,37);
  self.pageControl.numberOfPages = imageArray.count;
  self.pageControl.currentPage = 0;

  [self.view addSubview:self.pageControl];

  CGFloat xValue = 0;

  for (UIImage *image in imageArray) {
    UIImageView *imageViewObject = [[UIImageView alloc] initWithFrame:CGRectMake(xValue, 0, 320, 390)];
    imageViewObject.image = image;
    [self.scrollView addSubview:imageViewObject];
    xValue += self.scrollView.frame.size.width;
  }

  [self.scrollView setContentSize:CGSizeMake(xValue, self.scrollView.bounds.size.height)];

  // This statement connect and execute the changePage: method's code
  [self.pageControl addTarget:self action:@selector(changePage:) forControlEvents:UIControlEventValueChanged];
}

- (IBAction)changePage:(id)sender
{
  [UIView beginAnimations:nil context:NULL];
  self.scrollView.contentOffset = CGPointMake(320 * self.pageControl.currentPage, 0);
  [UIView commitAnimations];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
  CGPoint offset = self.scrollView.contentOffset;
  self.pageControl.currentPage = offset.x / 320 ;
}

Run The Application

Now that you’ve added necessary code in the ThirdViewController.m file, run the application. To see the scrollViewDidScroll method in action, scroll the current image left or right by click-dragging it. Now, to see the Page Control’s changePage: method in action, click any page indicator located on the left side or right side of the current indicator. The previous or next image scroll into view and the page indicator move one page left or right.

This concludes the workshop on using the Page Control to navigate the Scroll View images.