The UIScrollView Class: Paging

In this workshop you’ll learn how to implement the Scroll View control’s paging function; which enables your app user to view screens of images or text by scrolling (panning) the view horizontally (left and right only).

Workshop Objectives

In this workshop you will modify the ThirdViewController class and scene to enable the user to view pages of images you’ve already added in the ScrollContent project. Here are screenshots of what the application will look like in the simulator.

Figure 1: Before the user pane the view	Figure 2: While the user is panning the view

Add a Third Scene on The Storyboard

Currently there are only two scenes on ScrollContent project’s storyboard. What you need to do is add a third scene on the storyboard canvas. It will show up as the third tab you see in images above. Here’s how to add a third scene and tab in the ScrollContent project.

Launch the ScrollContent project in Xcode.

Click the Main.storyboard file and rearrange the storyboard’s Tab Bar Controller and View Controllers to look like this.

Highlight all scenes then move them up to make room for the third scene. Now, drag a View Control from the Object Library and put it below the Second View Controller (see image below).

Design The Scene’s User Interface

Click the Toggle Zoom button (=), then add a Scroll View control on the scene. Make sure it cover the scene’s surface, as shown in this image. Next, tick the Scroll View’s Paging Enabled attribute.

Add an Image View control on the Scroll View. Adjust its width and height to what’s shown in the image below.

Drag a Tab Bar Item from the object Library and drop it at the bottom of the scene. In the Attribute inspector pane, change its Title attribute to Third. That’s it you are through with designing the scene and it should look like this:

Create a Segue For The Third Scene

What you need to do now is create a segue for the third scene by doing the following.

Drag the Tab Bar Controller down to the left of the the third scene, as shown in this image below. Control-click the Tab Bar Controller view controller button to the third scene (see pink arrow in image below). Release your mouse when the third scene is highlighted.

When you see this menu, select view controllers.

Now move the Tab Bar Controller scene back up so the storyboard look like this now.

Set The Third Tab Image

Add this image in the project’s Images.xcassets folder. Next, click the third scene’s Tab Bar Item. In the Attribute Inspector pane, set its Image attribute to star. The star image will show up in the third scene’s tab bar and the Tab Bar Controller scene’s tab bar.

Add a View Controller Class in The Project

I want you to add a view controller class for the third scene in the project by executing steps shown in this image.

When you get to step 3, provide options shown below for the class.

Now, associate the third scene with the ThirdViewController class via the Identity Inspector pane, as shown in this image.

Coding Time!

It is now time to add code in the ThirdViewController class files. Start using the Assistant Editor to create an outlet for the Scroll View control and the Image View control. Also, add declare an NSArray variable called imageArray. It will hold names of images you will load in the Image View control. When you’re done, the ThirdViewController.h file should look like code shown in the left column of the table below.

#import <UIKit/UIKit.h>

@interface ThirdViewController : UIViewController

@property (strong, nonatomic) IBOutlet UIScrollView *scrollView;
@property (strong, nonatomic) IBOutlet UIImageView *imageView;
@property (strong, nonatomic) NSArray *imageArray;

@end

Now, switch to the ThirdViewController.m file and add this code in the viewDidLoad: method, which declare and initialize the imageArray property variable with 12 image names.

self.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"]];

Next, add this code in the file’s viewDidAppear: method.

CGFloat xValue = 0;
// Place the current image in image object
for (UIImage *image in self.imageArray) {
  // Create and initialize an Image View control
  UIImageView *imageViewObject = [[UIImageView alloc] initWithFrame:CGRectMake(xValue, 0, 320, 431)];

  // Set the Image View control's image property
  imageViewObject.image = image;

  // Add the Image View on the Scroll View
  [self.scrollView addSubview:imageViewObject];

  // Increase the Image View canvas x coordinate
  xValue += 320;
}

// Set the Scroll View Control's content size
self.scrollView.contentSize = CGSizeMake(self.imageArray.count * 320, 431);

Finally add this method in the file, which hides the view’s status bus.

- (BOOL)prefersStatusBarHidden
{
  return YES;
}

As you can see, I’ve commented the ThirdViewController’s methods codes so you should have no problem understand them.

Run The Application

Before running the application, download this file on your Desktop. It contain images you will use in the Third Scene’s Image View control. Once you’ve unzip the file, drop all images in the ScrollContent’s Images.xcassets folder.

scrollContentImages

Now run the app and click the Third tab. Notice when you pane the view, each page snap in place, that’s because you set the Scroll View’s Paging Enabled attribute in Interface Builder. That’s it, you now know how to implement the paging function of the Scroll View control.