How to Use UIPageControl To Add Walkthrough Introduction Screens in iPhone App

It is no secret that an interactive UI is an important factor for iPhone app development. And in order to develop an interactive UI, developer must use the set of useful design widgets, controllers, etc to make an eye-catching app design. And since we get a lot of requests from our blog subscribers as well as few clients from Florida and Chicago, we’ve decided to share the implementation process that our expert team follow for each of the iPhone app development basics with demonstration.

In today’s iOS app tutorial, we’ll be building a sample app to share the UIPageControl implementation process.

Let’s Get Started

Create a new project under file menu in XCode.

create new project

Select Single View Application in the next tab.

name of application

Modify the project details.

modify project details

Once you create a new project, Go to Main.Storyboard and select ViewController.

select ViewController

Now drag and drop UIScrollView and UIPageControl from “Show the object library” section.

Set auto layout to scrollview and pagecontrol.

Set auto layout

Now set outlet of UIScrollView and UIPageControl ViewController.swift

@IBOutlet weak var pageControl: UIPageControl!

@IBOutlet weak var scrView: UIScrollView!



Declare an array of image string.

var arrImages : [UIImage] = []

Create a method to manage scroll and page control and call it from viewDidLoad()

override func viewDidLoad() {
        arrImages = [UIImage(named: "1.jpg"), UIImage(named: "2.jpg"), UIImage(named: "3.jpg")] as! [UIImage]
    override func viewDidLayoutSubviews() {
    func loadScrollView() {
        let pageCount = arrImages.count
        scrView.frame = view.bounds
        scrView.delegate = self
        scrView.backgroundColor = UIColor.clear
        scrView.isPagingEnabled = true
        scrView.showsHorizontalScrollIndicator = true
        scrView.showsVerticalScrollIndicator = false
        pageControl.numberOfPages = pageCount
        pageControl.currentPage = 0
        for i in (0..<pageCount) {
            let imageView = UIImageView()
            imageView.frame = CGRect(x: i * Int(self.view.frame.size.width) , y: 200 , width:
                Int(self.view.frame.size.width) , height: 300)
            imageView.image = arrImages[i]
        let width1 = (Float(arrImages.count) * Float(self.view.frame.size.width))
        scrView.contentSize = CGSize(width: CGFloat(width1), height: self.view.frame.size.height)
        self.pageControl.addTarget(self, action: #selector(self.pageChanged(sender:)), for: UIControl.Event.valueChanged)


Add delegate method of UIScrollView for mange page control.

//MARK: UIScrollViewDelegate
    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
        let pageNumber = round(scrollView.contentOffset.x / scrollView.frame.size.width)
        pageControl.currentPage = Int(pageNumber)

Create a method for click event on Page control.

@objc func pageChanged(sender:AnyObject)
        let xVal = CGFloat(pageControl.currentPage) * scrView.frame.size.width
        scrView.setContentOffset(CGPoint(x: xVal, y: 0), animated: true)

And we’re done!

Let’s see the output.

So now that you know the process for UIPageControl, go ahead and implement it. Though, remember that only a flawless UI design is what contributes to any mobile app success. So if you’re not an experienced developer, don’t do everything yourself. First learn, consult with other experienced developers, or hire iphone app developer to make sure your mobile app design as well as development is flawless.

Grab a free copy of iOS PageControl Tutorial demo from Github.

This page was last edited on February 11th, 2019, at 7:15.

Have an iOS App Idea in Mind? Let's Discuss!

Get your free consultation now