Sunday, 18 September 2016

How to create custom PageViewController using UIScrollView and UIPageControl in IOS Tutorial - Swift


Introduction to custom UIPageViewController using UIScrollView and UIPageControl:

UIPageControl in IOS is a control that is used mostly in help screens or info screens for IOS apps. In this we are going to create a small tutorial for UIPageControl using swift language,  in which we will change background color of UIImageView as per page number selected by user on tapping on UIPageControl or swiping UIScrollView. UIScrollView is used with UIPageControl as the page control itself is set of dots and does not has display interface.

Learn how to create custom PageViewController using UIScrollView in Objective C - Tutorial

Implementation of UIPageControl in swift:

Lets start our tutorial of creating custom  page control in swift3 language. Create a new project with single view application template and name it UIPageViewController-swift.  Open Main.storyboard and drop UIScrollView and UIpagecontrol on to the view.

Drag UIscrollView and UIPageControl on to view
Drag UIscrollView and UIPageControl on to view

Adding constraints to the controls

Add leading, trailing, bottom, top contraints to UIScrollView, Add constraint to page control we add horizontal and top constraint with respect to scrollview.

Add constraints to UIScrollView
Add constraints to UIScrollView
Add constraints to UIPageControl
Add constraints to UIPageControl

Creating IBOutlet for UIPageControl and UIScrollView

Now open ViewController.swift and create IBOutlets for UIPageControl and UIScrollView





and an IBAction changePage that we are going to assign to UIPageControl ValueChanged event so that we can detect that user has taped on UIPageControl



your ViewController.swift file will look like this







Open Main.storyboard and connect IBOutlets and IBAction to UIScrollView and UIPageControl

Connecting UIPageControl IBOutlet
Connecting UIPageControl IBOutlet
Connecting IBOutlet to UIScrollView
Connecting IBOutlet to UIScrollView

Setting number of pages in out UIPageControl and setting current page number
Setting number of pages in out UIPageControl and setting current page number
Note: scrollWidth and scrollHeight are the width and height calculated with respect to empty space we left on top, bottom,left right or our UIScrollView with respect to view.

Use below code to create 3 pages for our UIPageControl





Run you code and you will see colored UImageViews inside your scroll, Swipe left and right, you will see page effect. Still we have to implement our page control as user can also tap on page control in order to navigate through the different pages.

Final Source code to achieve pagination for our UIPageControl and UIScrollView

In our changePage action, we will use scrollRectToVisible  method of UIScrollView so that we can scroll our UIScrollView as per user tap on UIPageControl.




Lastly. we need to implement scrollViewDidEndDecelerating delegate of UIScrollView so that we can calculate page number if user did not use UIPageControl and simple scroll down UIScrollView




In setIndicatorForCurrentPage, we calculated page by diving x offset of UIScrollView with its width and the assign that page to our UIPageControl as its current or selected page.

Download Source Code: UIPageControl in Swift

Where to go from here:

In this post we learn about how to use/create custom UIPageControl in iOS using swift language. You can check Custom UIPageControl objective C version from here UIPageControl tutorial in objective C 
I hope you enjoyed this post on How to create custom  PageViewController in IOS Tutorial - Swift.


No comments:
Write comments