- The progress ring function of the custom background image uses the principle of picture shielding to make the color of the progress ring more diverse...
- 自訂背景圖的進度環功能，利用圖片遮罩的原理，讓進度環的色彩更多樣化…
Example.mp4
dependencies: [
.package(url: "https://github.com/William-Weng/WWProgressMaskView.git", .upToNextMajor(from: "1.4.1"))
]
| 函式 | 功能 |
|---|---|
| setting(originalAngle:lineWidth:clockwise:hiddenMarkerView:lineCap:lineGap:innerImage:outerImage:markerImage:innerStartAngle:innerEndAngle:) | 設定一些初始值 => 會重畫 |
| progressCircle(type:from:to:) | 畫進度條 (以角度為準) |
| progressCircle(type:progressUnit:) | 畫進度條 |
| 函式 | 功能 |
|---|---|
| progressMaskViewAngle(_:from:to:) | 進度條的移動角度 |
import UIKit
import WWPrint
import WWProgressMaskView
@IBDesignable
final class MyProgressMaskView: WWProgressMaskView {}
final class ViewController: UIViewController {
@IBOutlet weak var firstMaskView: MyProgressMaskView!
@IBOutlet weak var secondMaskView: MyProgressMaskView!
@IBOutlet weak var firstLabel: UILabel!
@IBOutlet weak var secondLabel: UILabel!
private var firstPercent = 0
private var secondBasisPoint = 0
override func viewDidLoad() {
super.viewDidLoad()
initSetting()
}
@IBAction func firstTestAction(_ sender: UIBarButtonItem) {
firstLabel.text = "\(firstPercent) %"
firstMaskView.progressCircle(progressUnit: .percent(firstPercent))
firstPercent += 10
}
@IBAction func secondTestAction(_ sender: UIBarButtonItem) {
secondLabel.text = "\(CGFloat(secondBasisPoint) / 100.0) %"
secondMaskView.progressCircle(type: .once(0.25), progressUnit: .basisPoint(secondBasisPoint))
secondBasisPoint += 1250
}
@IBAction func resetAction(_ sender: UIBarButtonItem) {
resetSetting()
}
}
extension ViewController: WWProgressMaskView.Delegate {
func progressMaskViewAngle(_ progressMaskView: WWProgressMaskView, from startAngle: CGFloat, to endAngle: CGFloat) {
wwPrint("\(progressMaskView) => from \(startAngle) to \(endAngle)")
}
}
private extension ViewController {
func initSetting() {
self.title = "WWProgressMaskView"
// secondMaskView.setting(originalAngle: 225, lineWidth: 20, clockwise: false, lineCap: .round, lineGap: -18, innerStartAngle: 225, innerEndAngle: 495)
secondMaskView.setting(originalAngle: 135, lineWidth: 20, clockwise: true, hiddenMarkerView: false, lineCap: .round, lineGap: -18, markerImage: UIImage(named: "dollar"), innerStartAngle: 135, innerEndAngle: -135)
secondMaskView.delegate = self
}
func resetSetting() {
firstPercent = 0
secondBasisPoint = 0
secondLabel.text = "\(CGFloat(secondBasisPoint) / 100.0) %"
firstLabel.text = "\(firstPercent) %"
firstMaskView.progressCircle(progressUnit: .percent(firstPercent))
secondMaskView.progressCircle(type: .once(0.25), progressUnit: .basisPoint(secondBasisPoint))
}
}