สร้างแถบความคืบหน้าแบบวงกลมใน iOS

การรู้วิธีสร้างแถบความคืบหน้าแบบวงกลมสำหรับนักพัฒนา iOS เป็นสิ่งสำคัญมาก เกือบทุกแอปพลิเคชันมีสิ่งนี้

นี้ใช้เป็นหลักในการแสดงสถานะการดาวน์โหลด สถานะการโหลด หรือสิ่งอื่น ๆ ที่เกี่ยวข้องกับความคืบหน้า

การสร้างแถบความคืบหน้าแบบวงกลมอาจกลายเป็นเรื่องน่าเบื่อสำหรับโปรแกรมเมอร์หน้าใหม่ และพวกเขาอาจประสบปัญหาในการทำงาน

มีหลายวิธีในการสร้างแถบความคืบหน้าแบบวงกลม ในโพสต์นี้ เราจะเห็นหนึ่งในวิธีที่ง่ายที่สุดและง่ายที่สุดในการสร้างแถบความคืบหน้าแบบวงกลม

มาเริ่มกันเลย

ขั้นตอนที่ 1 − เปิด Xcode แอปพลิเคชั่น Single View ตั้งชื่อว่า CircularProgress

ดังนั้น เราจะสร้างแอปพลิเคชันที่มีปุ่ม 3 ปุ่มที่มีเปอร์เซ็นต์และมุมมองความคืบหน้าแบบวงกลม 1 ปุ่ม โดยเมื่อแตะปุ่ม มุมมองความคืบหน้าจะเปลี่ยนตามเปอร์เซ็นต์

ขั้นตอนที่ 2 − สร้างคลาสใหม่ ไฟล์ -→ เพิ่มไฟล์ใหม่ -→ คลาส Cocoa Touch -→ CircularProgressView ของคลาส UIView

ขั้นตอนที่ 3 − สร้าง UI, เพิ่มมุมมอง UI และเพิ่มคลาส CircularProgressView ตามที่แสดงด้านล่างในภาพ เพิ่มสามปุ่มและตั้งชื่อปุ่มเหล่านั้น 30%, 60% และ 95%

สร้าง @IBAction สำหรับปุ่มทั้งสามใน ViewController.swift และตั้งชื่อตามที่แสดงด้านล่าง

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

สร้าง @IBoutlet สำหรับ UI View ใน ViewController.swift และตั้งชื่อตามด้านล่าง

@IBOutlet weak var circularProgress: CircularProgressView!

ขั้นตอนที่ 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
   }
}

ที่นี่เรากำลังตั้งค่าคุณสมบัติ ProgressLyr และ trackLyr

didSet เป็นผู้สังเกตการณ์คุณสมบัติ ผู้สังเกตการณ์คุณสมบัติจะสังเกตและตอบสนองต่อการเปลี่ยนแปลงมูลค่าของทรัพย์สิน ผู้สังเกตการณ์คุณสมบัติจะถูกเรียกทุกครั้งที่ตั้งค่าคุณสมบัติ แม้ว่าค่าใหม่จะเหมือนกับค่าปัจจุบันของคุณสมบัติ

ขั้นตอนที่ 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)
}

ในฟังก์ชันนี้ เรากำลังสร้างเส้นทางวงกลม กำหนดพารามิเตอร์ของมันและพฤติกรรมของมัน

ขั้นตอนที่ 6 − เพิ่มฟังก์ชัน init ที่จำเป็น เมื่อเราออกแบบ UI จากกระดานเรื่องราว เราควรใช้ init ที่จำเป็น เมื่อคุณออกแบบ UI โดยทางโปรแกรม เราจะใช้การแทนที่ init ในกรณีของเรา เราจะต้องใช้ require init

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

ขั้นตอนที่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")
   }
}

ขั้นตอนที่ 8 − เรียกใช้โค้ดด้านบนเพื่อตรวจสอบว่าทุกอย่างทำงานได้ดี คุณควรเห็น UI ของคุณด้านล่างแต่ใช้งานไม่ได้เนื่องจากเราไม่ได้เพิ่มโค้ดใดๆ ใน ViewController.swift

ขั้นตอนที่ 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% คุณจะเห็นภาพเคลื่อนไหวของมุมมอง