Điều rất quan trọng là phải biết cách tạo thanh tiến trình vòng tròn cho các nhà phát triển iOS, hầu hết mọi ứng dụng đều có điều này.
Điều này chủ yếu được sử dụng để hiển thị trạng thái tải xuống, trạng thái tải hoặc bất kỳ thông tin nào khác liên quan đến tiến trình.
Việc tạo thanh Tiến trình vòng tròn có thể trở nên rất tẻ nhạt đối với các lập trình viên mới và họ có thể gặp khó khăn khi làm việc với nó.
Có nhiều cách để tạo thanh tiến trình hình tròn. Trong bài đăng này, chúng ta sẽ thấy một trong những cách đơn giản và dễ dàng nhất để tạo thanh tiến trình vòng tròn.
Vì vậy, hãy bắt đầu
Bước 1 - Mở ứng dụng Xcode, Single View, đặt tên là CircularProgress.
Vì vậy, chúng tôi sẽ tạo một ứng dụng có 3 nút có tỷ lệ phần trăm và một chế độ xem tiến trình vòng tròn, trong đó khi nhấn vào các nút, chế độ xem tiến trình sẽ thay đổi dựa trên tỷ lệ phần trăm.
Bước 2 - Tạo lớp mới, Tệp - → thêm tệp mới - → Lớp Cocoa Touch - → Chế độ xem hình tròn của lớp UIView.
Bước 3 - Tạo giao diện người dùng, Thêm chế độ xem giao diện người dùng và thêm lớp CircularProgressView giống như thể hiện bên dưới trong hình ảnh, thêm ba nút và đặt tên cho chúng là 30%, 60% và 95%.
Tạo @IBAction cho tất cả ba nút trong ViewController.swift và đặt tên chúng như hình dưới đây
@IBAction func btn95(_ sender: Any) {
}
@IBAction func btn30(_ sender: Any) {
}
@IBAction func btn60(_ sender: Any) {
} Tạo @IBoutlet cho UI View trong ViewController.swift và đặt tên nó như bên dưới
@IBOutlet weak var circularProgress: CircularProgressView!
Bước 4 - Trong CircularProgressView.swift, tạo hai lớp tiến trình đối tượng và lớp theo dõi loại CAShapeLayer ().
var progressLyr = CAShapeLayer() var trackLyr = CAShapeLayer()
Bước 5 Các phương thức Write did set để thiết lập processLyr và trackLyr như bên dưới
var progressClr = UIColor.white {
didSet {
progressLyr.strokeColor = progressClr.cgColor
}
}
var trackClr = UIColor.white {
didSet {
trackLyr.strokeColor = trackClr.cgColor
}
} Ở đây chúng tôi đang thiết lập thuộc tính processLyr và trackLyr.
didSet là người quan sát thuộc tính, Người quan sát thuộc tính quan sát và phản hồi những thay đổi về giá trị của thuộc tính. Người quan sát thuộc tính được gọi mỗi khi giá trị của thuộc tính được đặt, ngay cả khi giá trị mới giống với giá trị hiện tại của thuộc tính
Bước 5 - Thêm chức năng makeCircularPath và thêm mã bên dưới.
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)
} Trong hàm này, chúng tôi đang tạo một đường tròn, xác định các thông số của nó và hành vi của nó.
Bước 6 - Thêm chức năng init bắt buộc, khi chúng tôi thiết kế giao diện người dùng từ bảng phân cảnh, chúng tôi nên sử dụng init bắt buộc, khi bạn thiết kế giao diện người dùng theo chương trình, chúng tôi sẽ sử dụng init ghi đè, trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng init yêu cầu.
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
makeCircularPath()
} Bước 7 - Bây giờ chúng ta muốn tạo hiệu ứng cho tiến trình, vì vậy hãy tạo hàm mới setProgressWithAnimation và viết đoạn mã dưới đây
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")
} Chúng ta đã hoàn tất, mã cuối cùng của bạn cho CircularProgressView.swift sẽ trông như thế này
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")
}
} Bước 8 - Chạy mã trên chỉ để kiểm tra mọi thứ hoạt động tốt, bạn sẽ thấy giao diện người dùng của mình như bên dưới nhưng không có chức năng vì chúng tôi chưa thêm bất kỳ mã nào trong ViewController.swift
Bước 9 - Hãy thêm một số mã trong ViewController.swift.
Viết dòng bên dưới trong viewDidLoad (), điều này sẽ chỉ định màu của thanh tiến trình
circularProgress.trackClr = UIColor.cyan circularProgress.progressClr = UIColor.purple
Thêm các dòng bên dưới trong chức năng nút của bạn, với thời lượng 95%, 30% và 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)
} Cuối cùng thì ViewController.swift của bạn phải có mã bên dưới
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)
}
} Trong hàm nút, chúng ta đang gọi setProgressWithAnimation với các giá trị và thời lượng.
Vậy là xong, chạy ứng dụng và nhấn vào 30% hoặc 60% hoặc 95%. Bạn sẽ thấy chế độ xem đang hoạt động.
