Merged in ui-enhancements (pull request #3)

pavankotesh · pavankotesh · commit 30cf278e12d8 · 2017-01-17T18:47:09.000+05:30
Fixed issue #3 and added option to set keyboard appearance
diff --git a/Example/KWVerificationCodeView/Base.lproj/Main.storyboard b/Example/KWVerificationCodeView/Base.lproj/Main.storyboard
@@ -23,7 +23,7 @@
                         <subviews>
                             <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ekS-Ew-GpT" userLabel="verificationCodeView" customClass="KWVerificationCodeView" customModule="KWVerificationCodeView">
                                 <rect key="frame" x="33" y="273" width="310" height="62"/>
-                                <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
+                                <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                                 <constraints>
                                     <constraint firstAttribute="width" constant="310" id="SmR-e4-qbu"/>
                                     <constraint firstAttribute="height" constant="62" id="mda-A6-NvC"/>
@@ -32,12 +32,6 @@
                                     <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
                                         <integer key="value" value="5"/>
                                     </userDefinedRuntimeAttribute>
-                                    <userDefinedRuntimeAttribute type="color" keyPath="underlineSelectedColor">
-                                        <color key="value" red="0.068236636075229451" green="0.44572890228426398" blue="0.12406174271236946" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                    </userDefinedRuntimeAttribute>
-                                    <userDefinedRuntimeAttribute type="color" keyPath="underlineColor">
-                                        <color key="value" white="0.33333333333333331" alpha="1" colorSpace="calibratedWhite"/>
-                                    </userDefinedRuntimeAttribute>
                                 </userDefinedRuntimeAttributes>
                             </view>
                             <button opaque="NO" contentMode="scaleToFill" enabled="NO" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Skh-28-8br" userLabel="submitButton">
@@ -52,7 +46,7 @@
                                     <color key="titleColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
                                 </state>
                                 <state key="disabled">
-                                    <color key="titleColor" red="1" green="0.79129829853778799" blue="0.59988017074977373" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                    <color key="titleColor" red="1" green="0.7912982985" blue="0.59988017069999999" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                 </state>
                                 <userDefinedRuntimeAttributes>
                                     <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
@@ -72,11 +66,11 @@
                             <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Enter Code" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="P6k-pN-VEP" userLabel="promptLabel">
                                 <rect key="frame" x="149" y="233" width="77" height="18"/>
                                 <fontDescription key="fontDescription" type="system" pointSize="15"/>
-                                <nil key="textColor"/>
+                                <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                                 <nil key="highlightedColor"/>
                             </label>
                         </subviews>
-                        <color key="backgroundColor" red="0.93725490570000003" green="0.93725490570000003" blue="0.95686274770000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <color key="backgroundColor" cocoaTouchSystemColor="groupTableViewBackgroundColor"/>
                         <constraints>
                             <constraint firstItem="ekS-Ew-GpT" firstAttribute="top" secondItem="P6k-pN-VEP" secondAttribute="bottom" constant="22" id="H7u-LC-n82"/>
                             <constraint firstItem="ekS-Ew-GpT" firstAttribute="top" secondItem="6e0-Am-MUv" secondAttribute="bottom" constant="90" id="HQQ-Ne-ux5"/>
diff --git a/KWVerificationCodeView/Classes/KWTextFieldView.swift b/KWVerificationCodeView/Classes/KWTextFieldView.swift
@@ -25,13 +25,56 @@ protocol KWTextFieldDelegate: class {
       underlineView.backgroundColor = underlineColor
     }
   }
-  @IBInspectable var underlineSelectedColor: UIColor = UIColor.blue
+  
+  @IBInspectable var underlineSelectedColor: UIColor = UIColor.black
+  
+  @IBInspectable var textColor: UIColor = UIColor.darkText {
+    didSet {
+      numberTextField.textColor = textColor
+    }
+  }
+  
+  @IBInspectable var textSize: CGFloat = 24.0 {
+    didSet {
+      numberTextField.font = UIFont.systemFont(ofSize: textSize)
+    }
+  }
+  
+  @IBInspectable var textFont: String = "" {
+    didSet {
+      if let font = UIFont(name: textFont, size: textSize) {
+        numberTextField.font = font
+      } else {
+        numberTextField.font = UIFont.systemFont(ofSize: textSize)
+      }
+    }
+  }
+  
+  @IBInspectable var textFieldBackgroundColor: UIColor = UIColor.clear {
+    didSet {
+      numberTextField.backgroundColor = textFieldBackgroundColor
+    }
+  }
+  
+  @IBInspectable var textFieldTintColor: UIColor = UIColor.blue {
+    didSet {
+      numberTextField.tintColor = textFieldTintColor
+    }
+  }
+  
+  @IBInspectable var darkKeyboard: Bool = false {
+    didSet {
+      keyboardAppearance = darkKeyboard ? .dark : .light
+      numberTextField.keyboardAppearance = keyboardAppearance
+    }
+  }
   
   // MARK: - IBOutlets
   @IBOutlet weak var numberTextField: UITextField!
   @IBOutlet weak private var underlineView: UIView!
   
   // MARK: - Variables
+  private var keyboardAppearance = UIKeyboardAppearance.default
   weak var delegate: KWTextFieldDelegate?
   
   // MARK: - Lifecycle
diff --git a/KWVerificationCodeView/Classes/KWTextFieldView.xib b/KWVerificationCodeView/Classes/KWTextFieldView.xib
@@ -20,17 +20,17 @@
             <rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
             <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
             <subviews>
-                <textField opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" textAlignment="center" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="uky-3e-m7A" userLabel="numberTextField">
+                <textField clipsSubviews="YES" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" textAlignment="center" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="uky-3e-m7A" userLabel="numberTextField">
                     <rect key="frame" x="0.0" y="0.0" width="50" height="48"/>
                     <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
-                    <color key="tintColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
+                    <color key="tintColor" red="0.0" green="0.0" blue="1" alpha="1" colorSpace="calibratedRGB"/>
                     <nil key="textColor"/>
                     <fontDescription key="fontDescription" type="system" pointSize="24"/>
                     <textInputTraits key="textInputTraits" keyboardType="numberPad"/>
                 </textField>
                 <view userInteractionEnabled="NO" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="eC6-EU-k8d" userLabel="underlineView">
                     <rect key="frame" x="0.0" y="39" width="50" height="1"/>
-                    <color key="backgroundColor" red="0.66666666666666663" green="0.66666666666666663" blue="0.66666666666666663" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                    <color key="backgroundColor" white="0.33333333333333331" alpha="1" colorSpace="calibratedWhite"/>
                     <constraints>
                         <constraint firstAttribute="height" constant="1" id="pFW-zo-tEa"/>
                     </constraints>
diff --git a/KWVerificationCodeView/Classes/KWVerificationCodeView.swift b/KWVerificationCodeView/Classes/KWVerificationCodeView.swift
@@ -25,21 +25,80 @@ public protocol KWVerificationCodeViewDelegate: class {
       }
     }
   }
-  @IBInspectable var underlineSelectedColor: UIColor = UIColor.blue {
+  
+  @IBInspectable var underlineSelectedColor: UIColor = UIColor.black {
     didSet {
       for textFieldView in textFieldViews {
         textFieldView.underlineSelectedColor = underlineSelectedColor
       }
     }
   }
   
+  @IBInspectable var textColor: UIColor = UIColor.darkText {
+    didSet {
+      for textFieldView in textFieldViews {
+        textFieldView.numberTextField.textColor = textColor
+      }
+    }
+  }
+  
+  @IBInspectable var textSize: CGFloat = 24.0 {
+    didSet {
+      for textFieldView in textFieldViews {
+        textFieldView.numberTextField.font = UIFont.systemFont(ofSize: textSize)
+      }
+    }
+  }
+  
+  @IBInspectable var textFont: String = "" {
+    didSet {
+      if let font = UIFont(name: textFont.trim(), size: textSize) {
+        textFieldFont = font
+      } else {
+        textFieldFont = UIFont.systemFont(ofSize: textSize)
+      }
+      
+      for textFieldView in textFieldViews {
+        textFieldView.numberTextField.font = textFieldFont
+      }
+    }
+  }
+  
+  @IBInspectable var textFieldBackgroundColor: UIColor = UIColor.clear {
+    didSet {
+      for textFieldView in textFieldViews {
+        textFieldView.numberTextField.backgroundColor = textFieldBackgroundColor
+      }
+    }
+  }
+  
+  @IBInspectable var textFieldTintColor: UIColor = UIColor.blue {
+    didSet {
+      for textFieldView in textFieldViews {
+        textFieldView.numberTextField.tintColor = textFieldTintColor
+      }
+    }
+  }
+  
+  @IBInspectable var darkKeyboard: Bool = false {
+    didSet {
+      keyboardAppearance = darkKeyboard ? .dark : .light
+      for textFieldView in textFieldViews {
+        textFieldView.numberTextField.keyboardAppearance = keyboardAppearance
+      }
+    }
+  }
+  
   // MARK: - IBOutlets
   @IBOutlet weak private var textFieldView1: KWTextFieldView!
   @IBOutlet weak private var textFieldView2: KWTextFieldView!
   @IBOutlet weak private var textFieldView3: KWTextFieldView!
   @IBOutlet weak private var textFieldView4: KWTextFieldView!
   
   // MARK: - Variables
+  private var keyboardAppearance = UIKeyboardAppearance.default
+  private var textFieldFont = UIFont.systemFont(ofSize: 24.0)
+  
   lazy var textFieldViews: [KWTextFieldView] = {
     [unowned self] in
     
diff --git a/KWVerificationCodeView/Classes/KWVerificationCodeView.xib b/KWVerificationCodeView/Classes/KWVerificationCodeView.xib
@@ -18,7 +18,7 @@
             </connections>
         </placeholder>
         <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
-        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="DUS-Hj-ChZ">
+        <view userInteractionEnabled="NO" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="DUS-Hj-ChZ">
             <rect key="frame" x="0.0" y="0.0" width="375" height="62"/>
             <subviews>
                 <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="3tC-Ut-0VN" userLabel="textFieldView1" customClass="KWTextFieldView" customModule="KWVerificationCodeView">
@@ -40,27 +40,19 @@
                     <rect key="frame" x="284" y="6" width="81" height="50"/>
                     <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
                 </view>
-                <view alpha="0.050000000000000003" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Uba-Pv-jsf" userLabel="topView">
-                    <rect key="frame" x="0.0" y="0.0" width="375" height="62"/>
-                    <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
-                </view>
             </subviews>
             <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
             <constraints>
                 <constraint firstItem="3tC-Ut-0VN" firstAttribute="leading" secondItem="DUS-Hj-ChZ" secondAttribute="leading" constant="10" id="0di-mx-zfw"/>
                 <constraint firstAttribute="bottom" secondItem="3tC-Ut-0VN" secondAttribute="bottom" constant="6" id="5uF-mn-LoT"/>
-                <constraint firstItem="Uba-Pv-jsf" firstAttribute="leading" secondItem="DUS-Hj-ChZ" secondAttribute="leading" id="8uT-N2-xM4"/>
                 <constraint firstItem="jRf-YT-Rjh" firstAttribute="height" secondItem="3tC-Ut-0VN" secondAttribute="height" id="Gb4-Os-cwr"/>
                 <constraint firstItem="vt9-dd-ekk" firstAttribute="top" secondItem="DUS-Hj-ChZ" secondAttribute="top" constant="6" id="Kg2-dv-3YJ"/>
                 <constraint firstItem="jRf-YT-Rjh" firstAttribute="width" secondItem="3tC-Ut-0VN" secondAttribute="width" id="U4v-Ht-Drn"/>
                 <constraint firstItem="vt9-dd-ekk" firstAttribute="width" secondItem="uqQ-2Z-1XV" secondAttribute="width" id="VK2-dB-JL0"/>
-                <constraint firstAttribute="bottom" secondItem="Uba-Pv-jsf" secondAttribute="bottom" id="VpP-Ye-4LD"/>
                 <constraint firstItem="jRf-YT-Rjh" firstAttribute="top" secondItem="DUS-Hj-ChZ" secondAttribute="top" constant="6" id="Vvq-kp-ykE"/>
                 <constraint firstAttribute="trailing" secondItem="vt9-dd-ekk" secondAttribute="trailing" constant="10" id="fPo-e5-fRn"/>
-                <constraint firstItem="Uba-Pv-jsf" firstAttribute="top" secondItem="DUS-Hj-ChZ" secondAttribute="top" id="gfu-mb-7SY"/>
                 <constraint firstItem="vt9-dd-ekk" firstAttribute="height" secondItem="uqQ-2Z-1XV" secondAttribute="height" id="jCR-aZ-KYb"/>
                 <constraint firstItem="uqQ-2Z-1XV" firstAttribute="height" secondItem="jRf-YT-Rjh" secondAttribute="height" id="nlt-Sw-o2S"/>
-                <constraint firstAttribute="trailing" secondItem="Uba-Pv-jsf" secondAttribute="trailing" id="q5B-Lv-1ay"/>
                 <constraint firstItem="uqQ-2Z-1XV" firstAttribute="leading" secondItem="jRf-YT-Rjh" secondAttribute="trailing" constant="10" id="rEH-pO-Tk3"/>
                 <constraint firstItem="uqQ-2Z-1XV" firstAttribute="width" secondItem="jRf-YT-Rjh" secondAttribute="width" id="rtg-SH-V0Y"/>
                 <constraint firstItem="vt9-dd-ekk" firstAttribute="leading" secondItem="uqQ-2Z-1XV" secondAttribute="trailing" constant="10" id="u6T-vB-S9e"/>
diff --git a/README.md b/README.md
@@ -31,17 +31,45 @@ Add a `UIView` in your *Storyboard* and change the class to `KWVerificationCodeV
 
 ![Interface Builder Screenshot](Screenshots/interfacebuilder.png)
 
-It is possile to set the default and selected colors of the underline in the *Storyboard*.
+The properties which can be directly set in the *Attributes Inspector* and their default values are as follows:
+
+- `Underline Color` - Dark grey color
+
+- `Underline Selected Color` - Black color
+
+- `Text Color` - Dark text color
+
+- `Text Size` - 24.0
+
+- `Text Font` - System font
+
+- `Text Field Background Color` - Clear color
+
+- `Text Field Tint Color` - Blue color
+
+- `Dark Keyboard` - Default keyboard apperance
 
 ### Methods
 
-`hasValidCode() -> Bool` - Returns true when the entered code is valid.
+The `KWVerificationCodeView` has the following methods:
+
+	hasValidCode() -> Bool 
+
+Returns true when the entered code is valid.
+
+	getVerificationCode() -> String 
+
+Returns the validation code. 
+
+### Protocols
+
+#### KWVerificationCodeViewDelegate
 
-`getVerificationCode() -> String` - Returns the validation code. 
+KWVerificationCodeViewDelegate protocol has the following method:
 
-### Delegate
+	didChangeVerificationCode()
 
-`KWVerificationCodeViewDelegate` has a method `didChangeVerificationCode()`, which you can implement to check for valid code in real time. This comes handy in stituations where you have to enable the submit button only if the verification code is valid.
+Notifies that the text in `KWVerificationCodeView` has been changed. This is especially useful in situations where you have to enable the submit button only if the verification code is valid.
 
 ## Author
 
diff --git a/Screenshots/interfacebuilder.png b/Screenshots/interfacebuilder.png
