Horizontal Linear Progress Bar like Android in iOS

Horizontal Linear Progress Bar like Android in iOS

Introduction

Progress bars are a common UI element used to visually represent the progress of a task or operation. Android and iOS have distinct styles and approaches for implementing progress bars. This article aims to guide you on creating a horizontal linear progress bar in iOS that closely resembles the style found in Android.

Android Progress Bar Style

Android’s progress bars are typically characterized by:

• A solid, rectangular background
• A distinct, colored progress indicator bar filling the background
• Optional text labels for percentage or progress details

iOS Implementation using UIProgressView

In iOS, the `UIProgressView` class provides the foundation for implementing progress bars. Here’s a step-by-step guide to achieve the Android-like style:

1. Setup and Customization

import UIKit

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

    override func viewDidLoad() {
        super.viewDidLoad()
        // Set background color
        progressBar.trackTintColor = UIColor.lightGray
        // Set progress indicator color
        progressBar.progressTintColor = UIColor.blue
        // Set initial progress
        progressBar.progress = 0.5
    }

    // Function to update progress
    func updateProgress(progress: Float) {
        progressBar.progress = progress
    }
}

2. Updating Progress

Use the `progress` property of `UIProgressView` to update the progress dynamically:

// Example: Updating progress after a delay
DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
    self.updateProgress(progress: 0.8)
}

3. Adding Text Labels

To add text labels, you can utilize a `UILabel` placed alongside the `UIProgressView`:

@IBOutlet weak var progressLabel: UILabel!

// Update label with percentage
progressLabel.text = String(format: "%.0f%%", progressBar.progress * 100)

Comparison

| Feature | Android | iOS |
|—|—|—|
| Background | Solid rectangle | Gradient background (default) |
| Progress Indicator | Solid color | Gradient indicator (default) |
| Text Labels | Optional, built-in | Requires separate label |

Conclusion

By leveraging the `UIProgressView` and applying suitable customizations, you can create a horizontal linear progress bar in iOS that closely emulates the visual style commonly found in Android applications. This approach ensures a consistent and familiar user experience across different platforms.