Ajouter une bordure pour les points dans UIPageControl

Ce n'est pas possible avec les propriétés actuelles disponibles pour UIPageControl . Mais vous pouvez le faire en intégrant un contrôle de page tiers qui imite la fonctionnalité de iOS UIPageControl .

_{Une autre réponse a appliqué un patch. Je suis fortement en désaccord avec cette solution.}

  for (int i = 0; i < _pageControl.numberOfPages; i++) { UIView* dot = [_pageControl.subviews objectAtIndex:i]; if (i == _pageControl.currentPage) { dot.backgroundColor = [UIColor whiteColor]; dot.layer.cornerRadius = dot.frame.size.height / 2; } else { dot.backgroundColor = [UIColor clearColor]; dot.layer.cornerRadius = dot.frame.size.height / 2; dot.layer.borderColor = [UIColor whiteColor].CGColor; dot.layer.borderWidth = 1; } } 

Version SWIFT 3 de @RiosK

 func updatePageControl() { for (index, dot) in pageControl.subviews.enumerated() { if index == pageControl.currentPage { dot.backgroundColor = dotColor dot.layer.cornerRadius = dot.frame.size.height / 2; } else { dot.backgroundColor = UIColor.clear dot.layer.cornerRadius = dot.frame.size.height / 2 dot.layer.borderColor = dotColor.cgColor dot.layer.borderWidth = dotBorderWidth } } } 

Une autre approche consisterait à utiliser une image de motif de la taille correcte (qui est actuellement de 7 points de diamètre). Voici à quoi ressemble le résultat:

Et voici comment c'est fait:

 let image = UIImage.outlinedEllipse(size: CGSize(width: 7.0, height: 7.0), color: .darkGray) self.pageControl.pageIndicatorTintColor = UIColor.init(patternImage: image!) self.pageControl.currentPageIndicatorTintColor = .darkGray 

Qui utilise cette petite extension simple à UIImage :

 /// An extension to `UIImage` for creating images with shapes. extension UIImage { /// Creates a circular outline image. class func outlinedEllipse(size: CGSize, color: UIColor, lineWidth: CGFloat = 1.0) -> UIImage? { UIGraphicsBeginImageContextWithOptions(size, false, 0.0) guard let context = UIGraphicsGetCurrentContext() else { return nil } context.setStrokeColor(color.cgColor) context.setLineWidth(lineWidth) // Inset the rect to account for the fact that strokes are // centred on the bounds of the shape. let rect = CGRect(origin: .zero, size: size).insetBy(dx: lineWidth * 0.5, dy: lineWidth * 0.5) context.addEllipse(in: rect) context.strokePath() let image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return image } } 

L'inconvénient de ceci est que si la taille du point change dans une mise à jour du operating system, l'image aura l'air bizarre car elle sera carrelée ou coupée.

J'utilise SMPageControl . C'est un framework vraiment génial écrit en Objective-C, donc il est capable avec Swift 2 et Swift 3.

L'utilisation est complètement simple:

 pod 'SMPageControl' 

Ensuite, dans votre PageViewController :

 import SMPageControl class MyController: UIPageViewController { var pageControl = SMPageControl() override func viewDidLoad() { super.viewDidLoad() stylePageControl() } private func stylePageControl() { pageControl = SMPageControl(frame: CGRect(x: 0, y: self.view.frame.size.height - 50, width: self.view.frame.size.width, height: 50)) pageControl.numberOfPages = yourPageControllerArray.count // the first (first) picture is the item in the bar, that is unused // the second (currentFirst) is an item that we use, when this is the current active page // in this example, we don't have dots, but we use "pictues" as dots let first = UIImage(named: "pageHome")?.imageWithColor(UIColor.grayColor()) let currentFirst = first?.imageWithColor(UIColor.whiteColor()) pageControl.setImage(first, forPage: 0) pageControl.setCurrentImage(currentFirst, forPage: 0) let second = UIImage(named: "pageMusic")?.imageWithColor(UIColor.grayColor()) let currentSecond = second?.imageWithColor(UIColor.whiteColor()) pageControl.setImage(second, forPage: 1) pageControl.setCurrentImage(currentSecond, forPage: 1) pageControl.indicatorMargin = 30.0 // this is the space between the dots self.view.addSubview(pageControl) } 

UIImage Extension J'ai utilisé:

 extension UIImage { func imageWithColor(color1: UIColor) -> UIImage { UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale) color1.setFill() let context = UIGraphicsGetCurrentContext()! as CGContextRef CGContextTranslateCTM(context, 0, self.size.height) CGContextScaleCTM(context, 1.0, -1.0); CGContextSetBlendMode(context, CGBlendMode.Normal) let rect = CGRectMake(0, 0, self.size.width, self.size.height) as CGRect CGContextClipToMask(context, rect, self.CGImage!) CGContextFillRect(context, rect) let newImage = UIGraphicsGetImageFromCurrentImageContext()! as UIImage UIGraphicsEndImageContext() return newImage } } 

Le résultat ressemble à ceci:

Maintenant, nous pourrions bien sûr utiliser des points de couleur comme les images, (vides colorées comme inutilisés et remplis de couleur comme utilisé) alors nous aurions le résultat demandé.