iOS开发教程：进度条(UIProgressView)的实现与使用方法

2 年 ago
科, 雅
1 minute

在本教程中，我们将讨论UIProgressView组件，并在我们的iOS应用程序中创建一个进度条。

iOS进度条 – UIProgressView

进度视图（ProgressView）用于向用户显示任何长时间运行的活动（例如下载/上传/等待来自网络服务的响应）的进度。这是一个重要的用户界面元素，如果缺少此元素，用户可能会认为应用程序没有响应。启动XCode单视图iOS应用程序。让我们在Main.storyboard中添加UIProgressView。进度视图的值可以介于0.0和1.0之间，并通过蓝色来表示。超出此区间的值将四舍五入到其中之一，具体取决于它是大于1.0还是小于0.0。

iOS进度视图属性

进度视图具有以下属性：

  • progressTintColor – 用于更改进度部分的UIColor，即进度视图中已填充的部分。
  • trackTintColor – 用于更改轨道的UIColor，即进度视图中未填充的部分。
  • ProgressBarStyle – 有两种样式：默认（default）和条形（bar）。条形样式具有透明轨道。
  • trackImage – 这里使用图像代替颜色来表示未填充部分。
  • progressImage – 使用图像来显示进度。

让我们开始实施吧。我们的Main.storyboard中包含了一个按钮来启动/停止进度视图。下面是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("开始", for: .normal)
        }
        else{
        btn.setTitle("停止", 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()
        // 视图加载完成后进行任何额外的设置，通常是从nib加载的。
        progressView.progress = 0.0
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // 释放任何可以重新创建的资源。
    }
    
    @objc func updateProgressView(){
        progressView.progress += 0.1
        progressView.setProgress(progressView.progress, animated: true)
        if(progressView.progress == 1.0)
        {
            progressBarTimer.invalidate()
            isRunning = false
            btn.setTitle("开始", for: .normal)
        }
    }
}

通过将Main.storyboard视图链接到Swift文件，创建IBOutlet和IBActions。单击按钮时，我们启动一个计时器，通过传递的选择器函数updateProgressView来更新进度条。每隔一个定时器将切换进度视图的样式。在模拟器上运行以上应用程序的输出如下所示：

增加进度视图的高度

我们可以通过以下方式改变进度视图的高度。

progressView.transform = progressView.transform.scaledBy(x: 1, y: 8)

这将使高度增长8倍。让我们在模拟器中看看它的效果。您还可以通过Storyboard中的约束来更改高度：第二种方法更好，因为第一种方法如果我们尝试调整边缘形状可能会导致进度视图像素化。

圆角进度条

在viewDidLoad()函数中添加以下代码。

override func viewDidLoad() {
        super.viewDidLoad()
        // 视图加载完成后进行任何额外的设置，通常是从nib加载的。
        progressView.progress = 0.0
        
        progressView.layer.cornerRadius = 10
        progressView.clipsToBounds = true
        progressView.layer.sublayers![1].cornerRadius = 10
        progressView.subviews[1].clipsToBounds = true
    }

我们将进度视图的圆角设置为高度的一半。以下是应用程序使用更新后的代码的输出。这结束了本教程。您可以从下面的链接下载该项目。

iOS进度视图项目下载

iOS的进度视图

bannerAds