資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究在iOS中建立圓形進度條
對於iOS開發者來說，掌握如何建立圓形進度條非常重要，幾乎每個應用程式都會用到它。
這主要用於顯示下載狀態、載入狀態或任何其他與進度相關的事情。
建立圓形進度條對於新手程式設計師來說可能會非常繁瑣，他們可能會在使用過程中遇到困難。
建立圓形進度條有多種方法。在這篇文章中，我們將介紹一種建立圓形進度條最簡單、最容易的方法。
讓我們開始吧！
步驟1 - 開啟Xcode，選擇“單檢視應用程式”，將其命名為CircularProgress。
我們將建立一個包含三個帶有百分比的按鈕和一個圓形進度檢視的應用程式，點選按鈕後，進度檢視將根據百分比進行更改。
步驟2 - 建立新類，檔案 -→ 新增新檔案 -→ Cocoa Touch類 -→ 以UIView類建立CircularProgressView。
步驟3 - 建立UI，新增UI檢視並新增與下圖所示相同的CircularProgressView類，新增三個按鈕並將其命名為30%、60%和95%。
在ViewController.swift中為所有三個按鈕建立@IBAction，並按如下所示命名它們。
@IBAction func btn95(_ sender: Any) {
}
@IBAction func btn30(_ sender: Any) {
}
@IBAction func btn60(_ sender: Any) {
}在ViewController.swift中為UI檢視建立@IBoutlet，並按如下所示命名它。
@IBOutlet weak var circularProgress: CircularProgressView!
步驟4 - 在CircularProgressView.swift中，建立兩個物件progressLayer和trackLayer，型別為CAShapeLayer()。
var progressLyr = CAShapeLayer() var trackLyr = CAShapeLayer()
步驟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是一個屬性觀察器，屬性觀察器觀察並響應屬性值的變化。每次設定屬性值時都會呼叫屬性觀察器，即使新值與屬性的當前值相同。
步驟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 - 新增required init函式，當我們從故事板設計UI時，我們應該使用required init；當我們以程式設計方式設計UI時，我們將使用override init；在我們的例子中，我們將使用required 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%。你將看到檢視正在動畫。
2K+瀏覽量
