Increase the size of the indicator in UIPageViewController's UIPageControl

Question

Is it possible to Increase the size of the indicator in UIPageViewController?

I have this:

And my requirement is this:

score 111 · Accepted Answer · answered Feb 24 '17 at 13:28

111

Scaling the page control will scale the dots, but will also scale the spacing in between them.

pageControl.transform = CGAffineTransform(scaleX: 2, y: 2)

If you want to keep the same spacing between dots, you'll need to transform the dots individually:

pageControl.subviews.forEach {
    $0.transform = CGAffineTransform(scaleX: 2, y: 2)
}

However, if you do this in viewDidLoad, the transform has been reset by the time the view appears, so you should do this in viewDidLayoutSubviews…

override func viewDidLayoutSubviews() {
    pageControl.subviews.forEach {
        $0.transform = CGAffineTransform(scaleX: 2, y: 2)
    }
}

answered Feb 24 '17 at 13:28

Ashley Mills

50,474
16
129
160

1

That's a great answer, But how can I get the reference of UIPageControl in UIPageViewController. Like if I print the subviews of UIPageViewController I get the ScrollView only! Or do I need to drag one UIPageControl in the storyboard? – Anurag Sharma Feb 25 '17 at 04:31
Did you ever solve this? I'm having the same confusion over how to reference the pageControl. Do I do this somehow within the UIPageViewController? All I want is bigger dots, and scaling the distance between them is fine too. – Wayne Henderson Jul 27 '17 at 20:18
Note that while this is a clever answer, Apple does not support you reaching into framework controls and manipulating their private view hierarchy. This is fragile and what works today might change behavior in a future release. – Duncan C May 11 '18 at 13:14
2

@DuncanC Apple may not support it, but it still allows it. Same thing when you customize the NavigationBar for instance. You just need to avoid using private symbols. – Cœur Mar 04 '19 at 02:56
1

In C# or Xamarin.ios use like this myPageControl.Transform = CGAffineTransform.MakeScale(2, 2); – Anisetti Nagendra May 02 '19 at 09:02
I want to change size of only current indicator – Yawar Aug 29 '19 at 09:44

Makaille · Answer 2 · 2017-02-24T13:07:19.787

8

You can use an UIPageControl and scale it like this :

@IBOutlet weak var pageControl: UIPageControl!

 override func viewDidLoad() {
    super.viewDidLoad()
    pageControl.transform = CGAffineTransform(scaleX: 2, y: 2); //set value here
}

The problem with that is that you space between your dots will be increase too. If you want to have an accurate design with your dot you have to use 3party controls : https://www.cocoacontrols.com/

edited Feb 24 '17 at 13:07

answered Feb 24 '17 at 13:00

Makaille

1,636
2
24
41

I have mentioned in the question that I am using UIPageViewController. – Anurag Sharma Feb 24 '17 at 13:05
@AnuragSharma I know, UIPageControl is used with UIPageViewController when we want more control on the dots. This is not incompatible. There is no way to do what you want only with the UIPageViewController – Makaille Feb 24 '17 at 13:10
You are absolutely right, But we can get the reference of "UIPageControl" in "viewDidLayoutSubviews()" and modify as per our needs. We can change the space between dots have a look at @Ashley Mills answer – Anurag Sharma Mar 02 '17 at 04:48

score 5 · Answer 3 · answered May 02 '18 at 11:53

5

For swift 2.0 to increase or decrease size of pageControl Indicator

self.pageControl.transform = CGAffineTransformMakeScale(0.8, 0.8)

OR

self.pageControl.transform = CGAffineTransformMakeScale(1.3, 1.3)

answered May 02 '18 at 11:53

Hardik Thakkar

15,269
2
94
81

Or vice-versa: 1.3 is an increase. Using CGAffineTransformMakeScale made it clearer to me for Obj-C. – ghr May 13 '18 at 02:39
Are you asking for objective-c ? – Hardik Thakkar May 13 '18 at 04:22
No, thank you. Your example, rather than the earlier ones, helped me translate the solution into Objective-C. `self.pageControl.transform = CGAffineTransformMakeScale(1.8, 1.8);` – ghr May 14 '18 at 02:40

score 3 · Answer 4 · answered Aug 06 '19 at 07:42

Swift 4, 4.2 and 5

First create an outlet of page control

@IBOutlet weak var pageControl: UIPageControl!

If you want to keep the original spacing.

override func viewDidLayoutSubviews() {
        pageControl.transform = CGAffineTransform(scaleX: 2, y: 2)
}

If you don't want to keep the original spacing.

override func viewDidLayoutSubviews() {
        pageControl.subviews.forEach {
            $0.transform = CGAffineTransform(scaleX: 2, y: 2)
        }
}

score 1 · Answer 5 · answered Mar 09 '18 at 16:06

Firstly, create an uiPageControl object inside inside viewDidLoad() and then set it's y position as per your requirement then apply required scale using CAAffiniteTransform as below:

        var pageControl = UIPageControl()
        pageControl.pageIndicatorTintColor = UIColor.gray
        pageControl.currentPageIndicatorTintColor = UIColor.yellow

        pageControl.transform = CGAffineTransform(scaleX: 1.3, y: 1.3) // set dot scale of pageControl

        pageControl.backgroundColor = UIColor.darkGray
        pageControl.numberOfPages = 3
        pageControl.center = self.view.center 
        self.view.addSubview(pageControl) // add pageControl to view

        pageControl.layer.position.y = self.view.frame.height - 100; // y position of the pageControl

score -2 · Answer 6 · answered Jul 12 '18 at 05:07

-2

Add an extension to the page controller

extension UIPageControl {
    func customPageControl(dotWidth: CGFloat) {
        for (pageIndex, dotView) in self.subviews.enumerated() {
            dotView.frame.size = CGSize.init(width: dotWidth, height: dotWidth)
        }
    }
}

answered Jul 12 '18 at 05:07

Krishna Kirana

438
4
10

2

That is the problem with setting the frame and not constraints. – ScottyBlades Sep 24 '18 at 18:44
Call this method from the either in LayoutSubview or whenever there is a change in the page controller so it will be adjusted accordingly – Krishna Kirana Oct 11 '19 at 05:41

Increase the size of the indicator in UIPageViewController's UIPageControl

6 Answers6

Linked

Related