swiftxcodeuipageviewcontrolleruipagecontrol

How to increase selected dot in UIPageControl. (iOS 12.4, not duplicate)


Please do not report this question. This question are not similar with another questions about UIPageController!!! Stop flag. Read carefully.

I find a lot of other question about UIPageControl. But every question about ALL dots in UIPageController. I need to increase size only for 1 dot which is active. For example we got 4 screens, when I am on the 1st screen I want first dot 10px, other 3 dots 5px. When I scrolling to second screen -> 2nd dot will be 10px, but 1st,3rd and 4th should be 5px.

All questions on stack overflow and other resources about increase all dots. THis question about increasing only current dot, which active at this moment.

class PageControl: UIPageControl {

var pageCount: Int
init(pageCount: Int) {
    self.pageCount = pageCount
    super.init(frame: .zero)
    currentPage = 0
    numberOfPages = pageCount
    let image = Images.outlinedEllipse(size: CGSize(width: 1.0, height: 1.0), color: Colors.darkBlue)
    pageIndicatorTintColor = UIColor.init(patternImage: image!)
    currentPageIndicatorTintColor = UIColor.white

    subviews.forEach {
        $0.transform = CGAffineTransform(scaleX: 4, y: 4)
    }
}
required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
}


public enum Images {
static func outlinedEllipse(size: CGSize, color: UIColor, lineWidth: CGFloat = 1.0) -> UIImage? {

    UIGraphicsBeginImageContextWithOptions(size, false, 0.5)
    guard let context = UIGraphicsGetCurrentContext() else {
        return nil
    }
    context.setStrokeColor(color.cgColor)
    context.setLineWidth(lineWidth)
    let rect = CGRect(origin: .zero, size: size).insetBy(dx: lineWidth * 1.5, dy: lineWidth * 1.5)
    context.addEllipse(in: rect)
    context.strokePath()
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

I've trying this code, but this is didn't work. Don't know why.

Please, can somebody help? Thanks a lot!


Solution

  • I think changing the size of the default UIPageControl dots view is still a private API on iOS. What I suggest is to hide the current default dots indicator and implement a new one by yourself, which should not be a hard thing to achieve.

    Here is my suggestion for dots control, which you can follow him and build your custom one, with active dot bigger size.

    GitHub FlexiblePageControl: https://github.com/shima11/FlexiblePageControl

    One of the ways to implement this is to have one root view controller which have one container view holding UIPageViewController, and one UIView at the bottom which holds your custom dotsView.

    Communication from RootViewController and UIPageViewController can be done through protocols or weak reference.