Adding border colour to page control applies background colour to page control

I tried adding border colour to page control and it applies background colour instead. The code below is the method I used to add border colour. The hyperlink above is where I got this solution. This method works no more in iOS 14 said a user.

Code Block
extension UIPageControl {
  func customPageControl(dotFillColor:UIColor, dotBorderColor:UIColor, dotBorderWidth:CGFloat) {
    for (pageIndex, dotView) in self.subviews.enumerated() {
      if self.currentPage == pageIndex {
        dotView.backgroundColor = dotFillColor
        dotView.layer.cornerRadius = dotView.frame.size.height / 2
      }else{
        dotView.backgroundColor = .white
        dotView.layer.cornerRadius = dotView.frame.size.height / 2
        dotView.layer.borderColor = dotBorderColor.cgColor
        dotView.layer.borderWidth = dotBorderWidth
      }
    }
  }
}





So that we can reproduce, can you post the exact code where you call customPageControl ?

And explain where you call it.
Here is the code from the swift file. I call it from the viewDidLoad function. I tried calling it from the viewDidAppear function also but the result is the same.

Code Block import UIKit
extension UIPageControl {
  func customPageControl(dotFillColor:UIColor, dotBorderColor:UIColor, dotBorderWidth:CGFloat) {
    for (pageIndex, dotView) in self.subviews.enumerated() {
      if self.currentPage == pageIndex {
        dotView.backgroundColor = dotFillColor
        dotView.layer.cornerRadius = dotView.frame.size.height / 2
      }else{
        dotView.backgroundColor = .white
        dotView.layer.cornerRadius = dotView.frame.size.height / 2
        dotView.layer.borderColor = dotBorderColor.cgColor
        dotView.layer.borderWidth = dotBorderWidth
      }
    }
  }
}
class IntroSliderViewController: UIViewController, UIScrollViewDelegate {
   
  @IBOutlet weak var slider: UIScrollView!
  @IBOutlet weak var slideControl: UIPageControl!
   
  let slide1 = [:]
   
  let slide2 = [:]
   
  let slide3 = [:]
   
  var slides = [ Dictionary<String,String> ]()
   
  override func viewDidLoad() {
    super.viewDidLoad()
     
    slides = [slide1,slide2,slide3]
    slider.isPagingEnabled = true
    slider.contentSize = CGSize(width: self.view.bounds.width * CGFloat(slides.count), height: self.view.bounds.height)
    slider.showsHorizontalScrollIndicator = false
    slider.delegate = self
    slideControl.customPageControl(dotFillColor: UIColor(named: "Primary-Color")!, dotBorderColor: UIColor(named: "Primary-Color")!, dotBorderWidth: CGFloat(2))
     
    loadSlides()
  }
   
  func scrollViewDidScroll(_ scrollView: UIScrollView) {
     
    let page = scrollView.contentOffset.x / scrollView.frame.size.width
    slideControl.currentPage = Int(page)
     
  }
   
  func loadSlides() {
     
    for (index,content) in slides.enumerated(){
       
      if let slide = Bundle.main.loadNibNamed("sliderContent", owner: self, options: nil)?.first as? SliderContentView {
         
        slide.backgroundImage.image = UIImage(named: content["background"]!)
        slide.mainImage.image = UIImage(named: content["mainImage"]!)
        slide.heading.text = content["heading"]
        slide.textContent .text = content["textContent"]
         
        slider.addSubview(slide)
        slide.frame.size.width = self.view.bounds.size.width
        slide.frame.size.height = self.view.bounds.size.height
        slide.frame.origin.x = CGFloat(index) * self.view.bounds.size.width
      }
       
    }
     
  }
   
}


Code Block
slideControl.customPageControl(dotFillColor: UIColor(named: "Primary-Color")!, dotBorderColor: UIColor(named: "Primary-Color")!, dotBorderWidth: CGFloat(2))

Which color do you expect, as you call for the same UIColor(named: "Primary-Color")

Did you try with something like:
Code Block
slideControl.customPageControl(dotFillColor: UIColor.blue, dotBorderColor: UIColor.red, dotBorderWidth: CGFloat(2))

Primary-Color is one among the custom colours which I have created for my project. And I tried using in-built UIColors, it is just applying background for the whole page control.
I would like to check a few points in this func :
Code Block
func customPageControl(dotFillColor:UIColor, dotBorderColor:UIColor, dotBorderWidth:CGFloat) {
for (pageIndex, dotView) in self.subviews.enumerated() {
if self.currentPage == pageIndex {
dotView.backgroundColor = dotFillColor
dotView.layer.cornerRadius = dotView.frame.size.height / 2
}else{
dotView.backgroundColor = .white
dotView.layer.cornerRadius = dotView.frame.size.height / 2
dotView.layer.borderColor = dotBorderColor.cgColor
dotView.layer.borderWidth = dotBorderWidth
}
}
}

You do not reset colors when it's not the current page. Why ?
you set corner radius in all cases, that could be outside the if.

More critical, pageControl has only one subview (each dot is not a subview).
So what do you expect with:
Code Block
for (pageIndex, dotView) in self.subviews.enumerated() { }

I would try the following:

Code Block
func customPageControl(dotFillColor:UIColor, dotBorderColor:UIColor, dotBorderWidth:CGFloat) {
for (pageIndex, dotView) in self.subviews.enumerated() {
print("pageIndex", pageIndex) // You should get only 0
dotView.layer.cornerRadius = dotView.frame.size.height / 2
dotView.layer.borderWidth = dotBorderWidth
if self.currentPage == pageIndex {
dotView.backgroundColor = dotFillColor.cgColor // in case you need cgColor
dotView.layer.borderColor = // any color you need
} else {
dotView.backgroundColor = .white
dotView.layer.borderColor = dotBorderColor.cgColor
}
}
}


To get what you want, you may need to create your custom pageControl or use those 2 func:
The first would be the filled dot, the other the empty dot.
Code Block
var preferredIndicatorImage: UIImage?

The preferred image for indicators.
Code Block
func setIndicatorImage(UIImage?, forPage: Int)

Sets the indicator image for the specified page.

override func viewDidLoad() {           super.viewDidLoad() slider.delegate = self     slideControl.currentPageIndicatorTintColor = .clear     slideControl.pageIndicatorTintColor = .clear     slideControl.preferredIndicatorImage = UIImage(named: "pageControlImage")     slideControl.setIndicatorImage(UIImage(named: "activePageImage"), forPage: 0)         }       func scrollViewDidScroll(_ scrollView: UIScrollView) {           let page = slider.contentOffset.x / scrollView.frame.size.width     //slideControl.currentPage = Int(page)     slideControl.setIndicatorImage(UIImage(named: "activePageImage"), forPage: Int(page))         }

This is how I have set my page control now. But the images are not appearing.

override func viewDidLoad() {
     
    super.viewDidLoad()
    slider.delegate = self
    slideControl.currentPageIndicatorTintColor = .clear
    slideControl.pageIndicatorTintColor = .clear
    slideControl.preferredIndicatorImage = UIImage(named: "pageControlImage")
    slideControl.setIndicatorImage(UIImage(named: "activePageImage"), forPage: 0)
     
  }
   
  func scrollViewDidScroll(_ scrollView: UIScrollView) {
     
    let page = slider.contentOffset.x / scrollView.frame.size.width
    //slideControl.currentPage = Int(page)
    slideControl.setIndicatorImage(UIImage(named: "activePageImage"), forPage: Int(page))
     
  }
Adding border colour to page control applies background colour to page control
 
 
Q