Skip to content

M
Material
Commit 9515e8e7 by Daniel Dahan
Options

updated TextField to allow for a detail label

parent b7519596
Showing with 220 additions and 73 deletions
Examples/Programmatic/TextField/TextField.xcodeproj/project.pbxproj
...@@ -7,8 +7,6 @@ ...@@ -7,8 +7,6 @@
objects = { objects = {
/* Begin PBXBuildFile section */ /* 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 */; }; 966F57A11C226BAA009185B7 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 966F57A01C226BAA009185B7 /* AppDelegate.swift */; };
966F57A31C226BAA009185B7 /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 966F57A21C226BAA009185B7 /* ViewController.swift */; }; 966F57A31C226BAA009185B7 /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 966F57A21C226BAA009185B7 /* ViewController.swift */; };
966F57A81C226BAA009185B7 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 966F57A71C226BAA009185B7 /* Assets.xcassets */; }; 966F57A81C226BAA009185B7 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 966F57A71C226BAA009185B7 /* Assets.xcassets */; };
...@@ -22,7 +20,6 @@ ...@@ -22,7 +20,6 @@
dstPath = ""; dstPath = "";
dstSubfolderSpec = 10; dstSubfolderSpec = 10;
files = ( files = (
964F5D0D1C24823400DD950F /* MaterialKit.framework in Embed Frameworks */,
); );
name = "Embed Frameworks"; name = "Embed Frameworks";
runOnlyForDeploymentPostprocessing = 0; runOnlyForDeploymentPostprocessing = 0;
...@@ -30,7 +27,6 @@ ...@@ -30,7 +27,6 @@
/* End PBXCopyFilesBuildPhase section */ /* End PBXCopyFilesBuildPhase section */
/* Begin PBXFileReference 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; }; 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>"; }; 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>"; }; 966F57A21C226BAA009185B7 /* ViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ViewController.swift; sourceTree = "<group>"; };
...@@ -44,7 +40,6 @@ ...@@ -44,7 +40,6 @@
isa = PBXFrameworksBuildPhase; isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647; buildActionMask = 2147483647;
files = ( files = (
964F5D0C1C24823400DD950F /* MaterialKit.framework in Frameworks */,
); );
runOnlyForDeploymentPostprocessing = 0; runOnlyForDeploymentPostprocessing = 0;
}; };
...@@ -54,7 +49,6 @@ ...@@ -54,7 +49,6 @@
966F57941C226BAA009185B7 = { 966F57941C226BAA009185B7 = {
isa = PBXGroup; isa = PBXGroup;
children = ( children = (
964F5D0B1C24823400DD950F /* MaterialKit.framework */,
966F579F1C226BAA009185B7 /* TextField */, 966F579F1C226BAA009185B7 /* TextField */,
966F579E1C226BAA009185B7 /* Products */, 966F579E1C226BAA009185B7 /* Products */,
); );
......
Examples/Programmatic/TextField/TextField/ViewController.swift
...@@ -20,15 +20,15 @@ import UIKit ...@@ -20,15 +20,15 @@ import UIKit
import MaterialKit import MaterialKit
class ViewController: UIViewController, TextFieldDelegate { class ViewController: UIViewController, TextFieldDelegate {
private lazy var titleField: TextField = TextField() private lazy var nameField: TextField = TextField()
private lazy var descriptionField: TextField = TextField() private lazy var emailField: TextField = TextField()
override func viewDidLoad() { override func viewDidLoad() {
super.viewDidLoad() super.viewDidLoad()
prepareView() prepareView()
prepareTitleField() prepareNameField()
prepareDescriptionField() prepareEmailField()
} }
/** /**
...@@ -39,39 +39,43 @@ class ViewController: UIViewController, TextFieldDelegate { ...@@ -39,39 +39,43 @@ class ViewController: UIViewController, TextFieldDelegate {
} }
/** /**
:name: prepareTitleField :name: prepareNameField
:description: A preparation helper for titleField. :description: A preparation helper for nameField.
*/ */
private func prepareTitleField() { private func prepareNameField() {
titleField.delegate = self nameField.delegate = self
titleField.frame = CGRectMake(57, 100, 300, 24) nameField.frame = CGRectMake(57, 100, 300, 24)
titleField.placeholder = "Title" nameField.placeholder = "First Name"
titleField.font = RobotoFont.regularWithSize(20) nameField.font = RobotoFont.regularWithSize(20)
titleField.textColor = MaterialColor.black nameField.textColor = MaterialColor.black
titleField.titleLabel = UILabel() nameField.titleLabel = UILabel()
titleField.titleLabel!.font = RobotoFont.mediumWithSize(12) nameField.titleLabel!.font = RobotoFont.mediumWithSize(12)
titleField.titleLabelNormalColor = MaterialColor.grey.lighten1 nameField.titleLabelNormalColor = MaterialColor.grey.lighten2
titleField.titleLabelHighlightedColor = MaterialColor.blue.accent3 nameField.titleLabelHighlightedColor = MaterialColor.blue.accent3
titleField.clearButtonMode = .WhileEditing nameField.clearButtonMode = .WhileEditing
view.addSubview(titleField) view.addSubview(nameField)
} }
/** /**
:name: prepareDescriptionField :name: prepareEmailField
:description: A preparation helper for descriptionField. :description: A preparation helper for emailField.
*/ */
private func prepareDescriptionField() { private func prepareEmailField() {
descriptionField.delegate = self emailField.delegate = self
descriptionField.frame = CGRectMake(57, 150, 300, 24) emailField.frame = CGRectMake(57, 200, 300, 24)
descriptionField.placeholder = "Description" emailField.placeholder = "Email"
descriptionField.font = RobotoFont.regularWithSize(20) emailField.font = RobotoFont.regularWithSize(20)
descriptionField.textColor = MaterialColor.black emailField.textColor = MaterialColor.black
descriptionField.titleLabel = UILabel() emailField.titleLabel = UILabel()
descriptionField.titleLabel!.font = RobotoFont.mediumWithSize(12) emailField.titleLabel!.font = RobotoFont.mediumWithSize(12)
descriptionField.titleLabelNormalColor = MaterialColor.grey.lighten1 emailField.titleLabelNormalColor = MaterialColor.grey.lighten2
descriptionField.titleLabelHighlightedColor = MaterialColor.blue.accent3 emailField.titleLabelHighlightedColor = MaterialColor.blue.accent3
descriptionField.clearButtonMode = .WhileEditing emailField.clearButtonMode = .WhileEditing
view.addSubview(descriptionField) 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 { ...@@ -81,6 +85,9 @@ class ViewController: UIViewController, TextFieldDelegate {
*/ */
func textFieldShouldReturn(textField: UITextField) -> Bool { func textFieldShouldReturn(textField: UITextField) -> Bool {
textField.resignFirstResponder() textField.resignFirstResponder()
if textField == emailField {
(textField as! TextField).detailLabelHidden = false
}
return false return false
} }
......
README.md
...@@ -73,13 +73,14 @@ A TextField is an excellent way to improve UX. Checkout the Examples directory f ...@@ -73,13 +73,14 @@ A TextField is an excellent way to improve UX. Checkout the Examples directory f
```swift ```swift
let titleField: TextField = TextField(frame: CGRectMake(57, 100, 300, 24)) let titleField: TextField = TextField(frame: CGRectMake(57, 100, 300, 24))
titleField.placeholder = "Title" nameField.placeholder = "First Name"
titleField.font = RobotoFont.regularWithSize(20) nameField.font = RobotoFont.regularWithSize(20)
titleField.textColor = MaterialColor.black nameField.textColor = MaterialColor.black
titleField.titleLabel = UILabel() nameField.titleLabel = UILabel()
titleField.titleLabel!.font = RobotoFont.mediumWithSize(12) nameField.titleLabel!.font = RobotoFont.mediumWithSize(12)
titleField.titleLabelNormalColor = MaterialColor.grey.lighten1 nameField.titleLabelNormalColor = MaterialColor.grey.lighten2
titleField.titleLabelHighlightedColor = MaterialColor.blue.accent3 nameField.titleLabelHighlightedColor = MaterialColor.blue.accent3
nameField.clearButtonMode = .WhileEditing
// Add titleField to UIViewController. // Add titleField to UIViewController.
view.addSubview(titleField) view.addSubview(titleField)
......
Sources/TextField.swift
...@@ -22,6 +22,11 @@ public protocol TextFieldDelegate : UITextFieldDelegate {} ...@@ -22,6 +22,11 @@ public protocol TextFieldDelegate : UITextFieldDelegate {}
public class TextField : UITextField { public class TextField : UITextField {
/** /**
:name: bottomBorderLayer
*/
public private(set) lazy var bottomBorderLayer: CAShapeLayer = CAShapeLayer()
/**
:name: backgroundColor :name: backgroundColor
*/ */
public override var backgroundColor: UIColor? { public override var backgroundColor: UIColor? {
...@@ -79,11 +84,54 @@ public class TextField : UITextField { ...@@ -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 :name: titleLabelNormalColor
*/ */
public var titleLabelNormalColor: UIColor? { public var titleLabelNormalColor: UIColor? {
didSet { didSet {
titleLabel?.textColor = titleLabelNormalColor titleLabel?.textColor = titleLabelNormalColor
bottomBorderLayer.backgroundColor = titleLabelNormalColor?.CGColor
} }
} }
...@@ -93,6 +141,11 @@ public class TextField : UITextField { ...@@ -93,6 +141,11 @@ public class TextField : UITextField {
public var titleLabelHighlightedColor: UIColor? public var titleLabelHighlightedColor: UIColor?
/** /**
:name: detailLabelHighlightedColor
*/
public var detailLabelHighlightedColor: UIColor?
/**
:name: titleLabel :name: titleLabel
*/ */
public var titleLabel: UILabel? { public var titleLabel: UILabel? {
...@@ -102,12 +155,62 @@ public class TextField : UITextField { ...@@ -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 :name: layoutSublayersOfLayer
*/ */
public override func layoutSublayersOfLayer(layer: CALayer) { public override func layoutSublayersOfLayer(layer: CALayer) {
super.layoutSublayersOfLayer(layer) super.layoutSublayersOfLayer(layer)
if self.layer == layer { if self.layer == layer {
bottomBorderLayer.frame = CGRectMake(0, bounds.height + 8, bounds.width, 1)
} }
} }
...@@ -162,33 +265,11 @@ public class TextField : UITextField { ...@@ -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 :name: prepareView
*/ */
public func prepareView() { public func prepareView() {
clipsToBounds = false clipsToBounds = false
prepareBottomBorderLayer()
} }
/** /**
...@@ -196,7 +277,14 @@ public class TextField : UITextField { ...@@ -196,7 +277,14 @@ public class TextField : UITextField {
*/ */
internal func textFieldDidBegin(textField: TextField) { internal func textFieldDidBegin(textField: TextField) {
titleLabel?.text = placeholder 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 { ...@@ -206,8 +294,10 @@ public class TextField : UITextField {
if 0 < text?.utf16.count { if 0 < text?.utf16.count {
showTitleLabel() showTitleLabel()
titleLabel?.textColor = titleLabelHighlightedColor titleLabel?.textColor = titleLabelHighlightedColor
bottomBorderLayer.backgroundColor = detailLabelHidden ? titleLabelHighlightedColor?.CGColor : detailLabelHighlightedColor?.CGColor
} else if 0 == text?.utf16.count { } else if 0 == text?.utf16.count {
hideTitleLabel() hideTitleLabel()
detailLabelHidden = true
} }
} }
...@@ -221,6 +311,7 @@ public class TextField : UITextField { ...@@ -221,6 +311,7 @@ public class TextField : UITextField {
hideTitleLabel() hideTitleLabel()
} }
titleLabel?.textColor = titleLabelNormalColor titleLabel?.textColor = titleLabelNormalColor
bottomBorderLayer.backgroundColor = detailLabelHidden ? titleLabelNormalColor?.CGColor : detailLabelHighlightedColor?.CGColor
} }
/** /**
...@@ -233,7 +324,7 @@ public class TextField : UITextField { ...@@ -233,7 +324,7 @@ public class TextField : UITextField {
v.alpha = 0 v.alpha = 0
} }
titleLabel?.text = placeholder 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) v.frame = CGRectMake(0, -h, bounds.width, h)
addSubview(v) addSubview(v)
addTarget(self, action: "textFieldDidBegin:", forControlEvents: .EditingDidBegin) addTarget(self, action: "textFieldDidBegin:", forControlEvents: .EditingDidBegin)
...@@ -243,14 +334,40 @@ public class TextField : UITextField { ...@@ -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 :name: showTitleLabel
*/ */
private func showTitleLabel() { private func showTitleLabel() {
if let v: UILabel = titleLabel { if let v: UILabel = titleLabel {
v.frame.size.height = v.font.pointSize
v.hidden = false v.hidden = false
UIView.animateWithDuration(0.25, animations: { UIView.animateWithDuration(0.25, animations: {
v.alpha = 1 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 { ...@@ -262,7 +379,35 @@ public class TextField : UITextField {
if let v: UILabel = titleLabel { if let v: UILabel = titleLabel {
UIView.animateWithDuration(0.25, animations: { UIView.animateWithDuration(0.25, animations: {
v.alpha = 0 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 }) { _ in
v.hidden = true v.hidden = true
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment