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高度的一半。