How to change borders of UIPageControl dots?

Question

Changing the colours is pretty straightforward, but is it possible to change the border of all unselected dots?

Ex:

dot.layer.borderWidth = 0.5 dot.layer.borderColor = UIColor.blackColor()

Answer 1

Yes This can be done.. Actually its pretty simple.

For iOS 14 Apple has introduced a great customization, where you can set custom images and even set background

let pageControl = UIPageControl()
pageControl.numberOfPages = 5

pageControl.backgroundStyle = .prominent

pageControl.preferredIndicatorImage = UIImage(systemName: "bookmark.fill")

pageControl.setIndicatorImage(UIImage(systemName: "heart.fill"), forPage: 0)

For prior to iOS 14:-

The Pagecontrol is composed of many Subviews which you can access. self.pageControl.subviews returns you [UIView] i.e array of UIView's. After you get a single view you can add border to it , change its borderColor, change its border width, transform the dot size like scaling it.. All those properties that a UIView has can be used.

                for index in 0..<array.count{ // your array.count
                
                let viewDot = weakSelf?.pageControl.subviews[index]
                viewDot?.layer.borderWidth = 0.5
                viewDot?.transform = CGAffineTransform(scaleX: 1.2, y: 1.2)
                
                if (index == indexPath.row){ // indexPath is the current indexPath of your selected cell or view in the collectionView i.e which needs to be highlighted
                    viewDot?.backgroundColor = UIColor.black
                    viewDot?.layer.borderColor = UIColor.black.cgColor
                }
                else{
                    viewDot?.backgroundColor = UIColor.white
                    viewDot?.layer.borderColor = UIColor.black.cgColor
                    
                }
            }

and it looks like this

And remember you do not need to set weakSelf?.pageControl.currentPage = indexPath.row.Do let me know in case of any problem.. Hope this solves your problem.

All the best

Answer 2

iOS 14 allows setting indicator image with SFSymbol here's my subclassing of UIPageControl

class BorderedPageControl: UIPageControl {

    var selectionColor: UIColor = .black
    
    override var currentPage: Int {
        didSet {
            updateBorderColor()
        }
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        currentPageIndicatorTintColor = selectionColor
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
    
    func updateBorderColor() {
        if #available(iOS 14.0, *) {
            let smallConfiguration = UIImage.SymbolConfiguration(pointSize: 8.0, weight: .bold)
            let circleFill = UIImage(systemName: "circle.fill", withConfiguration: smallConfiguration)
            let circle = UIImage(systemName: "circle", withConfiguration: smallConfiguration)
            for index in 0..<numberOfPages {
                if index == currentPage {
                    setIndicatorImage(circleFill, forPage: index)
                } else {
                    setIndicatorImage(circle, forPage: index)
                }
            }
            pageIndicatorTintColor = selectionColor
        } else {
            subviews.enumerated().forEach { index, subview in
                if index != currentPage {
                    subview.layer.borderColor = selectionColor.cgColor
                    subview.layer.borderWidth = 1
                } else {
                    subview.layer.borderWidth = 0
                }
            }
        }
    }
}