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.


Select Single View Application in the next tab.


Modify the project details.


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


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

Set auto layout to scrollview and pagecontrol.


Now set outlet of UIScrollView and UIPageControl ViewController.swift

@IBOutlet weak var pageControl: UIPageControl!

@IBOutlet weak var scrMain: UIScrollView!



Declare an array of image string.

let arrImages = ["1.jpeg", "2.jpeg", "3.jpeg"]

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

override func viewDidLoad() {
// Do any additional setup after loading the view, typically from a nib.

func loadScrollView() {
let pageCount : CGFloat = CGFloat(arrImages.count)

scrMain.backgroundColor = UIColor.clearColor()
scrMain.delegate = self
scrMain.pagingEnabled = true
scrMain.contentSize = CGSizeMake(scrMain.frame.size.width * pageCount, scrMain.frame.size.height)
scrMain.showsHorizontalScrollIndicator = false

pageControl.numberOfPages = Int(pageCount)
pageControl.addTarget(self, action: #selector(self.pageChanged), forControlEvents: .ValueChanged)

for i in 0..<Int(pageCount) {
let image = UIImageView(frame: CGRectMake(self.scrMain.frame.size.width * CGFloat(i), 0, self.scrMain.frame.size.width, self.scrMain.frame.size.height))
image.image = UIImage(named: arrImages[i])!
image.contentMode = UIViewContentMode.ScaleAspectFit

Add delegate method of UIScrollView for mange page control.

//MARK: UIScrollView Delegate
func scrollViewDidScroll(scrollView: UIScrollView) {
let viewWidth: CGFloat = scrollView.frame.size.width
// content offset - tells by how much the scroll view has scrolled.
let pageNumber = floor((scrollView.contentOffset.x - viewWidth / 50) / viewWidth) + 1
pageControl.currentPage = Int(pageNumber)

Create a method for click event on Page control.

//MARK: Page tap action
func pageChanged() {
let pageNumber = pageControl.currentPage
var frame = scrMain.frame
frame.origin.x = frame.size.width * CGFloat(pageNumber)
frame.origin.y = 0
scrMain.scrollRectToVisible(frame, 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 July 16th, 2018, at 8:45.

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

Get your free consultation now