iOS进度条

时间:2020-02-23 14:45:54  来源:igfitidea点击:

在本教程中,我们将讨论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高度的一半。