웹사이트 검색

iOS 진행률 표시줄(진행률 보기)


이 자습서에서는 UIProgressView 구성 요소에 대해 설명하고 iOS 응용 프로그램에서 진행률 표시줄을 만듭니다.

iOS 진행률 표시줄 - UIProgressView

iOS 진행률 보기 속성

ProgressView에는 다음과 같은 속성이 있습니다.

  • progressTintColor - 진행률 부분, 즉 ProgressView의 채워진 부분의 UIColor를 변경하는 데 사용됩니다.
  • 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