updated TextField to allow for a detail label

Examples/Programmatic/TextField/TextField.xcodeproj/project.pbxproj

@@ -7,8 +7,6 @@
 	objects = {
 
 /* Begin PBXBuildFile section */
-		964F5D0C1C24823400DD950F /* MaterialKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 964F5D0B1C24823400DD950F /* MaterialKit.framework */; };
-		964F5D0D1C24823400DD950F /* MaterialKit.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 964F5D0B1C24823400DD950F /* MaterialKit.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
 		966F57A11C226BAA009185B7 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 966F57A01C226BAA009185B7 /* AppDelegate.swift */; };
 		966F57A31C226BAA009185B7 /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 966F57A21C226BAA009185B7 /* ViewController.swift */; };
 		966F57A81C226BAA009185B7 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 966F57A71C226BAA009185B7 /* Assets.xcassets */; };
@@ -22,7 +20,6 @@
 			dstPath = "";
 			dstSubfolderSpec = 10;
 			files = (
-				964F5D0D1C24823400DD950F /* MaterialKit.framework in Embed Frameworks */,
 			);
 			name = "Embed Frameworks";
 			runOnlyForDeploymentPostprocessing = 0;
@@ -30,7 +27,6 @@
 /* End PBXCopyFilesBuildPhase section */
 
 /* Begin PBXFileReference section */
-		964F5D0B1C24823400DD950F /* MaterialKit.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; name = MaterialKit.framework; path = "/Users/danieldahan/Library/Developer/Xcode/DerivedData/MaterialKit-anypxbsecgdqqxevbavirvnffqxd/Build/Products/Debug-iphoneos/MaterialKit.framework"; sourceTree = "<absolute>"; };
 		966F579D1C226BAA009185B7 /* TextField.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = TextField.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		966F57A01C226BAA009185B7 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
 		966F57A21C226BAA009185B7 /* ViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ViewController.swift; sourceTree = "<group>"; };
@@ -44,7 +40,6 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				964F5D0C1C24823400DD950F /* MaterialKit.framework in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -54,7 +49,6 @@
 		966F57941C226BAA009185B7 = {
 			isa = PBXGroup;
 			children = (
-				964F5D0B1C24823400DD950F /* MaterialKit.framework */,
 				966F579F1C226BAA009185B7 /* TextField */,
 				966F579E1C226BAA009185B7 /* Products */,
 			);

Examples/Programmatic/TextField/TextField/ViewController.swift

@@ -20,15 +20,15 @@ import UIKit
 import MaterialKit
 
 class ViewController: UIViewController, TextFieldDelegate {
-	private lazy var titleField: TextField = TextField()
-	private lazy var descriptionField: TextField = TextField()
+	private lazy var nameField: TextField = TextField()
+	private lazy var emailField: TextField = TextField()
 	
 	override func viewDidLoad() {
 		super.viewDidLoad()
 		prepareView()
 		
-		prepareTitleField()
-		prepareDescriptionField()
+		prepareNameField()
+		prepareEmailField()
 	}
 	
 	/**
@@ -39,39 +39,43 @@ class ViewController: UIViewController, TextFieldDelegate {
 	}
 	
 	/**
-	:name:	prepareTitleField
-	:description:	A preparation helper for titleField.
+	:name:	prepareNameField
+	:description:	A preparation helper for nameField.
 	*/
-	private func prepareTitleField() {
-		titleField.delegate = self
-		titleField.frame = CGRectMake(57, 100, 300, 24)
-		titleField.placeholder = "Title"
-		titleField.font = RobotoFont.regularWithSize(20)
-		titleField.textColor = MaterialColor.black
-		titleField.titleLabel = UILabel()
-		titleField.titleLabel!.font = RobotoFont.mediumWithSize(12)
-		titleField.titleLabelNormalColor = MaterialColor.grey.lighten1
-		titleField.titleLabelHighlightedColor = MaterialColor.blue.accent3
-		titleField.clearButtonMode = .WhileEditing
-		view.addSubview(titleField)
+	private func prepareNameField() {
+		nameField.delegate = self
+		nameField.frame = CGRectMake(57, 100, 300, 24)
+		nameField.placeholder = "First Name"
+		nameField.font = RobotoFont.regularWithSize(20)
+		nameField.textColor = MaterialColor.black
+		nameField.titleLabel = UILabel()
+		nameField.titleLabel!.font = RobotoFont.mediumWithSize(12)
+		nameField.titleLabelNormalColor = MaterialColor.grey.lighten2
+		nameField.titleLabelHighlightedColor = MaterialColor.blue.accent3
+		nameField.clearButtonMode = .WhileEditing
+		view.addSubview(nameField)
 	}
 	
 	/**
-	:name:	prepareDescriptionField
-	:description:	A preparation helper for descriptionField.
+	:name:	prepareEmailField
+	:description:	A preparation helper for emailField.
 	*/
-	private func prepareDescriptionField() {
-		descriptionField.delegate = self
-		descriptionField.frame = CGRectMake(57, 150, 300, 24)
-		descriptionField.placeholder = "Description"
-		descriptionField.font = RobotoFont.regularWithSize(20)
-		descriptionField.textColor = MaterialColor.black
-		descriptionField.titleLabel = UILabel()
-		descriptionField.titleLabel!.font = RobotoFont.mediumWithSize(12)
-		descriptionField.titleLabelNormalColor = MaterialColor.grey.lighten1
-		descriptionField.titleLabelHighlightedColor = MaterialColor.blue.accent3
-		descriptionField.clearButtonMode = .WhileEditing
-		view.addSubview(descriptionField)
+	private func prepareEmailField() {
+		emailField.delegate = self
+		emailField.frame = CGRectMake(57, 200, 300, 24)
+		emailField.placeholder = "Email"
+		emailField.font = RobotoFont.regularWithSize(20)
+		emailField.textColor = MaterialColor.black
+		emailField.titleLabel = UILabel()
+		emailField.titleLabel!.font = RobotoFont.mediumWithSize(12)
+		emailField.titleLabelNormalColor = MaterialColor.grey.lighten2
+		emailField.titleLabelHighlightedColor = MaterialColor.blue.accent3
+		emailField.clearButtonMode = .WhileEditing
+		emailField.detailLabel = UILabel()
+		emailField.detailLabel!.text = "Email is incorrect."
+		emailField.detailLabel!.font = RobotoFont.mediumWithSize(12)
+		emailField.detailLabelHighlightedColor = MaterialColor.red.accent3
+		view.addSubview(emailField)
 	}
 	
 	/**
@@ -81,6 +85,9 @@ class ViewController: UIViewController, TextFieldDelegate {
 	*/
 	func textFieldShouldReturn(textField: UITextField) -> Bool {
 		textField.resignFirstResponder()
+		if textField == emailField {
+			(textField as! TextField).detailLabelHidden = false
+		}
 		return false
 	}
 	

README.md

@@ -73,13 +73,14 @@ A TextField is an excellent way to improve UX. Checkout the Examples directory f
 
 ```swift
 let titleField: TextField = TextField(frame: CGRectMake(57, 100, 300, 24))
-titleField.placeholder = "Title"
-titleField.font = RobotoFont.regularWithSize(20)
-titleField.textColor = MaterialColor.black
-titleField.titleLabel = UILabel()
-titleField.titleLabel!.font = RobotoFont.mediumWithSize(12)
-titleField.titleLabelNormalColor = MaterialColor.grey.lighten1
-titleField.titleLabelHighlightedColor = MaterialColor.blue.accent3
+nameField.placeholder = "First Name"
+nameField.font = RobotoFont.regularWithSize(20)
+nameField.textColor = MaterialColor.black
+nameField.titleLabel = UILabel()
+nameField.titleLabel!.font = RobotoFont.mediumWithSize(12)
+nameField.titleLabelNormalColor = MaterialColor.grey.lighten2
+nameField.titleLabelHighlightedColor = MaterialColor.blue.accent3
+nameField.clearButtonMode = .WhileEditing
 
 // Add titleField to UIViewController.
 view.addSubview(titleField)

Sources/TextField.swift

@@ -22,6 +22,11 @@ public protocol TextFieldDelegate : UITextFieldDelegate {}
 
 public class TextField : UITextField {
 	/**
+	:name:	bottomBorderLayer
+	*/
+	public private(set) lazy var bottomBorderLayer: CAShapeLayer = CAShapeLayer()
+	
+	/**
 	:name:	backgroundColor
 	*/
 	public override var backgroundColor: UIColor? {
@@ -79,11 +84,54 @@ public class TextField : UITextField {
 	}
 	
 	/**
+	:name:	borderWidth
+	*/
+	public var borderWidth: MaterialBorder {
+		didSet {
+			layer.borderWidth = MaterialBorderToValue(borderWidth)
+		}
+	}
+	
+	/**
+	:name:	borderColor
+	*/
+	public var borderColor: UIColor? {
+		didSet {
+			layer.borderColor = borderColor?.CGColor
+		}
+	}
+	
+	/**
+	:name:	position
+	*/
+	public var position: CGPoint {
+		get {
+			return layer.position
+		}
+		set(value) {
+			layer.position = value
+		}
+	}
+	
+	/**
+	:name:	zPosition
+	*/
+	public var zPosition: CGFloat {
+		get {
+			return layer.zPosition
+		}
+		set(value) {
+			layer.zPosition = value
+		}
+	}
+	
+	/**
 	:name:	titleLabelNormalColor
 	*/
 	public var titleLabelNormalColor: UIColor? {
 		didSet {
 			titleLabel?.textColor = titleLabelNormalColor
+			bottomBorderLayer.backgroundColor = titleLabelNormalColor?.CGColor
 		}
 	}
 	
@@ -93,6 +141,11 @@ public class TextField : UITextField {
 	public var titleLabelHighlightedColor: UIColor?
 	
 	/**
+	:name:	detailLabelHighlightedColor
+	*/
+	public var detailLabelHighlightedColor: UIColor?
+	
+	/**
 	:name:	titleLabel
 	*/
 	public var titleLabel: UILabel? {
@@ -102,12 +155,62 @@ public class TextField : UITextField {
 	}
 	
 	/**
+	:name:	detailLabel
+	*/
+	public var detailLabel: UILabel? {
+		didSet {
+			prepareDetailLabel()
+		}
+	}
+	
+	/**
+	:name:	detailLabelHidden
+	*/
+	public var detailLabelHidden: Bool = false {
+		didSet {
+			if detailLabelHidden {
+				bottomBorderLayer.backgroundColor = editing ? titleLabelHighlightedColor?.CGColor : titleLabelNormalColor?.CGColor
+				hideDetailLabel()
+			} else {
+				detailLabel?.textColor = detailLabelHighlightedColor
+				bottomBorderLayer.backgroundColor = detailLabelHighlightedColor?.CGColor
+				showDetailLabel()
+			}
+		}
+	}
+	
+	/**
+	:name:	init
+	*/
+	public required init?(coder aDecoder: NSCoder) {
+		borderWidth = .None
+		super.init(coder: aDecoder)
+		prepareView()
+	}
+	
+	/**
+	:name:	init
+	*/
+	public override init(frame: CGRect) {
+		borderWidth = .None
+		super.init(frame: frame)
+		prepareView()
+	}
+	
+	/**
+	:name:	init
+	*/
+	public convenience init() {
+		self.init(frame: CGRectNull)
+	}
+	
+	/**
 	:name:	layoutSublayersOfLayer
 	*/
 	public override func layoutSublayersOfLayer(layer: CALayer) {
 		super.layoutSublayersOfLayer(layer)
 		if self.layer == layer {
-			
+			bottomBorderLayer.frame = CGRectMake(0, bounds.height + 8, bounds.width, 1)
 		}
 	}
 	
@@ -162,33 +265,11 @@ public class TextField : UITextField {
 	}
 	
 	/**
-	:name:	init
-	*/
-	public required init?(coder aDecoder: NSCoder) {
-		super.init(coder: aDecoder)
-		prepareView()
-	}
-	
-	/**
-	:name:	init
-	*/
-	public override init(frame: CGRect) {
-		super.init(frame: frame)
-		prepareView()
-	}
-	
-	/**
-	:name:	init
-	*/
-	public convenience init() {
-		self.init(frame: CGRectNull)
-	}
-	
-	/**
 	:name:	prepareView
 	*/
 	public func prepareView() {
 		clipsToBounds = false
+		prepareBottomBorderLayer()
 	}
 	
 	/**
@@ -196,7 +277,14 @@ public class TextField : UITextField {
 	*/
 	internal func textFieldDidBegin(textField: TextField) {
 		titleLabel?.text = placeholder
-		titleLabel?.textColor = 0 == text?.utf16.count ? titleLabelNormalColor : titleLabelHighlightedColor
+		if 0 == text?.utf16.count {
+			titleLabel?.textColor = titleLabelNormalColor
+			bottomBorderLayer.backgroundColor = titleLabelNormalColor?.CGColor
+			detailLabelHidden = true
+		} else {
+			titleLabel?.textColor = titleLabelHighlightedColor
+			bottomBorderLayer.backgroundColor = detailLabelHidden ? titleLabelHighlightedColor?.CGColor : detailLabelHighlightedColor?.CGColor
+		}
 	}
 	
 	/**
@@ -206,8 +294,10 @@ public class TextField : UITextField {
 		if 0 < text?.utf16.count {
 			showTitleLabel()
 			titleLabel?.textColor = titleLabelHighlightedColor
+			bottomBorderLayer.backgroundColor = detailLabelHidden ? titleLabelHighlightedColor?.CGColor : detailLabelHighlightedColor?.CGColor
 		} else if 0 == text?.utf16.count {
 			hideTitleLabel()
+			detailLabelHidden = true
 		}
 	}
 	
@@ -221,6 +311,7 @@ public class TextField : UITextField {
 			hideTitleLabel()
 		}
 		titleLabel?.textColor = titleLabelNormalColor
+		bottomBorderLayer.backgroundColor = detailLabelHidden ? titleLabelNormalColor?.CGColor : detailLabelHighlightedColor?.CGColor
 	}
 	
 	/**
@@ -233,7 +324,7 @@ public class TextField : UITextField {
 				v.alpha = 0
 			}
 			titleLabel?.text = placeholder
-			let h: CGFloat = v.font.stringSize(v.text!, constrainedToWidth: Double(bounds.width)).height
+			let h: CGFloat = v.font.pointSize
 			v.frame = CGRectMake(0, -h, bounds.width, h)
 			addSubview(v)
 			addTarget(self, action: "textFieldDidBegin:", forControlEvents: .EditingDidBegin)
@@ -243,14 +334,40 @@ public class TextField : UITextField {
 	}
 	
 	/**
+	:name:	prepareDetailLabel
+	*/
+	private func prepareDetailLabel() {
+		if let v: UILabel = detailLabel {
+			MaterialAnimation.animationDisabled {
+				v.hidden = true
+				v.alpha = 0
+			}
+			let h: CGFloat = v.font.pointSize
+			v.frame = CGRectMake(0, h + 12, bounds.width, h)
+			addSubview(v)
+			addTarget(self, action: "textFieldDidBegin:", forControlEvents: .EditingDidBegin)
+			addTarget(self, action: "textFieldDidChange:", forControlEvents: .EditingChanged)
+			addTarget(self, action: "textFieldDidEnd:", forControlEvents: .EditingDidEnd)
+		}
+	}
+	
+	/**
+	:name:	prepareBottomBorderLayer
+	*/
+	private func prepareBottomBorderLayer() {
+		layer.addSublayer(bottomBorderLayer)
+	}
+	
+	/**
 	:name:	showTitleLabel
 	*/
 	private func showTitleLabel() {
 		if let v: UILabel = titleLabel {
+			v.frame.size.height = v.font.pointSize
 			v.hidden = false
 			UIView.animateWithDuration(0.25, animations: {
 				v.alpha = 1
-				v.frame.origin.y = -v.frame.height
+				v.frame.origin.y = -v.frame.height - 4
 			})
 		}
 	}
@@ -262,7 +379,35 @@ public class TextField : UITextField {
 		if let v: UILabel = titleLabel {
 			UIView.animateWithDuration(0.25, animations: {
 				v.alpha = 0
-				v.frame.origin.y = -v.frame.height + 4
+				v.frame.origin.y = -v.frame.height
+			}) { _ in
+				v.hidden = true
+			}
+		}
+	}
+	
+	/**
+	:name:	showDetailLabel
+	*/
+	private func showDetailLabel() {
+		if let v: UILabel = detailLabel {
+			v.frame.size.height = v.font.pointSize
+			v.hidden = false
+			UIView.animateWithDuration(0.25, animations: {
+				v.alpha = 1
+				v.frame.origin.y = v.frame.height + 28
+			})
+		}
+	}
+	
+	/**
+	:name:	hideDetailLabel
+	*/
+	private func hideDetailLabel() {
+		if let v: UILabel = detailLabel {
+			UIView.animateWithDuration(0.25, animations: {
+				v.alpha = 0
+				v.frame.origin.y = v.frame.height + 20
 			}) { _ in
 				v.hidden = true
 			}