Search code examples
iosuikituipagecontrol

UIPageControl Dot Size for current page


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.


Solution

  • 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
        
    }