Custom UIPagecontrol

UIPageControl is a control that displays a horizontal series of dots, each of which corresponds to a page in the app’s document or other data-model entity. The default UIPageControl only shows page indicators as white circles with different opacities. We need to add a custom protocol to connect an UIPage Control with an UIPageViewController. It is a little tricky and I will share the step-by-step instructions here!

We need to declare the required properties to configure and function the Page-Control.

the number of dots: A Private property of type [UIView], to hold all the rounded views(I call them Dots) which represent the number of pages it contains.
the number of pages: The value of the property is the number of pages for the page control to show as dots.
pageIndicatorTintColor: To hold the color value for the dots.
currentPageIndicatorTintColor : To hold the colour value for the selected dots.
current Page: The current page that is highlighted in the UIPageControl. This returns the index of the page.

Implementation of UIPageControl in swift:

Let’s start our tutorial on creating custom page control or UIPageControl in swift language. Create a new project with a single view application template, name it UIPageViewController-swift. Next, open Main.storyboard and drop UIpagecontrol onto the view.

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.

Every time the UIPage Control is clicked and the Value Changed event is triggered, the UIPage Control backgroundColor is changed.


import UIKit

class ViewController: UIViewController, UIPageViewControllerDataSource, UIPageViewControllerDelegate {

    @IBOutlet weak var pageControl: UIPageControl!
    var pageContainer: UIPageViewController!
    var pages = [UIViewController]()
    var currentIndex: Int?
    private var pendingIndex: Int?
    override func viewDidLoad() {
        super.viewDidLoad()
        let storyboard = UIStoryboard(name: "Main", bundle: nil)
        let page1: UIViewController! = storyboard.instantiateViewController(withIdentifier: "page1")
        let page2: UIViewController! = storyboard.instantiateViewController(withIdentifier: "page2")
        let page3: UIViewController! = storyboard.instantiateViewController(withIdentifier: "page3")
        pages.append(page1)
        pages.append(page2)
        pages.append(page3)
        pageContainer = UIPageViewController(transitionStyle: .scroll, navigationOrientation: .horizontal, options: nil)
        pageContainer.delegate = self
        pageContainer.dataSource = self
        pageContainer.setViewControllers([page1], direction: UIPageViewController.NavigationDirection.forward, animated: false, completion: nil)
        view.addSubview(pageContainer.view)
        view.bringSubviewToFront(pageControl)
        pageControl.numberOfPages = pages.count
        pageControl.currentPage = 0
    }

    func presentationCountForPageViewController(pageViewController: UIPageViewController) -> Int {
            return pages.count
        }
    
        func presentationIndexForPageViewController(pageViewController: UIPageViewController) -> Int {
            return 0
        }

    func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {
        let currentIndex = pages.firstIndex(of:  viewController)!
            if currentIndex == 0 {
                return nil
            }
            let previousIndex = abs((currentIndex - 1) % pages.count)
            return pages[previousIndex]
        }

    func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {
            let currentIndex = pages.firstIndex(of:  viewController)!
            if currentIndex == pages.count-1 {
                return nil
            }
            let nextIndex = abs((currentIndex + 1) % pages.count)
            return pages[nextIndex]
        }

    private func pageViewController(pageViewController: UIPageViewController, willTransitionToViewControllers pendingViewControllers: [UIViewController]) {
        pendingIndex = pages.firstIndex(of: pendingViewControllers.first!)
    }

    private func pageViewController(pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {
        if completed {
            currentIndex = pendingIndex
            if let index = currentIndex {
                pageControl.currentPage = index
            }
        }
    }
}

import UIKit

class ViewController: UIViewController, UIPageViewControllerDataSource, UIPageViewControllerDelegate {

@IBOutlet weak var pageControl: UIPageControl!

var pageContainer: UIPageViewController!

var pages = [UIViewController]()

var currentIndex: Int?

private var pendingIndex: Int?

override func viewDidLoad() {

super.viewDidLoad()

let storyboard = UIStoryboard(name: "Main", bundle: nil)

let page1: UIViewController! = storyboard.instantiateViewController(withIdentifier: "page1")

let page2: UIViewController! = storyboard.instantiateViewController(withIdentifier: "page2")

let page3: UIViewController! = storyboard.instantiateViewController(withIdentifier: "page3")

pages.append(page1)

pages.append(page2)

pages.append(page3)

pageContainer = UIPageViewController(transitionStyle: .scroll, navigationOrientation: .horizontal, options: nil)

pageContainer.delegate = self

pageContainer.dataSource = self

pageContainer.setViewControllers([page1], direction: UIPageViewController.NavigationDirection.forward, animated: false, completion: nil)

view.addSubview(pageContainer.view)

view.bringSubviewToFront(pageControl)

pageControl.numberOfPages = pages.count

pageControl.currentPage = 0

}

func presentationCountForPageViewController(pageViewController: UIPageViewController) -> Int {

return pages.count

}

func presentationIndexForPageViewController(pageViewController: UIPageViewController) -> Int {

return 0

}

func pageViewController(_ pageViewController: UIPageViewController, viewControllerAfter viewController: UIViewController) -> UIViewController? {

let currentIndex = pages.firstIndex(of: viewController)!

if currentIndex == 0 {

return nil

}

let previousIndex = abs((currentIndex - 1) % pages.count)

return pages[previousIndex]

}

func pageViewController(_ pageViewController: UIPageViewController, viewControllerBefore viewController: UIViewController) -> UIViewController? {

let currentIndex = pages.firstIndex(of: viewController)!

if currentIndex == pages.count-1 {

return nil

}

let nextIndex = abs((currentIndex + 1) % pages.count)

return pages[nextIndex]

}

private func pageViewController(pageViewController: UIPageViewController, willTransitionToViewControllers pendingViewControllers: [UIViewController]) {

pendingIndex = pages.firstIndex(of: pendingViewControllers.first!)

}

private func pageViewController(pageViewController: UIPageViewController, didFinishAnimating finished: Bool, previousViewControllers: [UIViewController], transitionCompleted completed: Bool) {

if completed {

currentIndex = pendingIndex

if let index = currentIndex {

pageControl.currentPage = index

}

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 set images or any other custom animations to make it more better for UI purpose.

For other blogs Please click here

Kanika Dhiman 30 June 2021

. . .

Custom UIPagecontrol

Implementation of UIPageControl in swift:

Leave a Comment Cancel Reply

Message Sent!