Custom UITextField written in Swift.
Using a floating label textfield gives an opportunity to avoid additional information labels. The main advantage is that the user keeps the field’s context after they’ve focused and entered a value. This provides for a more accessible, less frustrating experience.
- iOS 8.0+
- Xcode 8.1, 8.2, 8.3, and 9.0
- Swift 3.0, 3.1, 3.2, and 4.0
- Much cleaner experience.
- Flexible customization.
- Invalid input handling.
- Individual color palette.
// Initialization
let tf = YVTextField()
tf.frame = CGRect(x: 60, y: 200, width: view.frame.width - 120, height: 40)
// Setting highlighting functionality
tf.isHighlightedOnEdit = true
tf.highlightedColor = UIColor(hex: 0xFF8766)
// Setting up small placeholder
tf.smallPlaceholderColor = UIColor(hex: 0xB26B58)
tf.smallPlaceholderFont = UIFont.systemFont(ofSize: 12)
tf.smallPlaceholderText = "Enter your first name"
tf.smallPlaceholderPadding = 12
tf.smallPlaceholderLeftOffset = 0
// Settign up separator line
tf.separatorIsHidden = false
tf.separatorLineViewColor = tf.smallPlaceholderColor
tf.separatorLeftPadding = -8
tf.separatorRightPadding = -8
// Add image
tf.image = #imageLiteral(resourceName: "user")
tf.tintColor = UIColor(hex: 0x46B292)
// Customize placeholder
tf.placeholder = "Your name"
tf.placeholderColor = UIColor(hex: 0x422821)
tf.textColor = UIColor(hex: 0x46B292)
tf.font = UIFont(name: "HelveticaNeue-Light", size: 17)
tf.delegate = self
view.addSubview(tf) Result:
Basic implementation:
Drag and drop UITextField component to your storyboard.
After that go to the component's Identity inspector and type YVTextField in Class block.
Than go to the Attributes inspector and you will see next:
In general all customising properties are shown in example above.
Here is the list of them all with default values:
public var smallPlaceholderText: String = ""
public var smallPlaceholderColor: UIColor = .lightGray
public var smallPlaceholderPadding: CGFloat = 7
public var smallPlaceholderLeftOffset: CGFloat = 0
public var placeholderColor: UIColor = .gray
public var separatorLineViewColor: UIColor = .lightGray
public var separatorLeftPadding: CGFloat = 0
public var separatorRightPadding: CGFloat = 0
public var separatorBottomPadding: CGFloat = 0
public var separatorIsHidden: Bool = false
public var cornerRadius: CGFloat = 0
public var borderWidth: CGFloat = 0
public var borderColor: UIColor = .clear
public var textLeftOffst: CGFloat = 0
public var image: UIImage?
public var isHighlightedOnEdit: Bool = false
public var highlightedColor: UIColor = UIColor.red
public var errorMessage: String?
public var errorColor: UIColor = UIColor.redYou could change it directly from storyboard simply toggled isHighlightedOnEdit parameter to off to disable or on to enable highlighting.
Or programmatically:
yourTextField.isHighlightedOnEdit = true // to enable
yourTextField.isHighlightedOnEdit = false // to disableFor handling wrong input you have to implement UITextFieldDelegate methods, simply assign in your UIViewController:
yourTextField.delegate = selfAnd than implement, for example, textFieldDidEndEditing(_:) method:
func textFieldDidEndEditing(_ textField: UITextField) {
if textField == nicknameTF {
guard let text = textField.text else { return }
if text.characters.count < 5 {
nicknameTF.errorMessage = "The nickname must be at least 5 characters."
} else if text.characters.count > 30 {
nicknameTF.errorMessage = "The nickname may not be greater than 35 characters."
} else {
nicknameTF.errorMessage = nil
}
}
}As a result you have checked whether user entered fewer or more characters than needed.
Or check input text while typing in textField(_:shouldChangeCharactersIn:replacementString:) method.
func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
if textField == emailTF {
guard let email = textField.text else { return false }
emailTF.errorMessage = isEmailValid(email: email+string) ? nil : "The email must be valid email address"
}
return true
}
func textFieldShouldReturn(_ textField: UITextField) -> Bool {
if textField == emailTF {
textField.resignFirstResponder()
}
return true
}Simply drag and drop VTextField.swift to your project.