Dodaj ramkę dla kropek w UIPageControl

Question

Chcę dodać kolor obramowania kropek w UIPageControl. Oto mały obrazek z nim:

jestem w stanie umieścić drugą kropkę konfigurując go z XCode, ale nie mogę zrobić wewnątrz pierwszego i trzeciego kręgach pusta. Czy istnieje prosty sposób, aby to osiągnąć?

Dzięki :)

Answer 1

nie jest to możliwe z obecnych właściwości dostępnych dla UIPageControl. Ale możesz to zrobić, integrując dowolne formanty strony, które naśladują funkcjonalność iOS UIPageControl.

_{W innej odpowiedzi zastosowano łatkę. Bardzo nie zgadzałem się z tym rozwiązaniem.}

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

Używam SMPageControl. To naprawdę niesamowite Framework napisane w Objective-C, więc jest w stanie z Swift 2 i Swift 3.

Użycie jest zupełnie prosta:

pod 'SMPageControl' 

Następnie w 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) 
} 

Rozszerzenie UIImage Użyłem:

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 
    } 

} 

Wynik wygląda tak:

Teraz możemy obsługi oczywiście kolorowe kropki jako obrazy (puste kolorowe jak nieużywany i koloru wypełnione jako używany) wtedy mamy poprosił wynik.

Answer 4

SWIFT 3 Wersja z @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

Innym podejściem byłoby użyć deseniowy o prawidłowej wielkości (co jest aktualnie średnicy 7 punktów). Oto, czego wynikiem wygląda następująco:

A oto jak to zrobić:

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 

który korzysta z tej prostej trochę rozszerzenie 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 
    } 
} 

Minusem tego jest jeśli rozmiar kropki zmieni się w aktualizacji systemu operacyjnego, obraz będzie wyglądał dziwnie, ponieważ będzie układany w kafelki lub obcięte.

Answer 6

Trzeba dodać to w 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; 
     } 
    } 

Answer 7

Wystarczy dodać te dwie linie i dodać żądany obraz !!

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

pageControl.pageIndicatorTintColor = UIColor.init (patternImage: UIImage (o nazwie: "suwak"))