Swiftpack.co - Package - badrinathvm/StepperView
Swiftpack.co is a collection of thousands of indexed Swift packages. Search packages.

StepperView

SwiftUI iOS component for Step Indications

CI Status License Platform Version Swift Package Manager compatible Carthage compatible documentation Twitter


StepperView

Table of Contents

Features

  • Support for Vertical and Horizontal Alignments.
  • iOS and WatchOS capabilities
  • Support for Circle, Image, Custom View, Animated Step Indicators
  • Customizable line,spacing & animation options.
  • Pitstop feature to add intermediate stages between Step Indicators

Documentation

StepperView Reference

Installation

To run the example project, clone the repo, and run pod install from the Example directory first.

CocoaPods

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

pod 'StepperView','~> 1.5.5'

Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks. To integrate StepperView into your Xcode project using Carthage, specify it in your Cartfile:

github "badrinathvm/stepperView" == 1.5.5

Swift Package Manager

StepperView is available through Swift Package Manager. To install it, simply add it to the dependencies of your Package.swift

dependencies: [
      .package(url: "https://github.com/badrinathvm/StepperView.git", from: "1.5.5")
]

Requirements

  • iOS 13.0+
  • Xcode 11.2+
  • Swift 5.0+
  • CocoaPods 1.6.1+

Usecase

example1 example2 example2 example2

iPhone

StepperView StepperViewWithPitStops StepperViewWithMultipleOptions

Apple Watch Support

Watch_StepperView_Vertical Watch_StepperView_Icon Watch_StepperView_Horizontal Watch_StepperView_Pitstop

Usage

import StepperView

let steps = [ Text("Cart").font(.caption),
              Text("Delivery Address").font(.caption),
              Text("Order Summary").font(.caption),
              Text("Payment Method").font(.caption),
              Text("Track").font(.caption)]

let indicationTypes = [StepperIndicationType.custom(NumberedCircleView(text: "1")),
                        .custom(NumberedCircleView(text: "2")),
                        .custom(NumberedCircleView(text: "3")),
                        .custom(NumberedCircleView(text: "4")),
                        .custom(NumberedCircleView(text: "5"))]
                        
var body: some View {
    StepperView()
        .addSteps(steps)
        .indicators(indicationTypes)
        .stepIndicatorMode(StepperMode.horizontal)
        .spacing(50)
        .lineOptions(StepperLineOptions.custom(1, Colors.blue(.teal).rawValue))
}

View Modifiers

.addSteps(_ steps: [View]) : 
          1. list of views to be closer to indicator

.alignments(_ alignments: [StepperAlignment])
          1. optional modifier 
          2. defaults to .center, available with custom options either .top, .center, .bottom
          
.indicatorTypes(_ indicators:[StepperIndicationType]): 
          1. modifier to customize the step indications
          2. provides enum with cases .circle(color, width), .image(Image, width), .custom(AnyView), .animation(AnyView)
          
.lineOptions(_ options: StepperLineOptions): 
          1. line customization `Color` , `width`
          
.spacing(_ value: CGFloat): 
          1. spacing between each of the step views either vertically horizontally
          
.stepIndicatorMode(_ mode: StepperMode): 
          1. Step Indicator display modes either vertical, horizontal
          
.addPitStops(_ steps: [PitStopStep])
          1. optional modifier
          2. `PitStopStep` - structure that provides option to provide `View`, line customizations
          
.loadingAnimationTime(_ time: Double)
          1. controls the speed of the animation for step Indicator
          
.autoSpacing(true)
          1. Dynamcially calclulates the spacing between each of the steps.

Custom Step Indicators

NumberedCircleView

This view places the number or any text inside the circle.

NumberedCircleView(text: "1", width: 40)

CircledIconView

This view embeds a icon or image inside the circle.

CircledIconView(image: Image("flag"), width: 40, strokeColor: Color.red)

More Examples

iOS Usecases
watchOS Usecases

StepperView_pistops StepperView_github_workflow StepperView_github_workflow

Mentions

SwiftUI Weekly #5
iOS Goodies #333
MBLT DEV DIGEST #302
Awesome iOS Newsletter #201
About-SwiftUI Articles
Better Programming Medium Article

Apps Using StepperView

WatchTo5K

Author

Badarinath Venkatnarayansetty.Follow and contact me on Twitter or LinkedIn

Buy Me A Coffee

Contribution

Feature requests, bug reports, and pull requests are all welcome. Refer Contributing Guidelines for more details.

License

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

Github

link
Stars: 255

Related Packages

Releases

watchOS Alignment Fixes - 2021-01-17T22:44:12

Auto Spacing and Alignment Fixes for Horizontal Stepper View - 2021-01-11T21:17:33

  • Auto spacing capability for Horizontal stepper mode
  • Width and alignment fixes for Horizontal stepper view.

Alignment Fixes - 2021-01-11T16:56:32

Auto Spacing feature for Vertical Mode Step Indicator - 2020-06-15T16:39:14

  1. Dynamic space calculation between the steps in Vertical Stepper View using .autoSpacing(true)
  2. Readme updates for the usage and example is provided in https://github.com/badrinathvm/StepperView/blob/master/Example/StepperView/ExampleView6.swift#L50

Adding Steps Dynamically - 2020-06-07T20:46:56

  1. Feature for adding steps dynamically ( https://github.com/badrinathvm/StepperView/issues/52 )
  2. Example added for step dynamically (https://github.com/badrinathvm/StepperView/blob/master/Example/StepperView/ExampleView9.swift)
  3. Readme and Jazzy documents enhancements.

Animated Stepper Indciators - 2020-05-25T21:29:11

Extended the option of animated circular step Indicators for every step. Jazzy docs updated for 1.5.0 iOS and watchOS Github examples added

Scrolling fixes for Pitstop usecase, Read me Table of Contents. - 2020-05-18T17:12:43

  1. Scrolling fixes for Pitstop , Added examples for both watchKit and iOS
  2. Readme updates- Added table of Contents section.
  3. Refer More examples section for iPhone and WatchOS examples.
  4. Addition of screenshots for more examples.

Support for Apple Watch - 2020-05-10T05:26:30

StepperView is now available for AppleWatch Use-cases and example scenarios added for Apple watch

Support for Carthage - 2020-05-04T01:59:35

Support for Carthage Readme and Jazzy documentation on how to use via Carthage.

PitStop Feature Jazzy documentation and Enhancements - 2020-04-28T17:39:36

  1. Implementation of Pitstop feature for Vertical mode of step Indicator
  2. Support for CircledIconView for Step Indicator
  3. Jazzy documentation with 100% documentation coverage for usability
  4. Readme enhancements and examples additions for usage
  5. Addition of new modifiers .addPitStops(_ steps: [PitStopStep])

Addition of View Modifiers to StepperView - 2020-04-19T02:39:52

  • Adding new view Modifiers for StepperView
    • .addSteps(_ steps: [View])
    • .alignments(_ alignments: [StepperAlignment])
    • .indicatorTypes(_ indicators:[StepperIndicationType])
    • .lineOptions(_ options: StepperLineOptions)
    • .spacing(_ value: CGFloat)
    • .stepIndicatorMode(_ mode: StepperMode)
  • Unit test fixes
  • Added new Supporting View for Indicators like NumberedCircleView

Addition of Horizontal StepIndicator - 2020-04-16T17:45:59

Support for Horizontal StepIndicator Added a new parameter for StepIndicatorMode enum Addition of Community templates like Pull request, Code of Conduct, Issues

Adoption of SwiftLint , SnapShot Testing - 2020-04-14T23:52:44

  1. Configured github hook for SwiftLint
  2. Snapshot Unit tests for Example Views
  3. Fixing Swift Lint violations.
  4. Uni tests for Swift Package Manager files.

Support for Multiple Alignments - 2020-04-13T19:35:10

Support for having step Indicator handling all possible combinations for alignments. Demonstrating examples via multiple tabs. Bug Fixes and Enhancements.