ios 添加导航栏视图_iOS进度栏（进度视图）

ios 添加导航栏视图

In this tutorial, we’ll be discussing the UIProgressView component and create a progress bar in our iOS Application.

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

iOS进度栏– UIProgressView (iOS Progress Bar – 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.

ProgressView用于显示任何长时间运行的活动的进度，例如下载/上传/等待Web服务对用户的响应。 这是至关重要的UI元素，如果缺少该元素，可能会给用户留下应用程序没有响应的印象。

Launch XCode Single View iOS Application. Let’s add the UIProgressView in our Main.storyboard

启动XCode Single View iOS应用程序。 让我们在Main.storyboard中添加UIProgressView

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.

ProgressView的值可以在0.0到1.0之间，并且将由蓝色表示。
超出此时间间隔的值将四舍五入为其中一个，具体取决于它是大于1.0还是小于0.0。

iOS进度视图属性 (iOS Progress View Properties)

ProgressView has the following properties:

ProgressView具有以下属性：

• progressTintColor – Used to change the UIColor of the progress part i.e. the filled part in the ProgressView.
  progressTintColor –用于更改进度部分的UIColor，即ProgressView中的填充部分。
• trackTintColor – Used to change the UIColor of the track i.e. the unfilled part of the ProgressView.
  trackTintColor –用于更改轨道的UIColor，即ProgressView的未填充部分。
• ProgressBarStyle – There are two styles: default and bar. The bar style has a transparent track.
  ProgressBarStyle –有两种样式：默认样式和条形样式。 条形样式具有透明的轨道。
• trackImage – Here an image is used instead of color for the unfilled part.
  trackImage –在这里，未填充的部分使用图像代替颜色。
• progressImage – Image is used to show the progress.
  progressImage –图像用于显示进度。

Let’s begin our implementation. Our Main.storyboard contains a button to start/stop the ProgressView.

让我们开始执行。 我们的Main.storyboard包含一个用于启动/停止ProgressView的按钮。

The code for the ViewController.swift class is given below:

下面给出了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 and IBActions are created by linking the Main.storyboard views to the Swift file.

通过将Main.storyboard视图链接到Swift文件来创建IBOutlet和IBAction。

We start a Timer when the Button is clicked which updates the progress bar through the selector function passed: updateProgressView.

当单击按钮时，我们启动一个Timer，它通过传递的选择器函数updateProgressView更新进度条。

Every alternate timer would toggle the style of the ProgressView.

每个备用计时器都将切换ProgressView的样式。

The output of the above application when run on the simulator is given below:

在模拟器上运行时，上述应用程序的输出如下：

增加ProgressView的高度 (Increasing the Height of the ProgressView)

We can change the height of the ProgressView in the following way:

我们可以通过以下方式更改ProgressView的高度：

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

This transforms the height by 8 times. Let’s see how it looks in the simulator.

这会将高度转换8倍。 让我们看看它在模拟器中的外观。

You can also change the height from the storyboard in the constraints:

您还可以在约束中从情节提要中更改高度：

The second approach is better since the first one might pixelate the ProgressView if we try to shape the edges.

第二种方法更好，因为如果尝试对边缘进行整形，则第一种方法可能将ProgressView像素化。

圆角ProgressBar (Rounded Corners ProgressBar)

Add the following code in the viewDidLoad() function.

在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
    }

We set the corner radius to half of the height of the ProgressView. Following is the output of the application with the updated code.

我们将拐角半径设置为ProgressView高度的一半。 以下是带有更新代码的应用程序的输出。

This brings an end to this tutorial. You can download the project from the link below:

本教程到此结束。 您可以从下面的链接下载项目：

iOSProgressView iOSProgressView

翻译自: https://www.journaldev.com/22011/ios-progress-bar-progress-view

ios 添加导航栏视图