eas

EasyStepIndicator

More attributes for a step indicator, indicates steps with a easy way

Showing:

Popularity

Downloads/wk

0

GitHub Stars

79

Maintenance

Last Commit

1yr ago

Contributors

0

Package

Dependencies

0

License

MIT

Categories

Readme

EasyStepIndicator

English

Github

欢迎大家给意见,给Star

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

M3dU3t.gif

背景

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

安装方法

pod 'EasyStepIndicator'

使用

如果你使用Storyboard

KYvweU.png
@IBOutlet weak var indicator: EasyStepIndicator!

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

K6nd0J.png

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

如果要在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可用属性
<img src="https://s2.ax1x.com/2019/10/23/KYvUyV.png" alt="KYvUyV.png" border="0" />

| 属性名 | 描述  | 图中位置 |
|:--------------------:|:---------------------------:|:----------------------------:|
| 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|每个标题和起始和圆圈的中心对齐|

<img src="https://s2.ax1x.com/2019/11/07/MiXIu6.gif" alt="MiXIu6.gif" border="0" />

### 关于shouldStepLineFitDescriptionText
```swift
    func shouldStepLineFitDescriptionText() -> Bool {
        false
    }

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

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

MiXvvt.gif

TODO

欢迎大家提意见和建议

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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100