Rahmen für Punkte in UIPageControl hinzufügen

Question

Ich möchte Rahmenfarbe für Punkte in UIPageControl hinzufügen. Hier ist das kleine Bild davon:

Ich bin in der Lage zweiten Punkt zu setzen, indem sie von XCode Konfiguration, aber ich kann nicht die ersten und dritten Kreise innen leer machen. Gibt es einen einfachen Weg, das zu erreichen?

Thanks :)

Answer 1

Das ist nicht möglich, mit den aktuellen Eigenschaften für UIPageControl ist. Aber Sie können tun, indem Sie alle third party Seitenkontrolle integrieren, die die Funktionalität von iOS UIPageControl nachahmen.

_{Andere Antwort hat einen Patch angewendet. Ich habe dieser Lösung sehr widersprochen.}

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

Ich verwende SMPageControl. Es ist ein wirklich fantastischer Rahmen in Objective-C geschrieben, so dass es fähig ist, mit Swift 2 und Swift 3.e

Die Nutzung ganz einfach ist:

pod 'SMPageControl' 

Dann in Ihrem 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 Erweiterung ich habe verwendet:

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 
    } 

} 

Das Ergebnis sieht wie folgt aus:

Jetzt sind wir natürlich nutzen könnten Punkte wie die Bilder farbig, (leere gefärbt als nicht benutzt und farbgefüllte wie verwendet), dann würden wir die gefragt haben Ergebnis.

Answer 4

SWIFT 3 Version von @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 5

Ein anderer Ansatz wäre es, ein Musterbild der richtigen Größe zu verwenden (derzeit 7 Punkte im Durchmesser). Hier ist, was das Ergebnis wie folgt aussieht:

Und hier ist, wie es gemacht wird:

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 

Welche diese einfache kleine Erweiterung UIImage verwendet:

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

Die Kehrseite der Medaille ist Wenn sich die Punktgröße bei einer Betriebssystemaktualisierung ändert, sieht das Bild seltsam aus, da es gekachelt oder abgeschnitten wird.

Answer 6

benötigen diese

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 7

Fügen Sie einfach diese zwei Zeilen in viewDidAppear hinzuzufügen und das gewünschte Bild hinzuzufügen !!

pageControl.currentPageIndicatorTintColor = UIColor.init (patternImage: UIImage (genannt: "slider_selected")!)

pageControl.pageIndicatorTintColor = UIColor.init (patternImage: UIImage (genannt: "Slider"))