Changing Screens With UIPageControl

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. In this tutorial we will present the screen number at each screen.

Open Xcode and create a new Single View Application. For product name, use ChangeScreensDemo and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices, and that the Use Storyboards checkbox and Use Automatic Reference Counting checkbox are selected.

First, Let's create our User Interface. Go to ViewController.xib. Drag a Label to the main View. Resize the Label and make the Font Size larger in the Attributes Inspector. Enter "1" as the text. Drag a Page Control to the main view. Change the background of the main view to Dark grey. The main View should look like this.

Open the Assistant Editor and open ViewController.m. Ctrl + drag from the Label to the interface section to create a outlet.

Ctrl + drag from the Page Control to the interface section to create a outlet.

Also, Ctrl + drag from the Page Control to the interface section to create a action.

If the user changes the screen using the Page Controler the changeScreen IBAction method is called.


- (IBAction)changeScreen:(id)sender
  self.screenNumber.text = [NSString stringWithFormat:@"%i", ([self.pageController currentPage]+1)];

The currentPage property of the Page Control gives back the screen Number as an integer. This integer is assigned to our label.

Build and Run, and change screens using the Page Control.

You can download the source code of the ChangeScreensDemo at the ioscreator repository on github.