iOS में सर्कुलर प्रोग्रेस बार कैसे बनाएं

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

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

नए प्रोग्रामर्स के लिए सर्कुलर प्रोग्रेस बार बनाना बहुत थकाऊ हो सकता है और वे इसके साथ काम करने में संघर्ष कर सकते हैं।

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

शुरुआत करते हैं

चरण 1: प्रोजेक्ट बनाएं

Xcode खोलें, Single View Application, नाम दें "CircularProgress"

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

चरण 2: नई क्लास बनाएं

File → Add New File → Cocoa Touch Class → CircularProgressView of UIView class

चरण 3: UI बनाएं

UI व्यू जोड़ें और नीचे इमेज में दिखाए अनुसार उसी का क्लास CircularProgressView जोड़ें, तीन बटन जोड़ें और उन्हें 30%, 60% और 95% नाम दें।

ViewController.swift में सभी तीन बटनों के लिए @IBAction बनाएं और नाम दें:

@IBAction func btn95(_ sender: Any) { }
@IBAction func btn30(_ sender: Any) { }
@IBAction func btn60(_ sender: Any) { }

ViewController.swift में UI व्यू के लिए @IBOutlet बनाएं और नाम दें:

@IBOutlet weak var circularProgress: CircularProgressView!

चरण 4: CircularProgressView.swift में लेयर्स बनाएं

var progressLyr = CAShapeLayer()
var trackLyr = CAShapeLayer()

चरण 5: DidSet मेथड्स लिखें

var progressClr = UIColor.white {
    didSet {
        progressLyr.strokeColor = progressClr.cgColor
    }
}
var trackClr = UIColor.white {
    didSet {
        trackLyr.strokeColor = trackClr.cgColor
    }
}

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

चरण 6: makeCircularPath फंक्शन जोड़ें

func makeCircularPath() {
    self.backgroundColor = UIColor.clear
    self.layer.cornerRadius = self.frame.size.width/2
    let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width/2, y: frame.size.height/2), radius: (frame.size.width - 1.5)/2, startAngle: CGFloat(-0.5 * .pi), endAngle: CGFloat(1.5 * .pi), clockwise: true)
    trackLyr.path = circlePath.cgPath
    trackLyr.fillColor = UIColor.clear.cgColor
    trackLyr.strokeColor = trackClr.cgColor
    trackLyr.lineWidth = 5.0
    trackLyr.strokeEnd = 1.0
    layer.addSublayer(trackLyr)
    progressLyr.path = circlePath.cgPath
    progressLyr.fillColor = UIColor.clear.cgColor
    progressLyr.strokeColor = progressClr.cgColor
    progressLyr.lineWidth = 10.0
    progressLyr.strokeEnd = 0.0
    layer.addSublayer(progressLyr)
}

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

चरण 7: Required init फंक्शन जोड़ें

जब हम स्टोरीबोर्ड से UI डिजाइन करते हैं तो हमें required init का उपयोग करना चाहिए, जब आप प्रोग्रामेटिकली UI डिजाइन करते हैं तो हम override init का उपयोग करेंगे, हमारे मामले में हम required init का उपयोग करने जा रहे हैं।

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    makeCircularPath()
}

चरण 8: प्रोग्रेस एनिमेट करने के लिए फंक्शन बनाएं

func setProgressWithAnimation(duration: TimeInterval, value: Float) {
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.duration = duration
    animation.fromValue = 0
    animation.toValue = value
    animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
    progressLyr.strokeEnd = CGFloat(value)
    progressLyr.add(animation, forKey: "animateprogress")
}

CircularProgressView.swift का अंतिम कोड

import UIKit

class CircularProgressView: UIView {
    var progressLyr = CAShapeLayer()
    var trackLyr = CAShapeLayer()
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        makeCircularPath()
    }
    
    var progressClr = UIColor.white {
        didSet {
            progressLyr.strokeColor = progressClr.cgColor
        }
    }
    
    var trackClr = UIColor.white {
        didSet {
            trackLyr.strokeColor = trackClr.cgColor
        }
    }
    
    func makeCircularPath() {
        self.backgroundColor = UIColor.clear
        self.layer.cornerRadius = self.frame.size.width/2
        let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width/2, y: frame.size.height/2), radius: (frame.size.width - 1.5)/2, startAngle: CGFloat(-0.5 * .pi), endAngle: CGFloat(1.5 * .pi), clockwise: true)
        trackLyr.path = circlePath.cgPath
        trackLyr.fillColor = UIColor.clear.cgColor
        trackLyr.strokeColor = trackClr.cgColor
        trackLyr.lineWidth = 5.0
        trackLyr.strokeEnd = 1.0
        layer.addSublayer(trackLyr)
        progressLyr.path = circlePath.cgPath
        progressLyr.fillColor = UIColor.clear.cgColor
        progressLyr.strokeColor = progressClr.cgColor
        progressLyr.lineWidth = 10.0
        progressLyr.strokeEnd = 0.0
        layer.addSublayer(progressLyr)
    }
    
    func setProgressWithAnimation(duration: TimeInterval, value: Float) {
        let animation = CABasicAnimation(keyPath: "strokeEnd")
        animation.duration = duration
        animation.fromValue = 0
        animation.toValue = value
        animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.linear)
        progressLyr.strokeEnd = CGFloat(value)
        progressLyr.add(animation, forKey: "animateprogress")
    }
}

चरण 9: ViewController.swift में कोड जोड़ें

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

circularProgress.trackClr = UIColor.cyan
circularProgress.progressClr = UIColor.purple

अपने बटन फंक्शनैलिटी में नीचे दी गई लाइनें जोड़ें, 95%, 30% और 60% की अवधि के साथ:

@IBAction func btn95(_ sender: Any) {
    circularProgress.setProgressWithAnimation(duration: 1.0, value: 0.95)
}
@IBAction func btn30(_ sender: Any) {
    circularProgress.setProgressWithAnimation(duration: 1.0, value: 0.30)
}
@IBAction func btn60(_ sender: Any) {
    circularProgress.setProgressWithAnimation(duration: 1.0, value: 0.60)
}

अंतिम ViewController.swift

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var circularProgress: CircularProgressView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        circularProgress.trackClr = UIColor.cyan
        circularProgress.progressClr = UIColor.purple
    }
    
    @IBAction func btn95(_ sender: Any) {
        circularProgress.setProgressWithAnimation(duration: 1.0, value: 0.95)
    }
    @IBAction func btn30(_ sender: Any) {
        circularProgress.setProgressWithAnimation(duration: 1.0, value: 0.30)
    }
    @IBAction func btn60(_ sender: Any) {
        circularProgress.setProgressWithAnimation(duration: 1.0, value: 0.60)
    }
}

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

हो गया! एप्लिकेशन चलाएं और 30% या 60% या 95% पर टैप करें। आप व्यू को एनिमेट होता हुआ देखेंगे।