Skip to content

Animated and fully customizable progress view with 2 styles: ring and bar.

License

Notifications You must be signed in to change notification settings

alxrguz/ALProgressView

Repository files navigation

ALProgressView

Navigation

Requirements

  • iOS 10.0 +
  • Swift 4.2 +

Installation

Swift Package Manager

The Swift Package Manager is a tool for managing the distribution of Swift code. It’s integrated with the Swift build system to automate the process of downloading, compiling, and linking dependencies.

To integrate ALProgressView click File -> Swift Package -> Add Package Dependency and insert:

https://github.com/alxrguz/ALProgressView

CocoaPods

ALProgressView is available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'ALProgressView'

Manually

If you prefer not to use either of the aforementioned dependency managers, you can integrate ALProgressView into your project manually. Put Source/ALProgressView folder in your Xcode project.

Usage

Quick Start

import ALProgressView

class MyViewController: UIViewController {

    private lazy var progressRing = ALProgressRing()
    private lazy var progressBar = ALProgressBar()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(progressRing)
        view.addSubview(progressRing)
      
      	// MARK: ALProgressRing
        
        // Setup layout 
        progressRing.translatesAutoresizingMaskIntoConstraints = false
        progressRing.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        progressRing.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
      	// Make sure to set the view size
        progressRing.widthAnchor.constraint(equalToConstant: 180).isActive = true
        progressRing.heightAnchor.constraint(equalToConstant: 180).isActive = true
      
      
        // MARK: ALProgressBar
      
        // Setup layout 
        progressBar.translatesAutoresizingMaskIntoConstraints = false
        progressBar.topAnchor.constraint(equalTo: progressRing.bottomAnchor, constant: 20).isActive = true
        progressBar.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        progressBar.widthAnchor.constraint(equalTo: titleLabel.widthAnchor).isActive = true
        // Make sure to set the view height
        progressBar.heightAnchor.constraint(equalToConstant: 10).isActive = true
      
       
        // Setting progress
        progressRing.setProgress(0.8, animated: true)
        progressBar.setProgress(0.6, animated: true)
    }
}

You can also run ExampleApp and play with the parameters there

Customization

General
Colors

You can customize the buttons, headers and indicators colors depending on their state.

/// Set track color
/// If you don't need a gradient, just set the same values for `startColor` and `endColor`
progressView.startColor = .systemPink 
progressView.endColor = .systemRed 

/// Set groove color
progressView.grooveColor = .systemRed 
Animation
progressView.duration = 2 // Duration of the ring's fill animation.
progressView.timingFunction = .easeOutExpo // Timing function of the ring's fill animation.

/// The following use of setProgress (_ value: Int, animated: Bool) 
/// will take into account the new parameters 
progressView.setProgress(0.8, animated: true)

Let's take a look at the timingFunction parameter, it is of type ALTimingFunction, which contains the following types of animations:

There is a good cheat sheet available here.

AlProgressRing
progressBar.startAngle = -.pi / 2 // The start angle of the ring to begin drawing.
progressRing.endAngle = 1.5 * .pi // The end angle of the ring to end drawing. 
progressRing.startGradientPoint = .init(x: 0.5, y: 0) // The starting poin of the gradient
progressRing.endGradientPoint = .init(x: 0.5, y: 1) // The ending position of the gradient.

// Sets the line width for progress ring and "groove" ring
progressRing.lineWidth = 10
// Or, if you need to separate these parameters, use
progressRing.ringWidth = 10 
progressRing.grooveWidth = 8 
AlProgressBar
progressBar.barEdgeInset = 1.5 // Distance between groove and progress bar.

License

ALProgressView is under MIT license. See the LICENSE file for more info.