iOS UIPageControl With Examples [Latest]

UIPageControl

UIPageControl is inherited from UIControl. A UIPageControl displays horizontal dots with each dot corresponding to a different Page in the ViewController.

For example, a UIPageControl is used to browse through different screens of a Food Menu.

A UIPageViewController is used to browse through different pages where each page is a Child View Controller.

Following are some of the properties and helper functions of the UIPageControl class.

• currentPage : The current page that is highlighted in the UIPageControl. This returns the index of the page.
• numberOfPages : The number of pages displayed(equal to the number of dots).
• hidesForSinglePage : A Boolean value to toggle the visibility of the PageControl on the current page.
• pageIndicatorTintColor : The tint color that’s shown on the current page.
• currentPageIndicatorTintColor : The tint color to be used for the current page indicator.
• defersCurrentPageDisplay : A Bool value that controls when the current page is displayed.
• updateCurrentPageDisplay() : Updates the page indicator property to the current page.

When a user taps on the left of the UIPageControl, the user is taken to the previous page.
When the user taps on the right of the UIPageControl, the user is taken to the next page.

We can detect the clicks by creating an IBAction function from the Interface Builder or using Selectors and Targets programmatically. We’ll stick with the former way in this tutorial.

The valueChanged event gets triggered whenever you click on the left/right of the UIPageControl.

In the following section, we’ll be creating a Simple iOS Application in which the Label text and the background of the UIPageControl change when you change the page.

Creating a UIPageControl programmatically

let pageControl = UIPageControl()
        pageControl.frame = CGRect(x: 100, y: 100, width: 300, height: 300)
        pageControl.numberOfPages = 2;
        pageControl.currentPage = 0;
        view.addSubview(pageControl)

Project Storyboard

You can set the attributes in the right-hand side attributes inspector also.

In the above storyboard,

• We have set the UIPageControl constraints to the screen width.
• Added a UILabel at the top.
• Ctrl + Drag the UIPageControl to create an Outlet in the ViewController
• Ctrl + Drag the UIPageControl to create an IBAction in the ViewController. This gets called whenever we click on the UIPageControl.
• Ctrl + Drag the UILabel to create an IBOutlet in the ViewController.

The code for the ViewController.swift looks like this:

import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var myLabel: UILabel!
    @IBOutlet weak var myPageControl: UIPageControl!
    @IBAction func changePage(_ sender: UIPageControl) {
        myLabel.text = "Page (sender.currentPage + 1)"
        switch sender.currentPage {
        case 0:
            sender.backgroundColor = UIColor.black
        case 1:
            sender.backgroundColor = UIColor.gray
        case 2:
            sender.backgroundColor = UIColor.orange
        default:
            sender.backgroundColor = UIColor.brown
        }
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        myPageControl.numberOfPages = 4
        myPageControl.pageIndicatorTintColor = UIColor.yellow
        myPageControl.currentPageIndicatorTintColor = UIColor.blue
    }
}

We’ve set the number of pages and the colors on the UIPageControl programmatically.
Every time the UIPageControl is clicked and the valueChanged event is triggered, the label and the UIPageControl backgroundColor is changed.

The output of the above application in action is given below:

That brings an end to this tutorial. You can download the project from the link below.