Swift 5.7 | What's new in UIPageControl ?

Get Started

Before looking into the new updates of WWDC22, it’s very important to know the few updates from WWDC20 about UIPageControl. So lets see few updates of UIPageControl from WWDC20:

Set background style of UIPageControl

/*
The preferred background style. Default is UIPageControlBackgroundStyleAutomatic on iOS, and UIPageControlBackgroundStyleProminent on tvOS.
*/
var backgroundStyle: UIPageControl.BackgroundStyle

Set indicator image for all pages of UIPageControl

/*
The preferred image for indicators. Symbol images are recommended. Default is nil.
*/
var preferredIndicatorImage: UIImage?

Get indicator image for UIPageControl’s specific page

/*
Returns the override indicator image for the specific page, nil if no override image was set.
Page must be in the range of 0..numberOfPages
*/
func indicatorImage(forPage page: Int) -> UIImage?

Set indicator image for UIPageControl’s specific page

/*
Override the indicator image for a specific page. Symbol images are recommended.
Resets to the default if image is nil.
Page must be in the range of 0..numberOfPages
*/
func setIndicatorImage(_ image: UIImage?, forPage page: Int)

What’s are the new updates in WWDC22 ?

After seeing the previous updates, lets move to new updates. Now it’ll be easy to understand.

Set the indicator image only for preferred current page of UIPageControl

/*
The preferred image for the current page indicator. Symbol images are recommended. Default is nil.
If this value is nil, then UIPageControl will use \c preferredPageIndicatorImage (or its per-page variant) as the indicator image.
*/
var preferredCurrentPageIndicatorImage: UIImage?

It override the image which is set by preferredIndicatorImage property.

Set current page indicator image for specific page of UIPageControl

/*
Override the current page indicator image for a specific page. Symbol images are recommended.
Resets to the default if image is nil.
Page must be in the range of 0..numberOfPages
*/
func setCurrentPageIndicatorImage(_ image: UIImage?, forPage page: Int)

You can change the current page indicator image for specific page.

Get the current page indicator image from UIPageControl

/*
Returns the override current page indicator image for the specific page, nil if no override image was set.
Page must be in the range of 0..numberOfPages
*/
func currentPageIndicatorImage(forPage page: Int) -> UIImage?

Sample code with design

Here is the sample code and its design output.

self.pageControl.numberOfPages = self.list.countself.pageControl.backgroundStyle = .prominentself.pageControl.preferredIndicatorImage = UIImage(systemName: "heart.fill")self.pageControl.setIndicatorImage(UIImage(systemName: "trash"), forPage: 1)self.pageControl.preferredCurrentPageIndicatorImage = .addself.pageControl.setCurrentPageIndicatorImage(.remove, forPage: 2)

One more update in UIPageControl:

Direction

Now you can change the direction of the UIPageControl. Earlier it supports only one direction — leftToRight, but now it has 4 directions.

As per the Apple doc, The Direction is a enum type which contains five types:

natural

A direction that infers the lay out from the system’s locale.

leftToRight

A direction that lays out the page indicators from left to right.

rightToLeft

A direction that lays out the page indicators from right to left.

topToBottom

A direction that lays out the page indicators from top to bottom.

bottomToTop

A direction that lays out the page indicators from bottom to top.

Example

It is very easy to change the direction of UIPageControl. See below:

self.pageControl.direction = .bottomToTop

Summary

Now, Apple gave more apis to make it customise, that’s very helpful.

Thank You. Happy coding! 👍

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store