สร้าง Circular Progress Bar ใน iOS

Circular Progress Bar สำคัญสำหรับนักพัฒนา iOS ใช้แสดงสถานะดาวน์โหลด โหลด หรือความคืบหน้าอื่นๆ

มีหลายวิธีสร้าง บทความนี้แสดงวิธีง่ายที่สุด

ขั้นตอนที่ 1: สร้างโปรเจกต์

Xcode → Single View Application → ชื่อ "CircularProgress"

UI: 3 ปุ่ม (30%, 60%, 95%) + 1 Circular Progress View

ขั้นตอนที่ 2: สร้าง Class CircularProgressView

File → New File → Cocoa Touch Class → ชื่อ CircularProgressView subclass ของ UIView

ขั้นตอนที่ 3: ออกแบบ UI และเชื่อม Outlet/Action

เพิ่ม UIView ตั้ง Class เป็น CircularProgressView เพิ่ม 3 ปุ่ม ตั้งชื่อ 30%, 60%, 95%

สร้าง @IBAction: btn95, btn30, btn60 สร้าง @IBOutlet: circularProgress

ขั้นตอนที่ 4-7: เขียนโค้ด CircularProgressView.swift

สร้าง progressLyr และ trackLyr (CAShapeLayer) ใช้ didSet property observer สำหรับสี

ฟังก์ชัน makeCircularPath() สร้างเส้นทางวงกลมด้วย UIBezierPath

ใช้ required init?(coder:) เรียก makeCircularPath()

ฟังก์ชัน setProgressWithAnimation(duration:value:) ใช้ CABasicAnimation สำหรับ Animation

โค้ดเต็ม 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: .linear)
        progressLyr.strokeEnd = CGFloat(value)
        progressLyr.add(animation, forKey: "animateprogress")
    }
}

ขั้นตอนที่ 8-9: ใช้งานใน ViewController

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)
    }
}

รันแอป กดปุ่ม 30%, 60%, 95% จะเห็น Animation