EasyStepIndicator

中文｜English

Github

给步骤指示器加入更多的属性,更多可定制的样式

背景

因为自身项目需要, fork了https://github.com/chenyun122/StepIndicator 做出了一些改良,这个步骤指示器能提供更多的属性,比如虚线线条,虚线边框,指示器内文字,步骤描述文字 将来会继续做更多的样式

安装方法

pod 'EasyStepIndicator'

使用

如果你使用Storyboard

@IBOutlet weak var indicator: EasyStepIndicator!

如果你要设置步骤进度的方向

如果要在Storyboard完成所有的工作

图中属性在下面有介绍

如果你用代码

    self.indicator = EasyStepIndicator.init(frame: CGRect.init(origin: CGPoint.zero, size: CGSize.init(width: self.view.bounds.width, height: self.view.bounds.width/2)))
    self.indicator?.center = self.view.center
    indicator?.numberOfSteps = 4 // 必须第一时间赋予
    self.view.addSubview(indicator!)

Storyboard和代码的公共部分

如果你要设置圈内文字和描述文字

self.indicator.dataSource = self

extension VerticalController:EasyStepIndicatorDataSource {
    func characterForStep(indicator: EasyStepIndicator, index: Int) -> String {
        ["1","B","2","D"][index]
    }
    
    func titleForStep(indicator: EasyStepIndicator, index: Int) -> String {
        ["Yours faithfully", " This is to introduce Mr. Frank Jones, our new marketing specialist who will be in London from April 5 to mid April on business. We are pleased to introduce Mr. Wang You, our import manager of Textiles Department. Mr. Wang is spending three weeks in your city to develop our business with chief manufactures and to make purchases of decorative fabrics for the coming season.", "Track progress", "Finishes\ninvestigation"][index]
    }
}

如果你要单独设置每个圈

self.indicator.delegate = self

extension VerticalController :EasyStepIndicatorDelegate {

     func stepConfigForStep(indicator: EasyStepIndicator, index: Int, config: inout StepConfig){
         if index == 2{
             config.radius = 30
         }
         if index == 3 {
             config.stepText.fontSize = 30
         }
         config.stepText.colors.complete = randomColor()
         config.stepText.colors.incomplete = randomColor()
         config.annular.colors.complete = randomColor()
         config.annular.colors.incomplete = randomColor()
         config.tint.colors.complete = randomColor()
         config.tint.colors.incomplete = randomColor()
     }
     
     func lineConfigForProcess(indicator: EasyStepIndicator, index: Int, config:inout LineConfig){
         config.colors.complete = randomColor()
         config.colors.incomplete = randomColor()
     }
     
     func titleConfigForStep(indicator: EasyStepIndicator, index: Int, config:inout TitleConfig){
         config.colors.complete = randomColor()
         config.colors.incomplete = randomColor()
     }
 }

你可以对每一个元素的每个属性做出自己的定制

属性列表

Storyboard可用属性

可代码配置属性

关于 alignmentMode

public var alignmentMode: AlignmentMode = .center

关于shouldStepLineFitDescriptionText

    func shouldStepLineFitDescriptionText() -> Bool {
        false
    }

true:整个指示器的长度随着描述内容的多少而变化

false:整个指示器的长度固定为superview长度

TODO

欢迎大家提意见和建议

• 上传到Cocoapods;
• 描述文字适配垂直方向;
• Demo
• 代码描述
• 将超出部分显示为 "..."
• 自适应超出部分设置为滚动
• 自定义描述部分的View(类似于"高德地图"中交通路线和"车来了"中公交动态的样子),不限于文字