Поиск по сайту:

Индикатор выполнения iOS (просмотр хода выполнения)


В этом руководстве мы обсудим компонент UIProgressView и создадим индикатор выполнения в нашем приложении iOS.

Индикатор выполнения iOS — UIProgressView

Свойства представления прогресса iOS

ProgressView имеет следующие свойства:

  • progressTintColor — используется для изменения UIColor части прогресса, т. е. заполненной части в ProgressView.
  • trackTintColor — используется для изменения UIColor дорожки, т. е. незаполненной части ProgressView.
  • ProgressBarStyle — есть два стиля: по умолчанию и полоса. Стиль полосы имеет прозрачную дорожку.
  • trackImage — здесь вместо цвета для незаполненной части используется изображение.
  • progressImage — изображение используется для отображения хода выполнения.

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

Увеличение высоты ProgressView

Мы можем изменить высоту ProgressView следующим образом:

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

Закругленные углы 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
    }

iOSProgressView