UIPageControl with custom dots and space

NexorPageControl.swift

import UIKit

class NexorPageControl: UIPageControl {
    
    fileprivate let activeDotFrame = CGRect(origin: .zero, size: CGSize(width: 21, height: 7))
    fileprivate let inactiveDotFrame = CGRect(origin: .zero, size: CGSize(width: 7, height: 7))
    fileprivate let dotPadding: CGFloat = 9 //default is 9
    
    lazy var activeImage: UIImage = {
        let view = UIView(frame: self.activeDotFrame)
        view.backgroundColor = .red
        view.alpha = 1
        view.isOpaque = false
        view.setNeedsDisplay()
        view.layoutIfNeeded()
        view.translatesAutoresizingMaskIntoConstraints = false
        return view.toImage()!
    }()
    
    lazy var inactiveImage: UIImage = {
        let view = UIView(frame: self.inactiveDotFrame)
        view.backgroundColor = .red
        view.alpha = 0.5
        view.isOpaque = false
        view.setNeedsDisplay()
        view.layoutIfNeeded()
        view.translatesAutoresizingMaskIntoConstraints = false
        return view.toImage()!
    }()
    
    override func awakeFromNib() {
        super.awakeFromNib()
        
        #if DEBUG
           self.backgroundColor = .yellow
        #endif
        
        self.tintColor = .clear
        self.pageIndicatorTintColor = .clear
        self.currentPageIndicatorTintColor = .clear
        self.isUserInteractionEnabled = false
        self.clipsToBounds = false
    }

    override var numberOfPages: Int {
        didSet {
            self.updateDots()
        }
    }
    
    override var currentPage: Int {
        didSet {
            self.updateDots()
        }
    }
    
    private func updateDots()
    {
        var dotOriginY: CGFloat = 0
        
        for i in 0 ..< self.subviews.count
        {
            let subview = self.subviews[i]
            let dot: UIImageView = imageViewForSubview(view: subview)
            
            if (i == self.currentPage) {
                dot.image = activeImage
                dot.frame = activeDotFrame
            }
            else {
                dot.image = inactiveImage
                dot.frame = inactiveDotFrame
            }
                        
            dot.frame.origin.x = dotOriginY
            dotOriginY = dot.frame.origin.x + dot.frame.size.width + self.dotPadding
            
            if i == self.subviews.count - 1 {
              dotOriginY -= self.dotPadding
            }
            
            subview.snp.removeConstraints() //SnapKit Lib => remove constraints
            subview.snp.remakeConstraints { make in //SnapKit Lib => remake constraints
                make.width.equalTo(dot)
                make.centerY.equalToSuperview()
            }
        }
        
        print("dot \(dotOriginY)")
        
        self.snp.remakeConstraints { make in //SnapKit Lib => remake constraints
            make.width.equalTo(dotOriginY)
        }
        
        self.updateConstraints()
        self.setNeedsLayout()
        self.layoutIfNeeded()
    }
    
    private func imageViewForSubview(view: UIView) -> UIImageView {
        var dot: UIImageView!

        if let imgView = view as? UIImageView {
            dot = imgView
        }
        else {
            for subview: UIView in view.subviews {
                if let subimgView = subview as? UIImageView {
                    dot = subimgView
                }
            }

            if dot == nil {
                dot = UIImageView(frame: .zero)
                view.addSubview(dot!)
            }
        }

        dot?.contentMode = .scaleAspectFit
        return dot!
    }
}

You save my day !!!!!!! Thank you for share very much~

🥇

Please, Can you help me explain about view.toImage()!

@zipris you must return an image. The “!” means that the image always exists.

Look at this link for more informations how to return an image. https://stackoverflow.com/questions/30696307/how-to-convert-a-uiview-to-an-image

Thank you