iOS ডেভেলপারদের জন্য সার্কুলার প্রগ্রেস বার তৈরি করা জানা খুব গুরুত্বপূর্ণ, প্রায় সকল অ্যাপ্লিকেশনে এটি থাকে।
এটি প্রধানত ডাউনলোড স্ট্যাটাস, লোডিং স্ট্যাটাস বা অন্য কোনো প্রগ্রেস সম্পর্কিত বিষয় দেখাতে ব্যবহৃত হয়।
সার্কুলার প্রগ্রেস বার তৈরি করা নতুন প্রোগ্রামারদের জন্য খুব জটিল হতে পারে এবং সেগুলোতে স্ট্রাগল করতে হয়।
সার্কুলার প্রগ্রেস বার তৈরির একাধিক উপায় রয়েছে। এই পোস্টে আমরা সবচেয়ে সহজ এবং সিম্পল একটি উপায় দেখব।
চলুন শুরু করি।
Step 1 − Xcode, Single View Application, নাম দিন CircularProgress।
আমরা একটি অ্যাপ্লিকেশন তৈরি করব যেখানে ৩টি বাটন থাকবে পার্সেন্টেজের সাথে এবং একটি সার্কুলার প্রগ্রেস ভিউ, যেখানে বাটন ট্যাপ করলে প্রগ্রেস ভিউ পার্সেন্টেজ অনুযায়ী পরিবর্তন হবে।
Step 2 − নতুন ক্লাস তৈরি করুন, File → add new file → Cocoa Touch class → CircularProgressView of UIView class।
Step 3 − UI তৈরি করুন, একটি UI View যোগ করুন এবং সেটির ক্লাস CircularProgressView সেট করুন, তিনটি বাটন যোগ করুন এবং নাম দিন 30%, 60% এবং 95%।
ViewController.swift-এ তিনটি বাটনের @IBAction তৈরি করুন নিচের নাম দিয়ে।
@IBAction func btn95(_ sender: Any) { }
@IBAction func btn30(_ sender: Any) { }
@IBAction func btn60(_ sender: Any) { }UI View-এর @IBOutlet তৈরি করুন ViewController.swift-এ এবং নাম দিন।
@IBOutlet weak var circularProgress: CircularProgressView!
Step 4 − CircularProgressView.swift-এ, CAShapeLayer() টাইপের দুটি অবজেক্ট তৈরি করুন: progress layer এবং track layer।
var progressLyr = CAShapeLayer()
var trackLyr = CAShapeLayer()Step 5 − progressLyr এবং trackLyr সেট করার জন্য didSet মেথড লিখুন।
var progressClr = UIColor.white {
didSet {
progressLyr.strokeColor = progressClr.cgColor
}
}
var trackClr = UIColor.white {
didSet {
trackLyr.strokeColor = trackClr.cgColor
}
}এখানে আমরা progressLyr এবং trackLyr প্রপার্টি সেট করছি। didSet হলো একটি প্রপার্টি অবজারভার, যা প্রপার্টির ভ্যালু পরিবর্তন হলে কল হয়।
Step 5 − 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)
}এই ফাংশনে আমরা একটি সার্কুলার পাথ তৈরি করছি, তার প্যারামিটার এবং বিহেভিয়ার ডিফাইন করছি।
Step 6 − required init ফাংশন যোগ করুন, যখন আমরা Storyboard থেকে UI ডিজাইন করি তখন required init ব্যবহার করতে হয়, প্রোগ্রামেটিক্যালি ডিজাইন করলে override init ব্যবহার করব, আমাদের কেসে required init ব্যবহার করব।
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
makeCircularPath()
}Step 7 − প্রগ্রেস এনিমেট করার জন্য নতুন ফাংশন setProgressWithAnimation তৈরি করুন এবং নিচের কোড লিখুন।
func setProgressWithAnimation(duration: TimeInterval, value: Float) {
let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.duration = duration
animation.fromValue = 0
animation.toValue = value
animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
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: kCAMediaTimingFunctionLinear)
progressLyr.strokeEnd = CGFloat(value)
progressLyr.add(animation, forKey: "animateprogress")
}
}Step 8 − উপরের কোড রান করুন শুধু চেক করার জন্য সব ঠিক আছে কিনা, আপনার UI নিচের মতো দেখাবে কিন্তু নন-ফাংশনাল কারণ ViewController.swift-এ কোড যোগ করিনি।
Step 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% ট্যাপ করুন। আপনি ভিউটি এনিমেট होते দেখবেন।
