iOS进度条
在本教程中,我们将讨论UIProgressView组件,并在iOS应用程序中创建进度条。
iOS进度条– UIProgressView
ProgressView用于显示任何长时间运行的活动的进度,例如下载/上传/等待Web服务对用户的响应。
这是至关重要的UI元素,如果缺少该元素,可能会给用户留下应用程序没有响应的印象。
启动XCode Single View iOS应用程序。
让我们在Main.storyboard中添加UIProgressView
ProgressView的值可以在0.0到1.0之间,并且将由蓝色表示。
超出此时间间隔的值将四舍五入为其中一个,具体取决于它是大于1.0还是小于0.0。
iOS进度视图属性
ProgressView具有以下属性:
progressTintColor-用于更改进度部分的UIColor,即ProgressView中的填充部分。trackTintColor–用于更改轨道的UIColor,即ProgressView的未填充部分。ProgressBarStyle–有两种样式:default和bar。
条形样式具有透明的轨道。trackImage-此处未填充的部分使用图像代替颜色。
progressImage–图片用于显示进度。
让我们开始实施。
我们的" Main.storyboard"包含一个用于启动/停止ProgressView的按钮。
下面给出了ViewController.swift类的代码:
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var btn: UIButton!
var isRed = false
var progressBarTimer: Timer!
var isRunning = false
@IBAction func btnStart(_ sender: Any) {
if(isRunning){
progressBarTimer.invalidate()
btn.setTitle("Start", for: .normal)
}
else{
btn.setTitle("Stop", for: .normal)
progressView.progress = 0.0
self.progressBarTimer = Timer.scheduledTimer(timeInterval: 0.5, target: self, selector: #selector(ViewController.updateProgressView), userInfo: nil, repeats: true)
if(isRed){
progressView.progressTintColor = UIColor.blue
progressView.progressViewStyle = .default
}
else{
progressView.progressTintColor = UIColor.red
progressView.progressViewStyle = .bar
}
isRed = !isRed
}
isRunning = !isRunning
}
@IBOutlet weak var progressView: UIProgressView!
override func viewDidLoad() {
super.viewDidLoad()
//Do any additional setup after loading the view, typically from a nib.
progressView.progress = 0.0
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
//Dispose of any resources that can be recreated.
}
@objc func updateProgressView(){
progressView.progress += 0.1
progressView.setProgress(progressView.progress, animated: true)
if(progressView.progress == 1.0)
{
progressBarTimer.invalidate()
isRunning = false
btn.setTitle("Start", for: .normal)
}
}
}
IBOutlet和IBAction是通过将Main.storyboard视图链接到Swift文件来创建的。
当单击按钮时,我们启动一个Timer,它通过传递的选择器函数updateProgressView更新进度条。
每个备用计时器都将切换ProgressView的样式。
在模拟器上运行时,上述应用程序的输出如下:
增加ProgressView的高度
我们可以通过以下方式更改ProgressView的高度:
progressView.transform = progressView.transform.scaledBy(x: 1, y: 8)
这会将高度转换8倍。
让我们看看它在模拟器中的外观。
您还可以在约束中从情节提要中更改高度:
第二种方法更好,因为如果我们尝试对边缘进行整形,则第一种方法可能将ProgressView像素化。
圆角ProgressBar
在viewDidLoad()函数中添加以下代码。
override func viewDidLoad() {
super.viewDidLoad()
//Do any additional setup after loading the view, typically from a nib.
progressView.progress = 0.0
progressView.layer.cornerRadius = 10
progressView.clipsToBounds = true
progressView.layer.sublayers![1].cornerRadius = 10
progressView.subviews[1].clipsToBounds = true
}
我们将拐角半径设置为ProgressView高度的一半。

