UIPageControl

Question

में डॉट्स के लिए सीमा जोड़ें IIPageControl में डॉट्स के लिए सीमा रंग जोड़ना चाहते हैं।

मैं XCode से यह कॉन्फ़िगर करके दूसरे डॉट डाल करने में सक्षम हूँ, लेकिन मैं पहले और तीसरे मंडलियां 'अंदर खाली नहीं कर सकते हैं: यहाँ यह छोटी सी तस्वीर है। क्या इसे हासिल करने का कोई आसान तरीका है?

धन्यवाद :)

Answer 1

UIPageControl के लिए उपलब्ध वर्तमान गुणों के साथ संभव नहीं है यही कारण है कि। लेकिन आप किसी भी third party पृष्ठ नियंत्रण को एकीकृत करके कर सकते हैं जो आईओएस UIPageControl की कार्यक्षमता की नकल करता है।

_{अन्य उत्तर ने एक पैच लागू किया है। मैं उस समाधान से असहमत हूं।}

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

मैं SMPageControl का उपयोग कर रहा हूं। यह एक सचमुच कमाल फ्रेमवर्क ऑब्जेक्टिव-सी में लिखा है, इसलिए इसे स्विफ्ट 2 के साथ सक्षम है और स्विफ्ट 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 4

स्विफ्ट 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 5

एक और दृष्टिकोण से सही आकार का एक पैटर्न छवि (जो वर्तमान में व्यास में 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 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; 
     } 
    } 

Answer 7

बस इस दो लाइनों को जोड़ने और वांछित छवि जोड़ की आवश्यकता है !!

pageControl.currentPageIndicatorTintColor = UIColor.init (patternImage: UIImage (नाम: "slider_selected")!)

pageControl.pageIndicatorTintColor = UIColor.init (patternImage: UIImage (नाम: "स्लाइडर"))