आईओएस में सर्कुलर प्रोग्रेस बार बनाएं

आईओएस डेवलपर्स के लिए सर्कुलर प्रोग्रेस बार बनाने का तरीका जानना बहुत जरूरी है, लगभग हर एप्लिकेशन में यह होता है।

यह मुख्य रूप से डाउनलोडिंग स्टेटस, लोडिंग स्टेटस या किसी अन्य प्रगति से संबंधित चीज को दिखाने के लिए उपयोग किया जाता है।

सर्कुलर प्रोग्रेस बार बनाना नए प्रोग्रामर के लिए बहुत कठिन हो सकता है और उन्हें इसके साथ काम करने में कठिनाई हो सकती है।

सर्कुलर प्रोग्रेस बार बनाने के कई तरीके हैं। इस पोस्ट में हम सर्कुलर प्रोग्रेस बार बनाने का सबसे सरल और आसान तरीका देखेंगे।

तो चलिए शुरू करते हैं

चरण 1 - ओपन एक्सकोड, सिंगल व्यू एप्लिकेशन, इसे सर्कुलर प्रोग्रेस नाम दें।

इसलिए हम 3 बटनों के साथ एक एप्लिकेशन बना रहे हैं जिसमें प्रतिशत और एक गोलाकार प्रगति दृश्य है, जहां बटन टैप करने पर प्रतिशत के आधार पर प्रगति दृश्य बदल जाएगा।

चरण 2 - नया वर्ग बनाएं, फ़ाइल - → नई फ़ाइल जोड़ें - → कोको टच क्लास - → UIView वर्ग का परिपत्र प्रगति दृश्य।

चरण 3 - UI बनाएं, UI दृश्य जोड़ें और उसी का वर्ग CircularProgressView जोड़ें जैसा कि नीचे चित्र में दिखाया गया है, तीन बटन जोड़ें और उन्हें 30%, 60% और 95% नाम दें।

ViewController.swift में तीनों बटनों के लिए @IBAction बनाएं और उन्हें नीचे दिखाए अनुसार नाम दें

@IBAction func btn95(_ प्रेषक:कोई भी) {}@IBAction func btn30(_ प्रेषक:कोई भी) {}@IBAction func btn60(_ प्रेषक:कोई भी) {}

ViewController.swift में UI व्यू के लिए @IBoutlet बनाएं और इसे नीचे नाम दें

@IBOutlet कमजोर संस्करण सर्कुलरप्रोग्रेस:​​सर्कुलरप्रोग्रेस व्यू!

चरण 4 -CircularProgressView.swift में, दो ऑब्जेक्ट प्रोग्रेस लेयर बनाएं और CAShapeLayer() प्रकार की ट्रैक लेयर बनाएं।

var प्रगतिLyr =CAShapeLayer()var trackLyr =CAShapeLayer()

चरण 5 प्रगति सेट करने के लिए सेट किए गए तरीके लिखें और नीचे के रूप में ट्रैक करें

var प्रगतिClr =UIColor.white { didSet {प्रगति लाइर.स्ट्रोककलर =प्रगतिClr.cgColor}}var trackClr =UIColor.white { didSet {trackLyr.strokeColor =trackClr.cgColor}}

यहां हम प्रॉपर्टी की प्रगति लियर और ट्रैक लियर सेट कर रहे हैं।

didSet एक प्रॉपर्टी ऑब्जर्वर है, प्रॉपर्टी ऑब्जर्वर किसी प्रॉपर्टी के मूल्य में बदलाव का निरीक्षण करते हैं और उसका जवाब देते हैं। प्रॉपर्टी ऑब्जर्वर को हर बार प्रॉपर्टी की वैल्यू सेट होने पर बुलाया जाता है, भले ही नया वैल्यू प्रॉपर्टी के मौजूदा वैल्यू के बराबर ही क्यों न हो

चरण 5 - मेक सर्कुलरपाथ फ़ंक्शन जोड़ें और नीचे कोड जोड़ें।

func makeCircularPath() { self.backgroundColor =UIColor.clear self.layer.cornerRadius =self.frame.size.width/2 चलो सर्कलपाथ =UIBezierPath(arcCenter:CGPoint(x:frame.size.width/2, y) :frame.size.height/2), त्रिज्या:(frame.size.width - 1.5)/2, startAngle:CGFloat(-0.5 * .pi), endAngle:CGFloat(1.5 * .pi), क्लॉकवाइज:true) trackLyr .path =CirclePath.cgPath trackLyr.fillColor =UIColor.clear.cgColor trackLyr.strokeColor =trackClr.cgColor trackLyr.lineWidth =5.0 trackLyr.strokeEnd =1.0 लेयर। AddSublayer (trackLyr) प्रोग्रेसLyr.path =CirclePath.cgPath प्रोग्रेसLyr.fillColor =UIColor .clear.cgColor प्रगतिLyr.strokeColor =प्रगतिClr.cgColor प्रगतिLyr.lineWidth =10.0 प्रगतिLyr.strokeEnd =0.0 लेयर.addSublayer(progressLyr)}

इस फ़ंक्शन में हम एक वृत्ताकार पथ बना रहे हैं, इसके मापदंडों और इसके व्यवहार को परिभाषित करते हुए।

चरण 6 - आवश्यक init फ़ंक्शन जोड़ें, जब हम स्टोरीबोर्ड से UI डिज़ाइन करते हैं तो हमें आवश्यक init का उपयोग करना चाहिए, जब आप UI को प्रोग्रामेटिक रूप से डिज़ाइन करते हैं तो हम ओवरराइड init का उपयोग करेंगे, हमारे मामले में हम आवश्यकता init का उपयोग करने जा रहे हैं।

आवश्यक init?(coder aDecoder:NSCoder) { super.init(coder:aDecoder) makeCircularPath ()}

चरण7 - अब हम प्रगति को चेतन करना चाहते हैं इसलिए नया फ़ंक्शन setProgressWithAnimation बनाएं और नीचे दिया गया कोड लिखें

func setProgressWithAnimation(अवधि:TimeInterval, value:Float) { एनीमेशन =CABasicAnimation (कीपाथ:"स्ट्रोकएंड") एनीमेशन दें। ) प्रगतिLyr.strokeEnd =CGFloat(value) प्रगतिLyr.add(animation, forKey:"animateprogress")}

हो गया, CircularProgressView.swift के लिए आपका अंतिम कोड इस तरह दिखना चाहिए

चरण 8 - सब कुछ ठीक काम करने के लिए उपरोक्त कोड चलाएँ, आपको अपना UI नीचे के रूप में देखना चाहिए, लेकिन गैर-कार्यात्मक क्योंकि हमने ViewController.swift में कोई कोड नहीं जोड़ा है।

चरण 9 - ViewController.swift में कुछ कोड जोड़ें।

नीचे दी गई लाइन को viewDidLoad () में लिखें, यह प्रगति पट्टी का रंग निर्दिष्ट करेगा

circularProgress.trackClr =UIColor.cyancircularProgress.progressClr =UIColor.purple

95%, 30% और 60% की अवधि के साथ, अपनी बटन कार्यक्षमता में नीचे की पंक्तियों को जोड़ें

@IBAction func btn95(_ sender:Any) {circularProgress.setProgressWithAnimation(अवधि:1.0, मान:0.95)}@IBAction func btn30(_ sender:Any) {circularProgress.setProgressWithAnimation(अवधि:1.0, मान:0.30) }@IBAction func btn60(_ प्रेषक:कोई भी) {circularProgress.setProgressWithAnimation(अवधि:1.0, मान:0.60)}

आखिरकार आपके ViewController.swift का कोड नीचे होना चाहिए

बटन फ़ंक्शन में हम मान और अवधि के साथ setProgressWithAnimation को कॉल कर रहे हैं।

बस यही हमने किया, एप्लिकेशन चलाएं और 30% या 60% या 95% पर टैप करें। आप दृश्य को एनिमेट करते हुए देखेंगे।