Awesome Open Source
Awesome Open Source

EasyStepIndicator

English

Github

欢迎大家给意见,给Star

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

M3dU3t.gif

背景

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

安装方法

pod 'EasyStepIndicator'

使用

如果你使用Storyboard

KYvweU.png
@IBOutlet weak var indicator: EasyStepIndicator!

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

K6nd0J.png

Raw值 意义 描述
0 leftToRight 从左到右
1 rightToLeft 从右到左
2 topToBottom 从顶到底
3 bottomToTop 从底到顶

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

图中属性在下面有介绍

MiFJ56.png

如果你用代码

    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可用属性

KYvUyV.png
属性名 描述 图中位置
numberOfSteps(必须的) 总步骤数量(必须大于1)
currentStep 当前步骤
currentStepAsIncomplete 当前步骤视为未完成
circleRadius 圆大小
circleAnnularIncompleteColor 指示圆框未完成时候的颜色
circleAnnularCompleteColor 指示圆框完成时候的颜色
circleStrokeWidth 指示圆框线条的宽度
circleAnnularLineDashWidth 指示圆框虚线长度
circleAnnularLineDashMargin 指示圆框虚线间隔
circleTintIncompleteColor 圆内未完成时候的颜色 ④对应的圆
circleTintCompleteColor 圆内完成时候的颜色
lineIncompleteColor 指向线条未完成的颜色
lineCompleteColor 指向线条完成的颜色 A-B之间的颜色
lineMargin 指向线条离圆形的距离
lineStrokeWidth 指向线条宽度
lineImaginaryMargin 指向线条虚线间隔
lineImaginaryWidth 指向线条小虚线宽度
direction 进度方向,写代码时候可以设置,在枚举值中选择 a-b-c-d
directionRaw 进度方向的Int值,用Storyboard中选择方向
circleTextIncompleteColor 圆形内文字未完成时候颜色 C的颜色
circleTextCompleteColor 圆形内文字完成时候颜色 A的颜色
stepDescriptionTextIncompleteColor 描述文字未完成时候的颜色 11
stepDescriptionTextCompleteColor 描述文字完成时候的颜色 13
stepDescriptionTextMargin Indicator和Description之间Margin 12
stepDescriptionTextFontSize 步骤描述文字的大小 13
maxContentWidth 内容最大宽度(仅仅横向可用)
minContentMargin 描述文字强制最小间距
contentScrollView 内容滚动视图
freezeZone 冻结区域,区域将没有内容,留白

可代码配置属性

类名 属性 描述
StepConfig stepText 圈内文字相关属性
StepConfig annular 圆环相关属性
StepConfig tint 圆圈内的相关属性
StepConfig radius 圆圈半径
StepConfig stepIndex 步骤序号
StepConfig titleMargin 描述文字和圆圈底部的距离
- - -
LineConfig colors 线的颜色相关属性
LineConfig dashPatternComplete 已完成线的虚线相关属性
LineConfig dashPatternIncomplete 未完成线的虚线相关属性
LineConfig strokeWidth 线宽度
LineConfig marginBetweenCircle 线条离圆形的距离
LineConfig processIndex 线条序号
- - -
TitleConfig title 描述标题相关属性
TitleConfig colors 描述标题颜色相关属性
TitleConfig stepIndex 描述标题序号

关于 alignmentMode

public var alignmentMode: AlignmentMode = .center

描述
top 每个标题和圆圈的起始对齐
center 每个标题和起始和圆圈的中心对齐
MiXIu6.gif

关于shouldStepLineFitDescriptionText

    func shouldStepLineFitDescriptionText() -> Bool {
        false
    }

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

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

MiXvvt.gif

TODO

欢迎大家提意见和建议

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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Swift (95,626
Progress (413
Indicator (318
Storyboard (201
Related Projects