iOS এ সার্কুলার প্রোগ্রেস বার তৈরি করুন

iOS ডেভেলপারদের জন্য কিভাবে একটি সার্কুলার প্রগ্রেস বার তৈরি করতে হয় তা জানা খুবই গুরুত্বপূর্ণ, প্রায় প্রতিটি অ্যাপ্লিকেশনে এটি রয়েছে।

এটি মূলত ডাউনলোডিং স্ট্যাটাস, লোডিং স্ট্যাটাস বা অন্য কোনো অগ্রগতি সম্পর্কিত জিনিস দেখানোর জন্য ব্যবহৃত হয়।

সার্কুলার প্রোগ্রেস বার তৈরি করা নতুন প্রোগ্রামারদের জন্য খুব ক্লান্তিকর হয়ে উঠতে পারে এবং তাদের এটির সাথে কাজ করতে সমস্যা হতে পারে।

বৃত্তাকার অগ্রগতি বার তৈরি করার একাধিক উপায় রয়েছে। এই পোস্টে আমরা সার্কুলার প্রোগ্রেস বার তৈরি করার সবচেয়ে সহজ এবং সহজ উপায় দেখব৷

তো চলুন শুরু করা যাক

ধাপ 1 − Xcode খুলুন, একক দৃশ্য অ্যাপ্লিকেশন, এটির নাম দিন সার্কুলারপ্রগ্রেস৷

সুতরাং আমরা 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 দুর্বল var সার্কুলারপ্রগ্রেস:সার্কুলারপ্রগ্রেসভিউ!

পদক্ষেপ 4৷ − CircularProgressView.swift-এ, CAShapeLayer() টাইপের দুটি অবজেক্ট প্রগ্রেস লেয়ার এবং ট্র্যাক লেয়ার তৈরি করুন।

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

ধাপ 5 নিচের মত করে progressLyr এবং trackLyr সেট করার জন্য সেট করা পদ্ধতি লিখুন

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

এখানে আমরা প্রপার্টি প্রোগ্রেসলির এবং ট্র্যাকলির সেট করছি।

didSet হল একটি সম্পত্তি পর্যবেক্ষক, সম্পত্তি পর্যবেক্ষকরা একটি সম্পত্তির মান পরিবর্তনগুলি পর্যবেক্ষণ করে এবং প্রতিক্রিয়া জানায়। প্রপার্টির মান সেট করা হলে প্রত্যেকবার প্রপার্টি পর্যবেক্ষকদের ডাকা হয়, এমনকি নতুন মান যদি প্রপার্টির বর্তমান মানের সমান হয়

ধাপ 5 - makeCircularPath ফাংশন যোগ করুন এবং নীচের কোড যোগ করুন।

func makeCircularPath() { self.backgroundColor =UIColor.clear self.layer.cornerRadius =self.frame.size.width/2 চলুন বৃত্তপথ =UIBezierPath(আর্কসেন্টার: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 =circulPath.cgPath trackLyr.fillColor =UIColor.clear.cgColor trackLyr.strokeColor =trackClr.cgColor trackLyr.lineWidth =5.0 trackLyr.strokeEnd =1.0 layer.addSublayer(trackLyr) প্রগতিLyr.fillColor =বৃত্ত। .clear.cgColor progressLyr.strokeColor =progressClr.cgColor progressLyr.lineWidth =10.0 progressLyr.strokeEnd =0.0 layer.addSublayer(progressLyr)}

এই ফাংশনে আমরা একটি বৃত্তাকার পথ তৈরি করছি, এটির প্যারামিটার এবং এটির আচরণ সংজ্ঞায়িত করছি।

ধাপ 6 − প্রয়োজনীয় init ফাংশন যোগ করুন, যখন আমরা স্টোরিবোর্ড থেকে UI ডিজাইন করি তখন আমাদের প্রয়োজনীয় init ব্যবহার করা উচিত, আপনি যখন প্রোগ্রামগতভাবে UI ডিজাইন করবেন তখন আমরা ওভাররাইড init ব্যবহার করব, আমাদের ক্ষেত্রে আমরা need init ব্যবহার করতে যাচ্ছি।

প্রয়োজনীয় init?(কোডার aDecoder:NSCoder) { super.init(coder:aDecoder) makeCircularPath()}

পদক্ষেপ7 - এখন আমরা অগ্রগতি অ্যানিমেট করতে চাই তাই নতুন ফাংশন সেটProgressWithAnimation তৈরি করুন এবং নীচের কোডটি লিখুন

func setProgressWithAnimation(সময়কাল:টাইমইন্টারভাল, মান:ফ্লোট) { let animation =CABasicAnimation(keyPath:"strokeEnd") animation.duration =duration animation.fromValue =0 animation.toValue =value animation.timingFunction(CAMFunction) নামকরণ ) progressLyr.strokeEnd =CGFloat(মান) progressLyr.add(অ্যানিমেশন, forKey:"animateprogress")}

আমাদের কাজ শেষ, CircularProgressView.swift এর জন্য আপনার চূড়ান্ত কোডটি এইরকম হওয়া উচিত

ইমপোর্ট UIKitclass সার্কুলারপ্রোগ্রেসভিউ:UIView { var progressLyr =CAShapeLayer() var trackLyr =CAShapeLayer() প্রয়োজনীয় init?(কোডার aDecoder:NSCoder) { super.init(coder:aDecoder) makeCircularPath() =r. didSet { progressLyr.strokeColor =progressClr.cgColor } } var trackClr =UIColor.white { didSet { trackLyr.strokeColor =trackClr.cgColor } } ফাংশন makeCircularPath() { self.backgroundColor =UIColor.clear স্বয়ংক্রিয়। .size.width/2 চলুন বৃত্তপথ =UIBezierPath(আর্কসেন্টার: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 লাইন প্রস্থ =5.0 trackLyr.strokeEnd =1.0 স্তর।addSubl ayer(trackLyr) progressLyr.path =circulPath.cgPath progressLyr.fillColor =UIColor.clear.cgColor progressLyr.strokeColor =progressClr.cgColor progressLyr.lineWidth =10.0 progressLyr.strokeEnd =0.0 layer.addSublayration সেট , মান:ফ্লোট) { চলুন অ্যানিমেশন =CABasicAnimation(keyPath:"strokeEnd") animation.duration =duration animation.fromValue =0 animation.toValue =মান animation.timingFunction =CAMediaTimingFunction(নাম:kCAMediaTimingFunction =CAMediaTimingFunction) progressLyr.add(animation, forKey:"animateprogress") }}

ধাপ 8 − সবকিছু ঠিকঠাক কাজ করছে কিনা তা পরীক্ষা করার জন্য উপরের কোডটি চালান, আপনি নীচের মতো আপনার UI দেখতে পাবেন কিন্তু অ-কার্যকর কারণ আমরা ViewController.swift-এ কোনো কোড যোগ করিনি

ধাপ 9 − ViewController.swift-এ কিছু কোড যোগ করা যাক।

viewDidLoad() এ নীচের লাইনটি লিখুন, এটি অগ্রগতি বারের রঙ নির্দিষ্ট করবে

circularProgress.trackClr =UIColor.cyancircularProgress.progressClr =UIColor.বেগুনি

95%, 30% এবং 60% সময়কাল সহ আপনার বোতাম কার্যকারিতাতে নীচের লাইনগুলি যোগ করুন

@IBAction func btn95(_ প্রেরক:যেকোন) { circularProgress.setProgressWithAnimation(সময়কাল:1.0, মান:0.95)}@IBAction ফাংশন btn30(_ প্রেরক:যে কোনো) { circularProgress.setProgressWithAnimation(সময়কাল:1.0, 0.) }@IBAction func btn60(_ প্রেরক:যেকোনো) { circularProgress.setProgressWithAnimation(সময়কাল:1.0, মান:0.60)}

অবশেষে আপনার ViewController.swift-এর নিচের কোড থাকা উচিত

ইমপোর্ট করুন UIKitclass ViewController:UIViewController { @IBOutlet weak var circularProgress:CircularProgressView! ওভাররাইড func viewDidLoad() { super.viewDidLoad() circularProgress.trackClr =UIColor.cyan circularProgress.progressClr =UIColor.purple } @IBAction func btn95(_ প্রেরক:যে কোনো) { circularProgress.setProgressWithAnimation:0, 5 মান:0. @IBAction func btn30(_ প্রেরক:যেকোন) { circularProgress.setProgressWithAnimation(সময়কাল:1.0, মান:0.30) } @IBAction func btn60(_ প্রেরক:যেকোন) { circularProgress.setProgressWithAnimation(সময়কাল:1.0, মান:0.}}) /প্রে> 

 বোতাম ফাংশনে আমরা মান এবং সময়কাল সহ সেটপ্রোগ্রেস উইথ অ্যানিমেশনকে কল করছি।
 

 এটাই আমাদের হয়ে গেছে, অ্যাপ্লিকেশনটি চালান এবং 30% বা 60% বা 95% এ আলতো চাপুন৷ আপনি ভিউ অ্যানিমেটিং দেখতে পাবেন।