From 931494840f090273af6d380e8cefafcb51044743 Mon Sep 17 00:00:00 2001
From: Desh <pengzishang@163.com>
Date: Thu, 7 Nov 2019 11:42:14 +0800
Subject: [PATCH] Localization after refactoring, readme (#18)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Update readme,add English support (#9)

* update_readme

Signed-off-by: pengzishang <pengzishang@163.com>

* add link

Signed-off-by: pengzishang <pengzishang@163.com>

* Set theme jekyll-theme-minimal

* Fix a bug caused by a screen rotation (#11)

Signed-off-by: pengzishang <pengzishang@163.com>

* Fix a bug caused by a screen rotation (#11)

Signed-off-by: pengzishang <pengzishang@163.com>

* Update README.md

* Update HorizontalCodeController.swift

* Update EasyStepIndicator.podspec

* Update EasyStepIndicator.swift

* Update README_EN.md

* refactor code (#15)

* wip day1

Signed-off-by: pengzishang <pengzishang@163.com>

* wip day2

Signed-off-by: pengzishang <pengzishang@163.com>

* wip day3

Signed-off-by: pengzishang <pengzishang@163.com>

* wip day4

Signed-off-by: pengzishang <pengzishang@163.com>

* wip day5

Signed-off-by: pengzishang <pengzishang@163.com>

* bug day 1

Signed-off-by: pengzishang <pengzishang@163.com>

* bug day2

Signed-off-by: pengzishang <pengzishang@163.com>

* 里程碑:横向描述,文字显示正常

Signed-off-by: pengzishang <pengzishang@163.com>

* 里程碑:垂直适配

Signed-off-by: pengzishang <pengzishang@163.com>

* 里程碑:各元素设立独立属性

Signed-off-by: pengzishang <pengzishang@163.com>

* 里程碑:旋转修复

Signed-off-by: pengzishang <pengzishang@163.com>

* 修复纵向起始点问题

Signed-off-by: pengzishang <pengzishang@163.com>

* 纵向 shouldStepLineFitDescriptionText测试成功

Signed-off-by: pengzishang <pengzishang@163.com>

* bug day 2

Signed-off-by: pengzishang <pengzishang@163.com>

* wip demo

Signed-off-by: pengzishang <pengzishang@163.com>

* format

Signed-off-by: pengzishang <pengzishang@163.com>

* 里程碑:全部测试完毕

Signed-off-by: pengzishang <pengzishang@163.com>

* demo code

Signed-off-by: pengzishang <pengzishang@163.com>


重构代码,可以分别定义每个元素的属性

* Localization after refactoring, readme (#17)

* readme and localization

Signed-off-by: pengzishang <pengzishang@163.com>

* update readme

Signed-off-by: pengzishang <pengzishang@163.com>

* readme day2

Signed-off-by: pengzishang <pengzishang@163.com>

* fix bug when number = 1

Signed-off-by: pengzishang <pengzishang@163.com>
---
 .idea/workspace.xml                         |   8 +-
 EasyStepIndicator.xcodeproj/project.pbxproj |   2 +
 EasyStepIndicator/EasyStepIndicator.swift   |  13 +-
 Example/Base.lproj/Main.storyboard          |  54 +++++--
 Example/HorizontalCodeController.swift      |   8 +-
 Example/VerticalController.swift            |  18 ++-
 Example/en.lproj/Main.strings               |  33 ++++
 README.md                                   | 163 ++++++++++++++------
 README_EN.md                                | 148 ++++++++++++++----
 9 files changed, 351 insertions(+), 96 deletions(-)
 create mode 100644 Example/en.lproj/Main.strings

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index b8a8647..c22ee52 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,8 +4,8 @@
     <list default="true" id="0665ee43-45f2-490a-938a-013267e50011" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/EasyStepIndicator/EasyStepIndicator.swift" beforeDir="false" afterPath="$PROJECT_DIR$/EasyStepIndicator/EasyStepIndicator.swift" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/Example/VerticalController.swift" beforeDir="false" afterPath="$PROJECT_DIR$/Example/VerticalController.swift" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/Example/ViewController.swift" beforeDir="false" afterPath="$PROJECT_DIR$/Example/ViewController.swift" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/Example/Base.lproj/Main.storyboard" beforeDir="false" afterPath="$PROJECT_DIR$/Example/Base.lproj/Main.storyboard" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/Example/HorizontalCodeController.swift" beforeDir="false" afterPath="$PROJECT_DIR$/Example/HorizontalCodeController.swift" afterDir="false" />
     </list>
     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
     <option name="SHOW_DIALOG" value="false" />
@@ -73,6 +73,8 @@
       <workItem from="1572692173753" duration="5373000" />
       <workItem from="1572838401679" duration="10255000" />
       <workItem from="1572921942884" duration="11269000" />
+      <workItem from="1573035600177" duration="2259000" />
+      <workItem from="1573052695560" duration="3891000" />
     </task>
     <servers />
   </component>
@@ -100,7 +102,7 @@
       <breakpoints>
         <line-breakpoint type="com.jetbrains.cidr.execution.debugger.OCBreakpointType">
           <url>file://$PROJECT_DIR$/EasyStepIndicator/EasyStepIndicator.swift</url>
-          <line>418</line>
+          <line>434</line>
           <option name="timeStamp" value="3" />
         </line-breakpoint>
       </breakpoints>
diff --git a/EasyStepIndicator.xcodeproj/project.pbxproj b/EasyStepIndicator.xcodeproj/project.pbxproj
index 9e0afb5..6235ffe 100644
--- a/EasyStepIndicator.xcodeproj/project.pbxproj
+++ b/EasyStepIndicator.xcodeproj/project.pbxproj
@@ -53,6 +53,7 @@
 		3CB31F4623587519004726A1 /* 2.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; path = 2.png; sourceTree = "<group>"; };
 		3CF8C4A223696BE200275B81 /* Config.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Config.swift; sourceTree = "<group>"; };
 		3CFB1D732372CCD800A7AB57 /* HorizontalController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HorizontalController.swift; sourceTree = "<group>"; };
+		3CFB1D762372D6BE00A7AB57 /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = en; path = en.lproj/Main.strings; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -225,6 +226,7 @@
 			isa = PBXVariantGroup;
 			children = (
 				3CB31F1423572BDF004726A1 /* Base */,
+				3CFB1D762372D6BE00A7AB57 /* en */,
 			);
 			name = Main.storyboard;
 			sourceTree = "<group>";
diff --git a/EasyStepIndicator/EasyStepIndicator.swift b/EasyStepIndicator/EasyStepIndicator.swift
index 3d76409..81afac5 100644
--- a/EasyStepIndicator/EasyStepIndicator.swift
+++ b/EasyStepIndicator/EasyStepIndicator.swift
@@ -236,7 +236,11 @@ public class EasyStepIndicator: UIView {
 	}
 	
 	/// 对齐模式
-	public var alignmentMode: AlignmentMode = .center
+  public var alignmentMode: AlignmentMode = .center {
+      didSet {
+          self.updateSubLayers()
+      }
+  }
 	
 	//步骤描述文字未完成时候颜色
 	@IBInspectable public var stepDescriptionTextIncompleteColor: UIColor = UIColor.red {
@@ -330,6 +334,10 @@ public class EasyStepIndicator: UIView {
 		self.layer.addSublayer(self.containerLayer)
 		self.updateSubLayers()
 	}
+
+  public func reload() {
+      self.updateSubLayers()
+  }
 	
 	private func updateData() {
 		for index in 0..<self.numberOfSteps {
@@ -709,8 +717,7 @@ public class EasyStepIndicator: UIView {
 			}()
 			let annularStartX: CGFloat = {
 				guard self.numberOfSteps > 1 else {
-					let firstAnnularLayer = self.annularLayers.first
-					return self.containerLayer.frame.width / 2.0 - circleRadius(firstAnnularLayer)
+					return 0
 				}
 				
 				if let _ = self.dataSource {
diff --git a/Example/Base.lproj/Main.storyboard b/Example/Base.lproj/Main.storyboard
index 58ae775..38e168c 100644
--- a/Example/Base.lproj/Main.storyboard
+++ b/Example/Base.lproj/Main.storyboard
@@ -361,27 +361,61 @@
                                     </mask>
                                 </variation>
                             </view>
-                            <stepper opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="750" verticalHuggingPriority="750" contentHorizontalAlignment="center" contentVerticalAlignment="center" maximumValue="100" translatesAutoresizingMaskIntoConstraints="NO" id="g8C-gp-vKE">
-                                <rect key="frame" x="160" y="696.5" width="94" height="32"/>
-                                <connections>
-                                    <action selector="didChangeValue:" destination="Cij-yo-usf" eventType="valueChanged" id="WaJ-eG-KEn"/>
-                                </connections>
-                            </stepper>
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="tl9-Ad-qF6">
-                                <rect key="frame" x="148.5" y="139.5" width="117" height="60"/>
+                                <rect key="frame" x="148.5" y="119.5" width="117" height="60"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="50"/>
                                 <nil key="textColor"/>
                                 <nil key="highlightedColor"/>
                             </label>
+                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" spacing="14" translatesAutoresizingMaskIntoConstraints="NO" id="eiS-rz-PWp">
+                                <rect key="frame" x="30" y="696.5" width="354" height="122"/>
+                                <subviews>
+                                    <stepper opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="750" verticalHuggingPriority="750" contentHorizontalAlignment="center" contentVerticalAlignment="center" maximumValue="100" translatesAutoresizingMaskIntoConstraints="NO" id="g8C-gp-vKE">
+                                        <rect key="frame" x="130" y="0.0" width="94" height="32"/>
+                                        <connections>
+                                            <action selector="didChangeValue:" destination="Cij-yo-usf" eventType="valueChanged" id="WaJ-eG-KEn"/>
+                                        </connections>
+                                    </stepper>
+                                    <segmentedControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="top" segmentControlStyle="plain" selectedSegmentIndex="0" translatesAutoresizingMaskIntoConstraints="NO" id="OwO-3a-fNa">
+                                        <rect key="frame" x="0.0" y="46" width="354" height="32"/>
+                                        <segments>
+                                            <segment title="top"/>
+                                            <segment title="center"/>
+                                            <segment title="centerWithAnnularStartAndAnnularEnd"/>
+                                        </segments>
+                                        <connections>
+                                            <action selector="changeSegmentValue:" destination="Cij-yo-usf" eventType="valueChanged" id="5T3-bC-t0K"/>
+                                        </connections>
+                                    </segmentedControl>
+                                    <stackView opaque="NO" contentMode="scaleToFill" spacing="28" translatesAutoresizingMaskIntoConstraints="NO" id="LZN-R2-B4O">
+                                        <rect key="frame" x="37" y="91" width="280" height="31"/>
+                                        <subviews>
+                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="shouldStepLineFitDescriptionText" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="QhV-BO-ub6">
+                                                <rect key="frame" x="0.0" y="0.0" width="203" height="31"/>
+                                                <fontDescription key="fontDescription" type="system" pointSize="13"/>
+                                                <nil key="textColor"/>
+                                                <nil key="highlightedColor"/>
+                                            </label>
+                                            <switch opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="750" verticalHuggingPriority="750" contentHorizontalAlignment="center" contentVerticalAlignment="center" translatesAutoresizingMaskIntoConstraints="NO" id="pvL-Oz-adJ">
+                                                <rect key="frame" x="231" y="0.0" width="51" height="31"/>
+                                                <connections>
+                                                    <action selector="changeSwitchValue:" destination="Cij-yo-usf" eventType="valueChanged" id="bBB-l0-PQ8"/>
+                                                </connections>
+                                            </switch>
+                                        </subviews>
+                                    </stackView>
+                                </subviews>
+                            </stackView>
                         </subviews>
                         <color key="backgroundColor" cocoaTouchSystemColor="groupTableViewBackgroundColor"/>
                         <constraints>
                             <constraint firstItem="fml-x6-zBM" firstAttribute="trailing" secondItem="H3T-pM-BZD" secondAttribute="trailing" constant="40" id="Hsp-TZ-byk"/>
                             <constraint firstItem="H3T-pM-BZD" firstAttribute="centerY" secondItem="Qsm-5i-9VB" secondAttribute="centerY" id="LfU-pR-lYs"/>
-                            <constraint firstItem="H3T-pM-BZD" firstAttribute="top" secondItem="tl9-Ad-qF6" secondAttribute="bottom" constant="10" id="Ma5-3H-gD2"/>
-                            <constraint firstItem="g8C-gp-vKE" firstAttribute="centerX" secondItem="H3T-pM-BZD" secondAttribute="centerX" id="QMz-uW-Y6S"/>
+                            <constraint firstItem="eiS-rz-PWp" firstAttribute="leading" secondItem="Qsm-5i-9VB" secondAttribute="leading" constant="30" id="MRT-JJ-j4P"/>
+                            <constraint firstItem="H3T-pM-BZD" firstAttribute="top" secondItem="tl9-Ad-qF6" secondAttribute="bottom" constant="30" id="Ma5-3H-gD2"/>
+                            <constraint firstItem="eiS-rz-PWp" firstAttribute="centerX" secondItem="Qsm-5i-9VB" secondAttribute="centerX" id="QnL-Yj-bQQ"/>
                             <constraint firstItem="H3T-pM-BZD" firstAttribute="leading" secondItem="fml-x6-zBM" secondAttribute="leading" constant="40" id="SdV-K1-92M"/>
-                            <constraint firstItem="g8C-gp-vKE" firstAttribute="top" secondItem="H3T-pM-BZD" secondAttribute="bottom" constant="10" id="cvj-Eh-l0f"/>
+                            <constraint firstItem="eiS-rz-PWp" firstAttribute="top" secondItem="H3T-pM-BZD" secondAttribute="bottom" constant="10" id="qL9-5B-oxX"/>
                             <constraint firstItem="tl9-Ad-qF6" firstAttribute="centerX" secondItem="Qsm-5i-9VB" secondAttribute="centerX" id="wjM-nF-LwK"/>
                         </constraints>
                         <viewLayoutGuide key="safeArea" id="fml-x6-zBM"/>
diff --git a/Example/HorizontalCodeController.swift b/Example/HorizontalCodeController.swift
index f8e3c2d..54d2129 100644
--- a/Example/HorizontalCodeController.swift
+++ b/Example/HorizontalCodeController.swift
@@ -14,22 +14,22 @@ class HorizontalCodeController: UIViewController {
     var indicator: EasyStepIndicator?
     var currentStep: UILabel!
     
-    
     override func viewDidLoad() {
         super.viewDidLoad()
         
         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
+        indicator?.numberOfSteps = 4 // 必须第一时间赋予
+        self.view.addSubview(indicator!)
+        
         indicator?.delegate = self
         indicator?.dataSource = self
-        self.view.addSubview(indicator!)
         indicator?.currentStep = 0 //如果需要调整目前进度
         
         self.stepper = UIStepper.init(frame: CGRect.init(origin: CGPoint.zero, size: CGSize.init(width: 30, height: 20)))
         self.stepper?.center = CGPoint.init(x: (indicator?.frame.midX ?? 0), y: (indicator?.frame.maxY ?? 400))
         self.view.addSubview((stepper!))
-        stepper?.maximumValue = 4
+        stepper?.maximumValue = Double(indicator?.numberOfSteps ?? 0)
         stepper?.minimumValue = 0
         stepper?.stepValue = 1
         stepper?.value = 0
diff --git a/Example/VerticalController.swift b/Example/VerticalController.swift
index be889cd..7a051d9 100644
--- a/Example/VerticalController.swift
+++ b/Example/VerticalController.swift
@@ -14,11 +14,13 @@ class VerticalController: UIViewController {
     @IBOutlet weak var indicator: EasyStepIndicator!
     @IBOutlet weak var currentStep: UILabel!
     
+    var shouldStepLineFitText = false
+    
     override func viewDidLoad() {
         super.viewDidLoad()
         self.indicator.dataSource = self
         self.indicator.delegate = self
-        self.indicator.alignmentMode = .center
+        self.indicator.alignmentMode = .top
         stepper.maximumValue = Double(indicator.numberOfSteps - 1)
         setState(step: 0)
     }
@@ -35,6 +37,16 @@ class VerticalController: UIViewController {
     @IBAction func didChangeValue(_ sender: UIStepper) {
         setState(step: Int(sender.value))
     }
+    
+    @IBAction func changeSegmentValue(_ sender: UISegmentedControl) {
+        indicator.alignmentMode = [AlignmentMode.top,AlignmentMode.center,AlignmentMode.centerWithAnnularStartAndAnnularEnd][sender.selectedSegmentIndex]
+    }
+    
+    @IBAction func changeSwitchValue(_ sender: UISwitch) {
+        self.shouldStepLineFitText = sender.isOn
+        indicator.reload()
+    }
+
 }
 
 extension VerticalController:EasyStepIndicatorDataSource {
@@ -44,7 +56,7 @@ extension VerticalController:EasyStepIndicatorDataSource {
     
     func titleForStep(indicator: EasyStepIndicator, index: Int) -> String {
         //        return ["Alarm\ntriggered", "Dispatch\na guard", "Track\nprogress", "Finishes\ninvestigation","Finishes\ninvestigation"][index]
-        ["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]
+        [ "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. ","Yours faithfully", "Track progress", "Finishes\ninvestigation,in London from April 5 to mid April on business. We are pleased to introduce Mr. Wang"][index]
     }
 }
 
@@ -79,6 +91,6 @@ extension VerticalController :EasyStepIndicatorDelegate {
     }
     
     func shouldStepLineFitDescriptionText() -> Bool {
-        false
+        return self.shouldStepLineFitText
     }
 }
diff --git a/Example/en.lproj/Main.strings b/Example/en.lproj/Main.strings
new file mode 100644
index 0000000..a306aea
--- /dev/null
+++ b/Example/en.lproj/Main.strings
@@ -0,0 +1,33 @@
+
+/* Class = "UINavigationItem"; title = "横向显示(Storyboard)"; ObjectID = "4m3-UD-06t"; */
+"4m3-UD-06t.title" = "Horizontal(Storyboard)";
+
+/* Class = "UILabel"; text = "纵向显示(Storyboard)"; ObjectID = "6RC-Xf-fjR"; */
+"6RC-Xf-fjR.text" = "Vertical(Storyboard)";
+
+/* Class = "UILabel"; text = "Label"; ObjectID = "AXk-OI-Srz"; */
+"AXk-OI-Srz.text" = "Label";
+
+/* Class = "UINavigationItem"; title = "横向显示(Code)"; ObjectID = "BgK-gK-gxR"; */
+"BgK-gK-gxR.title" = "Horizontal(Code)";
+
+/* Class = "UINavigationItem"; title = "纵向显示(Storyboard)"; ObjectID = "JBH-bJ-HoF"; */
+"JBH-bJ-HoF.title" = "Vertical(Storyboard)";
+
+/* Class = "UIBarButtonItem"; title = " "; ObjectID = "JFc-cE-BJK"; */
+"JFc-cE-BJK.title" = " ";
+
+/* Class = "UILabel"; text = "横向显示(Code)"; ObjectID = "R7N-mC-FGV"; */
+"R7N-mC-FGV.text" = "Horizontal(Code)";
+
+/* Class = "UIViewController"; title = "横向显示(Code)"; ObjectID = "eUL-NA-AYK"; */
+"eUL-NA-AYK.title" = "Horizontal(Code)";
+
+/* Class = "UINavigationItem"; title = "EasyStepIndicator"; ObjectID = "pUY-FH-cHE"; */
+"pUY-FH-cHE.title" = "EasyStepIndicator";
+
+/* Class = "UILabel"; text = "Label"; ObjectID = "tl9-Ad-qF6"; */
+"tl9-Ad-qF6.text" = "Label";
+
+/* Class = "UILabel"; text = "横向显示(Storyboard)"; ObjectID = "udb-gL-h3q"; */
+"udb-gL-h3q.text" = "Horizontal(Storyboard)";
diff --git a/README.md b/README.md
index 8a053eb..2880f30 100644
--- a/README.md
+++ b/README.md
@@ -7,17 +7,15 @@
 
 给步骤指示器加入更多的属性,更多可定制的样式
 
-横向模式
+### 横向模式
 
-<img src="https://s2.ax1x.com/2019/10/23/KYvrFJ.gif" alt="KYvrFJ.gif" border="0" />
+<img src="https://s2.ax1x.com/2019/11/06/MiCEE6.gif" alt="MiCEE6.gif" border="0" />
 
-纵向倒置文字适配模式
+### 纵向模式
 
-<img src="https://s2.ax1x.com/2019/10/25/KwFHLF.gif" alt="KwFHLF.gif" border="0" />
-
-纵向正向长度相等模式
-
-<img src="https://s2.ax1x.com/2019/10/25/KwAV74.gif" alt="KwAV74.gif" border="0" />
+|纵向逆向|纵向正向|
+|:--------------------:|:---------------------------:|
+|<img src="https://s2.ax1x.com/2019/11/06/MiCsaV.gif" alt="MiCsaV.gif" border="0" />|<img src="https://s2.ax1x.com/2019/11/06/MiPiRg.gif" alt="MiPiRg.gif" border="0" />|
 
 ## 背景
 
@@ -35,22 +33,11 @@ fork了https://github.com/chenyun122/StepIndicator
 
 <img src="https://s2.ax1x.com/2019/10/23/KYvweU.png" alt="KYvweU.png" border="0" />
 
-> ```swift
-> IBOutlet weak var indicator: EasyStepIndicator!
-> ```
- 如果你要设置圈内文字和描述文字
- 打开在Storyboard中的选项
-
-![K6mjW6.jpg](https://s2.ax1x.com/2019/10/28/K6mjW6.jpg)
-
-然后设置相应文字
-
-> ```swift
-> indicator.stepCircleTexts = ["A","B","C","D"]
-> indicator.stepDescriptionTexts = \["Alarm\ntriggered", "Dispatch\na guard", "Track\nprogress", "Finishes\ninvestigation", "Site\nsecured"]
-> ```
+```swift
+@IBOutlet weak var indicator: EasyStepIndicator!
+```
 
-如果你要设置步骤进度的方向
+#### 如果你要设置步骤进度的方向
 
 ![K6nd0J.png](https://s2.ax1x.com/2019/10/28/K6nd0J.png)
 
@@ -61,31 +48,78 @@ fork了https://github.com/chenyun122/StepIndicator
 |2|topToBottom|从顶到底|
 |3|bottomToTop|从底到顶|
 
+#### 如果要在Storyboard完成所有的工作
+图中属性在下面有介绍
+
+<img src="https://s2.ax1x.com/2019/11/06/MiFJ56.png" alt="MiFJ56.png" border="0" />
+
 
 ### 如果你用代码
 ```swift
-let indicator = EasyStepIndicator.init(frame: CGRect.init(origin: CGPoint.init(x: 0, y: 0), size: CGSize.init(width:300, height: 300)))
-self.view.addSubview(indicator)
-indicator.numberOfSteps = 4//如果需要调整步骤
-indicator.currentStep = 2 //如果需要调整目前进度
-indicator.circleRadius = 15 //圆圈大小
-indicator.showCircleText = true
-indicator.stepCircleTexts = ["A","B","C","D"]//框内的文字
-indicator.showStepDescriptionTexts = true
-indicator.stepDescriptionTexts = ["Alarm\ntriggered", "Dispatch\na guard", "Track\nprogress", "Finishes\ninvestigation", "Site\nsecured"]//圆下的描述文字
-indicator.direction = .leftToRight //方向
-//如果你使用纵向模式
-indicator.stepLineFitDescriptionText = true //连接线条长度适应文本
+    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
+
+```swift
+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
+```swift
+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 | 总步骤数量 ||
+| numberOfSteps(必须的) | 总步骤数量(必须大于1) ||
 | currentStep | 当前步骤 |①|
 | currentStepAsIncomplete| 当前步骤视为未完成|①|
 | circleRadius| 圆大小|③|
@@ -104,17 +138,58 @@ indicator.stepLineFitDescriptionText = true //连接线条长度适应文本
 | lineImaginaryWidth| 指向线条小虚线宽度|⑥|
 | direction|进度方向,写代码时候可以设置,在枚举值中选择|a-b-c-d|
 | directionRaw|进度方向的Int值,用Storyboard中选择方向|无|
-| showInitialStep| 是否显示起始圆框|⑦|
-| showCircleText| 是否显示框内文字|ABCD|
-| stepCircleTexts| 圆形内描述文字,建议只输入一个数字|ABCD或者1234任何不超过一位的字符|
 | circleTextIncompleteColor| 圆形内文字未完成时候颜色|C的颜色|
 | circleTextCompleteColor| 圆形内文字完成时候颜色|A的颜色|
-| showStepDescriptionTexts| 是否显示步骤描述文字|下方13处|
-| stepDescriptionTexts| 步骤描述文字|13处|
+| stepDescriptionTextIncompleteColor|描述文字未完成时候的颜色|11|
+| stepDescriptionTextCompleteColor|描述文字完成时候的颜色|13|
 | stepDescriptionTextMargin| Indicator和Description之间Margin|12|
 | stepDescriptionTextFontSize| 步骤描述文字的大小|13|
-| stepLineFitDescriptionText | Line是否适应文字的高度,如果文字过多,建议开启(文字多会溢出superview),如果关闭的,Line的高度是与SuperView关联,不会溢出superview |无|
 
+### 可代码配置属性
+
+| 类名 |属性| 描述 | 
+|:--------------------:|:---------------------------:|:----------------------------:|
+|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|每个标题和起始和圆圈的中心对齐,|
+|centerWithAnnularStartAndAnnularEnd|标题和圆圈中心对齐,且强制以第一个圆圈的顶作为layer起始点,可能会超出superview|
+
+<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长度
+
+<img src="https://s2.ax1x.com/2019/11/07/MiXvvt.gif" alt="MiXvvt.gif" border="0" />
 
 ## TODO
 欢迎大家提意见和建议
@@ -122,5 +197,7 @@ indicator.stepLineFitDescriptionText = true //连接线条长度适应文本
 - [x] 上传到Cocoapods;
 - [x] 描述文字适配垂直方向;
 - [x] 垂直方向Demo
-- [ ] 代码描述
+- [x] 代码描述
+- [ ] 将超出部分显示为 "..."
+- [ ] 自适应超出部分设置为滚动
 - [ ] 自定义描述部分的View,不限于文字
diff --git a/README_EN.md b/README_EN.md
index 8f84909..97e985b 100644
--- a/README_EN.md
+++ b/README_EN.md
@@ -5,17 +5,16 @@ Welcome everyone to give advice ,giveStar
 
 Add more attributes to the step indicator, more customizable styles
 
-Landscape mode
+### Landscape mode
 
-<img src="https://s2.ax1x.com/2019/10/23/KYvrFJ.gif" alt="KYvrFJ.gif" border="0" />
+<img src="https://s2.ax1x.com/2019/11/06/MiCEE6.gif" alt="MiCEE6.gif" border="0" />
 
-Vertical inverted text adaptation mode
+### Portrait mode
 
-<img src="https://s2.ax1x.com/2019/10/25/KwFHLF.gif" alt="KwFHLF.gif" border="0" />
+|Vertical Reverse | Vertical Forward |
+|:--------------------:|:---------------------------:|
+|<img src="https://s2.ax1x.com/2019/11/06/MiCsaV.gif" alt="MiCsaV.gif" border="0" />|<img src="https://s2.ax1x.com/2019/11/06/MiPiRg.gif" alt="MiPiRg.gif" border="0" />|
 
-Longitudinal forward length equal mode
-
-<img src="https://s2.ax1x.com/2019/10/25/KwAV74.gif" alt="KwAV74.gif" border="0" />
 
 ## Background
 
@@ -24,7 +23,7 @@ fork the project https://github.com/chenyun122/StepIndicator
 Made some improvements,This step indicator provides more properties, such as dashed lines, dashed borders, in-character text, step description text
 Will continue to do more styles in the future
 
-## Installation method
+## Install
 
 > pod 'EasyStepIndicator'
 
@@ -48,7 +47,7 @@ Then set the text
 > indicator.stepDescriptionTexts = \["Alarm\ntriggered", "Dispatch\na guard", "Track\nprogress", "Finishes\ninvestigation", "Site\nsecured"]
 > ```
 
-If you want to set the direction of the step progress
+#### If you want to set the direction of the step progress
 
 ![K6nd0J.png](https://s2.ax1x.com/2019/10/28/K6nd0J.png)
 
@@ -59,23 +58,70 @@ If you want to set the direction of the step progress
 |2|topToBottom|From top to bottom|
 |3|bottomToTop|From bottom to top|
 
+#### If you want to do all the work on the Storyboard
+The properties in the figure are described below.
+
+<img src="https://s2.ax1x.com/2019/11/06/MiFJ56.png" alt="MiFJ56.png" border="0" />
+
 
 ### Code
 ```swift
-let indicator = EasyStepIndicator.init(frame: CGRect.init(origin: CGPoint.init(x: 0, y: 0), size: CGSize.init(width:300, height: 300)))
-self.view.addSubview(indicator)
-indicator.numberOfSteps = 4//If you need to adjust the steps
-indicator.currentStep = 2 //If you need to adjust the current progress
-indicator.circleRadius = 15 //Circle size
-indicator.showCircleText = true
-indicator.stepCircleTexts = ["A","B","C","D"]//Text inside the box
-indicator.showStepDescriptionTexts = true
-indicator.stepDescriptionTexts = ["Alarm\ntriggered", "Dispatch\na guard", "Track\nprogress", "Finishes\ninvestigation", "Site\nsecured"]//Descriptive text under the circle
-indicator.direction = .leftToRight //direction
-//If you use portrait mode
-indicator.stepLineFitDescriptionText = true //Connect line length to fit text
+    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 // must be given the first time
+    self.view.addSubview(indicator!)
+```
+
+### Storyboard and the public part of the code
+#### If you want to set the circle internal text and description text
+>self.indicator.dataSource = self
+
+
+```swift
+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]
+    }
+}
+ ```
+
+#### If you want to set each circle separately
+>self.indicator.delegate = self
+```swift
+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()
+     }
+ }
 ```
 
+You can make your own customizations for each attribute of each element.
 
 ## Attributes
 
@@ -101,18 +147,59 @@ indicator.stepLineFitDescriptionText = true //Connect line length to fit text
 | lineImaginaryMargin| points to the dotted line spacing |⑥|
 | lineImaginaryWidth| points to the line with a small dashed width |⑥|
 | direction|Progress direction, you can set when writing code, select value in the enumeration value |a-b-c-d|
-| directionRaw|Int value of progress direction, select direction with Storyboard|None|
-| showInitialStep| Whether to display the starting circle|⑦|
-| showCircleText| Whether to display the text in the circle|ABCD|
-| stepCircleTexts| Descriptive text inside the circle, it is recommended to enter only one number||
 | circleTextIncompleteColor| Color inside the circle when the text is not completed| C's color|
 | circleTextCompleteColor| Color inside the circle when the text is finished |A's color|
-| showStepDescriptionTexts| Whether to display step description text | below 13|
-| stepDescriptionTexts| Step Description Text |13|
+| stepDescriptionTextIncompleteColor|Describe the color when the text is not completed|11|
+| stepDescriptionTextCompleteColor|Describe the color when the text is completed|13|
 | stepDescriptionTextMargin| Margin between Indicator and Description|12|
 | stepDescriptionTextFontSize| Step Description Text Size |13|
 | stepLineFitDescriptionText | Line adapts to the height of the text. If there is too much text, it is recommended to open (more text will overflow superview). If it is closed, the height of Line is associated with SuperView, it will not overflow superview |无|
 
+### Codeable Attributes
+
+| Class | Attribute | Description |
+|:--------------------:|:---------------------------:|:----------------------------:|
+|StepConfig|stepText|Circle related attributes|
+|StepConfig|annular|annular related properties|
+|StepConfig|tint| Related properties in circles |
+|StepConfig|radius|Circle Radius|
+|StepConfig|stepIndex|Step No.|
+|StepConfig|titleMargin|Describe the distance between the text and the bottom of the circle|
+|-|-|-|
+|LineConfig|colors|Line color related properties|
+|LineConfig|dashPatternComplete|The dotted line related properties of the completed line|
+|LineConfig|dashPatternIncomplete|Dash line related properties of unfinished lines|
+|LineConfig|strokeWidth|Line Width|
+|LineConfig|marginBetweenCircle|The distance from the line to the circle|
+|LineConfig|processIndex|Line index|
+|-|-|-|
+|TitleConfig|title|Describe title related attributes|
+|TitleConfig|colors|Describe title color related properties|
+|TitleConfig|stepIndex|Description title index|
+
+### About alignmentMode
+>public var alignmentMode: AlignmentMode = .center
+
+| Value | Description |
+|:---------------------------:|:---------------------------:|
+|top|The starting alignment of each title and circle|
+|center|Each title and start are aligned with the center of the circle, |
+|centerWithAnnularStartAndAnnularEnd|The title is aligned with the center of the circle, and the top of the first circle is forced to be the starting point of the layer, which may exceed superview|
+
+<img src="https://s2.ax1x.com/2019/11/07/MiXIu6.gif" alt="MiXIu6.gif" border="0" />
+
+### About shouldStepLineFitDescriptionText
+```swift
+    func shouldStepLineFitDescriptionText() -> Bool {
+        false
+    }
+```
+
+>true: the length of the entire indicator varies with the amount of description
+>
+>false: the length of the entire indicator is fixed to the length of the superview
+
+<img src="https://s2.ax1x.com/2019/11/07/MiXvvt.gif" alt="MiXvvt.gif" border="0" />
 
 ## TODO
 Welcome everyone to provide comments and suggestions
@@ -120,6 +207,7 @@ Welcome everyone to provide comments and suggestions
 - [x] uploaded to Cocoapods;
 - [x] describes the text adaptation to the vertical direction;
 - [x] Vertical Direction Demo
-- [ ] Code Description
-- [ ] Custom description section of View,Welcome everyone to provide comments and suggestions
-
+- [x] code description
+- [ ] displays the excess as "..."
+- [ ] Adaptive excess is set to scroll
+- [ ] View of the custom description section, not limited to text
\ No newline at end of file