yonat / stepprogressview

Step-by-step progress view with labels and shapes. A good replacement for UIActivityIndicatorView and UIProgressView.

StepProgressView

Step-by-step progress view with labels and shapes. A good replacement for UIActivityIndicatorView and UIProgressView.

Usage

let progressView   = StepProgressView(frame: view.bounds)
progressView.steps = ["First", "Second", "Third", "Last"]
progressView.details = [0: "The beginning", 3: "The end"] // appears below step title

progressView.currentStep = 0 // started first step
...
progressView.currentStep = 4 // all done

SwiftUI Usage

StepsView(currentStep: $step, steps: ["First", "Second", "Third", "Done"])
    .stepShape(.rhombus)

Changing Appearance

The properties below can be set in Interface Builder, in code, or through a UIAppearance proxy (e.g., StepProgressView.appearance().stepShape = .circle). When using SwiftUI you can set them in the StepsView initializer or using SwiftUI view modifiers.

Shape of the step icons:

progressView.stepShape = .circle
progressView.firstStepShape = .rhombus
progressView.lastStepShape = .square
// also available: .triangle, .downTriangle

Text fonts and sizes:

progressView.textFont = myFont
progressView.detailFont = anotherFont

Line size spacing:

progressView.lineWidth = 2.5
progressView.verticalPadding = 8 // between steps (0 => default based on textFont)
progressView.horizontalPadding: 8 // between shape and text (0 => default based on textFont)

Colors:

progressView.tintColor = myGeneralTintColor

// alternatively:

progressView.currentStepColor = .red
progressView.pastStepColor = .gray
progressView.futureStepColor = .gray

progressView.currentStepFillColor = .yellow
progressView.pastStepFillColor = .gray
progressView.futureStepFillColor = .lightGray

progressView.currentTextColor = .blue
progressView.pastTextColor = .gray
progressView.futureTextColor = .lightGray
progressView.currentDetailColor = .cyan // nil => use currentStepColor

Installation

CocoaPods:

pod 'StepProgressView'

Legacy versions:

Swift version	StepProgressView version
4.0 (Xcode 9.4)	pod 'MiniLayout', '~> 1.2.1' pod 'StepProgressView', '~> 1.4.1'
3	pod 'MiniLayout', '~> 1.1.0' pod 'StepProgressView', '~> 1.3.0'
2.3	pod 'MiniLayout', '~> 1.0.1' pod 'StepProgressView', '~> 1.2.1'

Swift Package Manager:

dependencies: [
    .package(url: "https://github.com/yonat/StepProgressView", from: "1.6.5")
]

Meta

@yonatsharon

https://github.com/yonat/StepProgressView

stepprogressview's Issues

Is there a way to get the view's height

Is there a way to get the StepProgressView's height?

Can we rearrange the stepper in between the title and description

hi,
Can we design the title to the left and sub description to the right by placing the stepper(line view) in the middle of the both. If possible, then pls help.

Reversed Flow

Hi, How can I reversed the steps for example the last step would be on upper most .