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.

Author Bio
Hitesh Trivedi
Hitesh Trivedi
Designation: iOS Team Lead

Hitesh Trivedi is an iOS Team Lead at Space-O Technologies. He has over 10 years of experience in iOS app development. He has guided to develop over 100 iPhone apps with unique features and functionalities. He has special expertise in Swift and Objective-C.