Progress Views (UIProgressView)

What is UIProgressView?

UIProgressView is a UI component in iOS that visually represents task progress as a horizontal bar. It is commonly used for downloads, file uploads, loading indicators, and background tasks.

---

1. Adding UIProgressView in Storyboard

1. Open Main.storyboard.
2. Drag and drop a UIProgressView onto the ViewController.
3. Create an IBOutlet in ViewController.swift: @IBOutlet weak var progressView: UIProgressView!
4. Set its progress using: progressView.progress = 0.5 // 50% completion

---

2. Setting Progress Programmatically

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var progressView: UIProgressView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Set initial progress
        progressView.progress = 0.0
    }

    @IBAction func startProgress(_ sender: UIButton) {
        progressView.progress = 0.75 // 75% completion
    }
}

✅ Effect: The progress bar updates when the button is pressed.

---

3. Animating Progress Updates

@IBAction func animateProgress(_ sender: UIButton) {
    progressView.setProgress(1.0, animated: true)
}

✅ Effect: Smooth animation from current progress to 100%.

---

4. Incremental Progress Updates (Simulating Loading)

var progress: Float = 0.0
var timer: Timer?

@IBAction func startLoading(_ sender: UIButton) {
    progress = 0.0
    progressView.progress = 0.0
    
    timer = Timer.scheduledTimer(timeInterval: 0.2, target: self, selector: #selector(updateProgress), userInfo: nil, repeats: true)
}

@objc func updateProgress() {
    if progress < 1.0 {
        progress += 0.1
        progressView.setProgress(progress, animated: true)
    } else {
        timer?.invalidate() // Stop the timer
    }
}

✅ Effect: Progress bar gradually fills up over time.

---

5. Customizing UIProgressView Appearance

override func viewDidLoad() {
    super.viewDidLoad()

    progressView.progressTintColor = .blue  // Filled progress color
    progressView.trackTintColor = .lightGray // Unfilled track color
    progressView.layer.cornerRadius = 5
    progressView.clipsToBounds = true
}

✅ Effect:

• Blue progress bar
• Light gray background
• Rounded corners

---

6. UIProgressView with Download Task (URLSession)

import UIKit

class ViewController: UIViewController, URLSessionDownloadDelegate {
    @IBOutlet weak var progressView: UIProgressView!

    override func viewDidLoad() {
        super.viewDidLoad()
        progressView.progress = 0.0
    }

    @IBAction func startDownload(_ sender: UIButton) {
        let url = URL(string: "https://example.com/largefile.zip")!
        let session = URLSession(configuration: .default, delegate: self, delegateQueue: OperationQueue.main)
        let downloadTask = session.downloadTask(with: url)
        downloadTask.resume()
    }

    func urlSession(_ session: URLSession, downloadTask: URLSessionDownloadTask, didWriteData bytesWritten: Int64, totalBytesWritten: Int64, totalBytesExpectedToWrite: Int64) {
        let progress = Float(totalBytesWritten) / Float(totalBytesExpectedToWrite)
        progressView.setProgress(progress, animated: true)
    }
}

✅ Effect: Progress updates dynamically as a file downloads.

---

7. UIProgressView with Activity Indicator

@IBOutlet weak var activityIndicator: UIActivityIndicatorView!

@IBAction func startTask(_ sender: UIButton) {
    activityIndicator.startAnimating() // Show loader
    progressView.setProgress(0.0, animated: false)

    Timer.scheduledTimer(withTimeInterval: 2.0, repeats: false) { _ in
        self.progressView.setProgress(1.0, animated: true)
        self.activityIndicator.stopAnimating() // Hide loader
    }
}

✅ Effect:

• Shows activity indicator while progress loads.
• Hides the loader when progress reaches 100%.

---

8. Summary of UIProgressView Features

Feature	Code Example
Set Progress	progressView.progress = 0.5
Animate Progress	setProgress(1.0, animated: true)
Auto Increment Progress	Timer.scheduledTimer()
Custom Colors	progressTintColor, trackTintColor
Rounded Progress View	layer.cornerRadius = 5
Use with URLSession	URLSessionDownloadDelegate
Use with Activity Indicator	activityIndicator.startAnimating()

---

Conclusion

UIProgressView is a simple yet powerful component for showing task progress in iOS apps. It can be customized, animated, and combined with other UI elements like buttons, activity indicators, and download tasks.

Would you like help integrating UIProgressView into your app? 🚀