StepperView

用于步骤指示的 SwiftUI iOS 组件

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


StepperView


StepperViewLineLifeCycle

目录

特性

文档

StepperView 参考

安装

要运行示例项目，请克隆存储库，然后首先从 Example 目录运行 pod install。

CocoaPods

StepperView 可通过 CocoaPods 获得。要安装它，只需将以下行添加到您的 Podfile 中。

pod 'StepperView','~> 1.6.7'

Carthage

Carthage 是一个去中心化的依赖管理器，它可以构建您的依赖项并为您提供二进制框架。 要使用 Carthage 将 StepperView 集成到您的 Xcode 项目中，请在您的 Cartfile 中指定它

github "badrinathvm/stepperView" == 1.6.7

Swift Package Manager

StepperView 可通过 Swift Package Manager 获得。 要安装它，只需将其添加到您的 Package.swift 的 dependencies 中

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

要求

用例

example1 example2 example2 example2
lifecycle1 lifecycle2 lifecycle3 lifecycle3

iPhone

StepperView StepperViewWithPitStops StepperViewWithMultipleOptions

Apple Watch 支持

Watch_StepperView_Vertical Watch_StepperView_Icon Watch_StepperView_Horizontal Watch_StepperView_Pitstop

视图修饰符

.addSteps(_ steps: [View]) : 
          1. list of views to be closer to the 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` , `corner radius`
          2. Has the option of `defaults`, `custom` , `rounded`
          
.spacing(_ value: CGFloat): 
          1. spacing between each of the step views either vertically or horizontally
          
.autoSpacing(_ value: Bool):
          1. if set to `true` - Dynamically calculates the spacing between each of the steps.
          
.stepIndicatorMode(_ mode: StepperMode): 
          1. Step Indicator display modes either vertical or horizontal
          
.loadingAnimationTime(_ time: Double):
          1. controls the speed of the animation for step Indicator

.stepLifeCycles(_ lifecycle: [StepLifeCycle]):
          1. Can set the life cycle status for each of the steps as `completed`, `pending`
              
.addPitStops(_ steps: [View]):
          1. optional modifier
          2. list of views which will be displayed below the step text

.pitStopLineOptions(_ options: [StepperLineOptions])
          1. line customization `color` , `width` , `corner radius`
          
.stepperEdgeInsets(_ value: EdgeInsets)
         1. Provides custom `leading`, `trailing`, `top` & `bottom` spacing.

用法

Vertical Stepper View 

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.vertical)
        .spacing(30)
        .lineOptions(StepperLineOptions.custom(1, Colors.blue(.teal).rawValue))
}

Horizontal Stepper View 

import StepperView

let steps = [
    TextView(text: "Card details", font: Font.system(size: 12, weight: Font.Weight.regular)),
    TextView(text: "Application review", font: Font.system(size: 12, weight: Font.Weight.regular)),
    TextView(text: "Authenticate OTP", font: Font.system(size: 12, weight: Font.Weight.regular)),
    TextView(text: "Create password", font: Font.system(size: 12, weight: Font.Weight.regular))
]

let indicators = [
    StepperIndicationType.custom(Image(systemName:"1.circle.fill").font(.largeTitle).eraseToAnyView()),
    StepperIndicationType.custom(Image(systemName:"2.circle.fill").font(.largeTitle).eraseToAnyView()),
    StepperIndicationType.custom(Image(systemName:"3.circle.fill").font(.largeTitle).eraseToAnyView()),
    StepperIndicationType.custom(Image(systemName:"4.circle.fill").font(.largeTitle).eraseToAnyView())
]

var body: some View {
    StepperView()
        .addSteps(steps)
        .indicators(indicators)
        .stepIndicatorMode(StepperMode.horizontal)
        .lineOptions(StepperLineOptions.rounded(4, 8, Color.black)) 
        .stepLifeCycles([StepLifeCycle.completed, .completed, .completed, .pending])
        .spacing(50)
}

Pitstop Stepper View 

let steps = [TextView(text:"Manage Tasks", font: .system(size: 14, weight: .semibold)),
             TextView(text:"Branch", font: .system(size: 14, weight: .semibold)),
             TextView(text:"Commit", font: .system(size: 14, weight: .semibold)),
             TextView(text:"Code review", font: .system(size: 14, weight: .semibold)),
             TextView(text:"Merge and release", font: .system(size: 14, weight: .semibold))]

let indicators = [
    StepperIndicationType.custom(Image(systemName:"1.circle.fill").font(.largeTitle).eraseToAnyView()),
    StepperIndicationType.custom(Image(systemName:"2.circle.fill").font(.largeTitle).eraseToAnyView()),
    StepperIndicationType.custom(Image(systemName:"3.circle.fill").font(.largeTitle).eraseToAnyView()),
    StepperIndicationType.custom(Image(systemName:"4.circle.fill").font(.largeTitle).eraseToAnyView()),
    StepperIndicationType.custom(Image(systemName:"5.circle.fill").font(.largeTitle).eraseToAnyView())
]

let pitStopLineOptions = [
    StepperLineOptions.custom(1, Color.black),
    StepperLineOptions.custom(1, Color.black),
    StepperLineOptions.custom(1, Color.black),
    StepperLineOptions.custom(1, Color.black),
    StepperLineOptions.custom(1, Color.black)
]

let pitStops = [
    TextView(text:GithubPitstops.p1).eraseToAnyView(),
    TextView(text:GithubPitstops.p2).eraseToAnyView(),
    TextView(text:GithubPitstops.p3).eraseToAnyView(),
    TextView(text:GithubPitstops.p4).eraseToAnyView(),
    TextView(text:GithubPitstops.p5).eraseToAnyView()
]

var body: some View {
    StepperView()
        .addSteps(steps)
        .indicators(indicators)
        .addPitStops(pitStops)
        .pitStopLineOptions(pitStopLineOptions)
        .spacing(80) // auto calculates spacing between steps based on the content.
        .padding()
}

struct GithubPitstops {
    static var p1 = "Triage Notifications\nBrowse Repos\nCreate an issue"
    static var p2 = "Fork or Clone repo\ngit checkout -b branch\ngit stash"
    static var p3 = "git add -p\ngit diff .\ngit commit -m\ngit push origin branch"
    static var p4 = "Open pull request\ngit checkout pr-branch\nReview and comment"
    static var p5 = "View checks\ngit rebase\ngit merge\ngit tag"
}

自定义步骤指示器

NumberedCircleView (带数字的圆形视图)

此视图将数字或任何文本放置在圆圈内。

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

CircledIconView (带图标的圆形视图)

此视图将图标或图像嵌入到圆圈内。

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

更多示例

iOS 用例
watchOS 用例

StepperView_pistops StepperView_github_workflow StepperView_github_workflow

提及

SwiftUI Weekly #5
iOS Goodies #333
MBLT DEV DIGEST #302
Awesome iOS Newsletter #201
About-SwiftUI 文章
Better Programming - 6 个惊人的 SwiftUI 库
2021 年的 10 个 SwiftUI 库

使用 StepperView 的应用程序

WatchTo5K

作者

Badarinath Venkatnarayansetty。在 Twitter 或 LinkedIn 上关注并联系我

Buy Me A Coffee

贡献

欢迎提出功能请求、错误报告和拉取请求。有关更多详细信息，请参阅 贡献指南。

许可证

StepperView 在 MIT 许可证下可用。有关更多信息，请参阅 LICENSE 文件。