用Swift作了一款步驟指示器

EasyStepIndicator

English

Github

歡迎你們給意見,給Star

給步驟指示器加入更多的屬性,更多可定製的樣式

背景

由於自身項目須要, fork了https://github.com/chenyun122/StepIndicator 作出了一些改良,這個步驟指示器能提供更多的屬性,好比虛線線條,虛線邊框,指示器內文字,步驟描述文字 未來會繼續作更多的樣式

安裝方法

pod 'EasyStepIndicator'

使用

若是你使用Storyboard

@IBOutlet weak var indicator: EasyStepIndicator!
複製代碼

若是你要設置步驟進度的方向

Raw值	意義	描述
0	leftToRight	從左到右
1	rightToLeft	從右到左
2	topToBottom	從頂到底
3	bottomToTop	從底到頂

若是要在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可用屬性

屬性名	描述	圖中位置
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	每一個標題和起始和圓圈的中心對齊

關於shouldStepLineFitDescriptionText

func shouldStepLineFitDescriptionText() -> Bool {
        false
    }
複製代碼

true:整個指示器的長度隨着描述內容的多少而變化

false:整個指示器的長度固定爲superview長度

TODO

歡迎你們提意見和建議

• 上傳到Cocoapods;
• 描述文字適配垂直方向;
• Demo
• 代碼描述
• 將超出部分顯示爲 "..."
• 自適應超出部分設置爲滾動
• 自定義描述部分的View,不限於文字