iOS 进度条(进度视图)

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

iOS 进度栏 - UIProgressView

ProgressView is used to display the progress of any long running activity such as downloading/uploading/waiting for a response from web service to the user. This is a vital UI element which when absent could give the users an impression that the application is not responding. Launch XCode Single View iOS Application. Let's add the UIProgressView in our Main.storyboard ios progressview add to storyboard ProgressView can have a value between 0.0 and 1.0 and would be indicated by the blue color. Values outside this interval would be rounded off to either of them depending on whether it's greater than 1.0 or less than 0.0.

iOS Progress 查看财产

ProgressView 具有以下属性:

  • progressTintColor - 用于更改进度部分的UIC颜色,即进度视图中的填充部分
  • trackTintColor - 用于更改进度视图的UIC颜色,即进度视图的未填充部分
  • ProgressBarStyle - 有两种风格:默认和栏。

Let's begin our implementation. Our Main.storyboard contains a button to start/stop the ProgressView. ios progressview main storyboard The code for the ViewController.swift class is given below:

 1import UIKit
 2
 3class ViewController: UIViewController {
 4
 5    @IBOutlet weak var btn: UIButton!
 6    var isRed = false
 7    var progressBarTimer: Timer!
 8    var isRunning = false
 9    @IBAction func btnStart(_ sender: Any) {
10
11        if(isRunning){
12            progressBarTimer.invalidate()
13            btn.setTitle("Start", for: .normal)
14        }
15        else{
16        btn.setTitle("Stop", for: .normal)
17        progressView.progress = 0.0
18        self.progressBarTimer = Timer.scheduledTimer(timeInterval: 0.5, target: self, selector: #selector(ViewController.updateProgressView), userInfo: nil, repeats: true)
19        if(isRed){
20            progressView.progressTintColor = UIColor.blue
21            progressView.progressViewStyle = .default
22        }
23        else{
24            progressView.progressTintColor = UIColor.red
25            progressView.progressViewStyle = .bar
26
27        }
28        isRed = !isRed
29        }
30        isRunning = !isRunning
31    }
32    @IBOutlet weak var progressView: UIProgressView!
33    override func viewDidLoad() {
34        super.viewDidLoad()
35        // Do any additional setup after loading the view, typically from a nib.
36        progressView.progress = 0.0
37    }
38
39    override func didReceiveMemoryWarning() {
40        super.didReceiveMemoryWarning()
41        // Dispose of any resources that can be recreated.
42    }
43
44    @objc func updateProgressView(){
45        progressView.progress += 0.1
46        progressView.setProgress(progressView.progress, animated: true)
47        if(progressView.progress == 1.0)
48        {
49            progressBarTimer.invalidate()
50            isRunning = false
51            btn.setTitle("Start", for: .normal)
52        }
53    }
54}

IBOutlet and IBActions are created by linking the Main.storyboard views to the Swift file. We start a Timer when the Button is clicked which updates the progress bar through the selector function passed: updateProgressView. Every alternate timer would toggle the style of the ProgressView. The output of the above application when run on the simulator is given below: ios progressview output

提高 ProgressView 的高度

我们可以以以下方式更改 ProgressView 的高度:

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

This transforms the height by 8 times. Let's see how it looks in the simulator. ios progressview change height You can also change the height from the storyboard in the constraints: ios progressview change height constraint The second approach is better since the first one might pixelate the ProgressView if we try to shape the edges.

圆形角落进展

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

 1override func viewDidLoad() {
 2        super.viewDidLoad()
 3        // Do any additional setup after loading the view, typically from a nib.
 4        progressView.progress = 0.0
 5
 6        progressView.layer.cornerRadius = 10
 7        progressView.clipsToBounds = true
 8        progressView.layer.sublayers![1].cornerRadius = 10
 9        progressView.subviews[1].clipsToBounds = true
10    }

We set the corner radius to half of the height of the ProgressView. Following is the output of the application with the updated code. ios rounded progress bar This brings an end to this tutorial. You can download the project from the link below:

iOSProgressView

Published At
Categories with 技术
Tagged with
comments powered by Disqus