ProgressView

2025年3月17日 | 阅读 3 分钟

在 iOS 应用程序中，ProgressView 用于显示任务随时间的进度。ProgressView 是 UIProgressView 的实例，它继承了 UIView 类。

ProgressView 显示进度条，我们可以使用 UIProgressView 类的方法和属性来管理其样式。我们可以获取和设置与任务进度相关的数值。

属性和方法

序号	属性或方法	描述
1	var progress: Float	它表示进度条显示的当前进度。
2	func setProgress(Float, animated: Bool)	此方法用于设置进度条的进度。我们可以选择传递一个布尔值来确定动画是否开启。
3	var observedProgress: Progress?	它是用于更新进度视图的进度对象。
4	var progressViewStyle: UIProgressView.Style	它表示进度视图的当前图形样式。
5	var progressTintColor: UIColor?	它是为进度条已填充或完成的部分显示的颜色。
6	var progressImage: UIImage?	通过使用此属性，我们可以为进度条的已填充部分设置图像。
7	var trackTintColor: UIColor?	它是为进度条的未填充或未完成部分显示的颜色。
8	var trackImage: UIImage?	它是可以为进度条的未填充部分显示的图像。

将 ProgressView 添加到 Interface Builder。

要将 ProgressView 添加到故事板，请在对象库中搜索 UIProgressView，然后将结果拖到故事板，如下图所示。

为进度视图定义自动布局规则，以控制其位置和大小，以适应不同的屏幕尺寸。
设置 UIProgressView 的适当属性，以控制进度视图随时间的进度。

示例

在此示例中，我们将模拟注册示例，其中我们将提示用户通过填写姓名、电子邮件 ID 和密码在应用程序中注册。当用户点击提交按钮时，我们将向用户显示一个进度条，指示用户数据正在保存到数据库中。

界面生成器

要创建项目的界面，我们将向故事板添加四个带有注册标签的文本字段和一个提交按钮，并为它们定义自动布局规则，以控制它们的位置和大小，如下图所示。

现在，让我们添加进度视图和一个标签来指示界面的进度，如下图所示。

当用户点击提交按钮时，我们将执行一个计时器来表示进度视图的进度。

ViewController.swift

import UIKit


class ViewController: UIViewController {


    @IBOutlet weak var nameTF: UITextField!
    
    
    @IBOutlet weak var emailTF: UITextField!
    
    @IBOutlet weak var passwordTF: UITextField!
    
    
    @IBOutlet weak var CFPasswordTF: UITextField!
    
    @IBOutlet weak var progressView: UIProgressView!
    
    @IBOutlet weak var msgLbl: UILabel!


    @IBOutlet weak var sbmtBtn: UIButton!
    
    let progress = Progress(totalUnitCount: 4)
    
    var ratio: Float?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        progressView.isHidden = true
        ratio = 0
        progressView.progress = ratio!
        msgLbl.isHidden = true
        progressView.layer.cornerRadius = 10
        sbmtBtn.layer.cornerRadius = 10
    }
    
    @IBAction func clickedSubmitBtn(_ sender: Any) {
        if(nameTF.text != "" && emailTF.text != "" && passwordTF.text != ""){
        sbmtBtn.isHidden = true
        msgLbl.isHidden = false
        progressView.isHidden = false
            Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { (timer) in
                guard self.progress.isFinished == false else{
                    timer.invalidate()
                    self.msgLbl.text = "Data Saved"
                    return
                }
                self.progress.completedUnitCount += 1
                let progrsssFloat = Float(self.progress.fractionCompleted)
                self.progressView.setProgress(progrsssFloat, animated: true)
                
            }
        }
    }
}

输出