UIPageControl Dot Size for current page

LilMoke picture LilMoke · Jul 12, 2018 · Viewed 7.2k times · Source

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:

UIPageControl's first dot is bigger

Page 2:

UIPageControl's second dot is bigger

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.

Answer

Shrikant Chidgopkar picture Shrikant Chidgopkar · Jul 12, 2018

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
    
}