UIPageControl Dot Size for current page

Question

I am trying to find out how to make the dot for the selected page be slightly bigger than the others as shown below:

Page 1:

Page 2:

I am able to change the dot color, size for all the dots, background, etc, but not for the specific dot of the current page.
How to change the dot size for the current page only?

This can be Swift or Objective-C.

Yes, i was hoping there was a way to make the default control handle this behavior. I can create my own custom UIPagerControl, if necessary, but not desirable. — LilMoke, Jul 12 '18 at 11:11
My vote alone is not enough to get your question re-opened, but you got a working solution at [Scaling current dot of UIPageControl and keeping it centered](https://stackoverflow.com/questions/55060432/scaled-uipagecontrol-dot-isnt-centered) — Cœur, Mar 11 '19 at 04:26

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

Swift

func scrollViewWillEndDragging(_ scrollView: UIScrollView, withVelocity velocity: CGPoint, targetContentOffset: UnsafeMutablePointer<CGPoint>) {
    
    let x = targetContentOffset.pointee.x
    
    pageControl.currentPage = Int(x / self.frame.width)
    
    
    // on each dot, call the transform of scale 1 to restore the scale of previously selected dot
    
    pageControl.subviews.forEach {
        $0.transform = CGAffineTransform(scaleX: 1, y: 1)
    }
    
    // transform the scale of the current subview dot, adjust the scale as required, but bigger the scale value, the downward the dots goes from its centre.
    // You can adjust the centre anchor of the selected dot to keep it in place approximately.
    
    let centreBeforeScaling = self.pageControl.subviews[self.pageControl.currentPage].center
    
    self.pageControl.subviews[self.pageControl.currentPage].transform = CGAffineTransform(scaleX: 1.5, y: 1.5)
    
    
    // Reposition using autolayout
    
    self.pageControl.subviews[self.pageControl.currentPage].translatesAutoresizingMaskIntoConstraints = false
    
    self.pageControl.subviews[self.pageControl.currentPage].centerYAnchor.constraint(equalTo: self.pageControl.subviews[0].centerYAnchor , constant: 0)
    
    self.pageControl.subviews[self.pageControl.currentPage].centerXAnchor.constraint(equalTo: self.pageControl.subviews[0].centerXAnchor , constant: 0)

    
//    self.pageControl.subviews[self.pageControl.currentPage].layer.anchorPoint = centreBeforeScaling
    
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 12 '18 at 11:21

Shrikant Chidgopkar

695
1
6
13

Ahh, i see, yes I will try this. Thanks for the suggestion!! – LilMoke Jul 12 '18 at 11:32
does this override scrollViewWillEndDragging in my UIPageViewController? – LilMoke Jul 12 '18 at 11:39
1

Put this code after whenever the pagecontrol.currentPage is being set pageControl.subviews.forEach { $0.transform = CGAffineTransform(scaleX: 1, y: 1) } self.pageControl.subviews[self.pageControl.currentPage].transform = CGAffineTransform(scaleX: 1.25, y: 1.25) – Shrikant Chidgopkar Jul 12 '18 at 11:39
Its working, but the only downside is that the dot goes down a bit. I will try to get dot's anchor to reposition to its original centre after scaling and will let you know. – Shrikant Chidgopkar Jul 12 '18 at 11:46
Yes, I understand it works great, but I do see the issue you point out. – LilMoke Jul 12 '18 at 11:46
Thank you, i tried to reposition the dot, but I am not having any luck so far. I look forward to finding out if you are able to re-position the dot!! – LilMoke Jul 12 '18 at 11:57
I have updated the answer, try and let me know – Shrikant Chidgopkar Jul 12 '18 at 12:20
I will, trying now, thanks!! – LilMoke Jul 12 '18 at 12:31
No, it does not seem to work, it does not scroll when swiped. – LilMoke Jul 12 '18 at 12:40
Make sure that your are setting pageControl.translatesAutoresizingMaskIntoConstraints = false. somewhere after you have initialised pageControl, probably in viewDidLoad() – Shrikant Chidgopkar Jul 12 '18 at 12:53
Yes, that solved the problem... one last issue... the first dot on the first page is small, when swiped, the second dot becomes larger and then all works fine from there. – LilMoke Jul 12 '18 at 13:02
1

Last problem solved by executing that code in viewDidAppear(), thank you so much, this is a perfect solution for us!!! I wrapped those calls into a func that we call from viewDidAppear and when we change pages. – LilMoke Jul 12 '18 at 13:08
1

Yes you should call it after the subviews have been layedout. Glad I could I help. – Shrikant Chidgopkar Jul 12 '18 at 13:17
pageControl.subviews[self.pageControl.currentPage].translatesAutoresizingMaskIntoConstraints = false . hiding second dot when pageViewController swipe – Ketan Shinde Jan 30 '19 at 09:02

score 0 · Answer 2 · answered Jul 12 '18 at 11:11

0

The default UIPageControl implementation doesn't let you change the aspect of the dots. Fortunately, there are lots of open source alternatives like:

FXPageControl: By Nick Lockwood
CHIPageControl: By ChiliLabs

You can have a peek through Github search to find the one most fit your needs.

answered Jul 12 '18 at 11:11

Tylerian

157
1
14

Yes, most do much, much more than we really need. We could do our own custom UIPageControl, I was just hoping for a simple solution. I will look into your suggestions, but I am sure they do way more than we need. Thanks for the suggestions. – LilMoke Jul 12 '18 at 11:14

UIPageControl Dot Size for current page

2 Answers2

Swift

Linked