在UIPageControl中添加点的边框

我想在UIPageControl中添加点的边框颜色。 这是它的小图片：

我能够通过从XCodeconfiguration它来放第二个点，但是我不能让第一个和第三个圈子里面是空的。 有一个简单的方法来实现呢？

谢谢 ：）

Answer 1

这对于UIPageControl可用的当前属性是UIPageControl 。 但你可以通过集成任何模仿iOS UIPageControlfunction的第三方页面控件来UIPageControl 。

_{其他答案已经应用了一个补丁。 我非常不同意这个解决scheme。}

Answer 2

  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; } } 

Answer 3

SWIFT 3版本来自@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 } } } 

Answer 4

另一种方法是使用正确尺寸的图案图像（目前直径是7个点）。 结果如下：

这是如何完成的：

 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 

它使用这个简单的小扩展到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 } } 

这样做的缺点是，如果点更改操作系统更新，图像看起来很奇怪，因为它会平铺或剪裁。

Answer 5

我正在使用SMPageControl 。 这是一个用Objective-C编写的非常棒的框架，所以它能够支持Swift 2和Swift 3。

用法很简单：

 pod 'SMPageControl' 

然后在你的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 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 } } 

结果如下所示：

现在，我们当然可以使用彩色点作为图像，（空白的颜色作为未使用和颜色填充使用），那么我们会有问题的结果。

Answer 6

需要在viewDidAppear中添加这个

  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; } }