DOCSEARCHbyAlgolia
Submit Docs

SkyFloatingLabelTextField Documentation

repository·main·Indexed 26 days ago

https://github.com/skyscanner/skyfloatinglabeltextfield

A customizable iOS UI component that implements the Float Label Pattern. It provides space-saving input fields with floating labels, support for icons via SkyFloatingLabelTextFieldWithIcon, RTL language detection, and built-in error and disabled states. The component is a subclass of UITextField and can be installed via CocoaPods, Carthage, or manual integration.

Tokens
2.1K
Snippets
6
Records
14
Agent score
38%

What's inside SkyFloatingLabelTextField

  3. Validate textfield input using errorMessage

    main
    To perform validation whenever the text changes, implement the textField(textField:range:string:) delegate method. This allows you to update the errorMessage dynamically as the user types. Alternatively, you can subclass the control and override becomeFirstResponder to clear errors when the user selects the field.

  6. Initialize SkyFloatingLabelTextField

    main

    To use the basic floating label pattern, instantiate the SkyFloatingLabelTextField class. You can set the placeholder and the title properties to provide context to the user. This component can be used via Interface Builder or programmatically.

    let textField = SkyFloatingLabelTextField(frame: CGRect(x: 10, y: 10, width: 200, height: 45))
textField.placeholder = "Name"
textField.title = "Your full name"
self.view.addSubview(textField)

  7. Handle error states and validation

    main

    The component supports an error state for field validation. When the errorMessage property is set to a non-empty string, the textfield is highlighted using the color specified in errorColor. To clear the error, set errorMessage to an empty string or nil.

    class MyViewController: UIViewController, UITextFieldDelegate {
    override func viewDidLoad() {
        let textField1 = SkyFloatingLabelTextField(frame: CGRect(x: 10, y: 10, width: 120, height: 45))
        textField1.placeholder = "Email"
        textField1.title = "Email address"
        textField1.errorColor = UIColor.redColor()
        textField1.addTarget(self, action: #selector(textFieldDidChange(_:)), for: .editingChanged)
        self.view.addSubview(textField1)
    }
    
    @objc func textFieldDidChange(_ textfield: UITextField) {
        if let text = textfield.text {
            if let floatingLabelTextField = textField as? SkyFloatingLabelTextField {
                if(text.characters.count < 3 || !text.containsString("@")) {
                    floatingLabelTextField.errorMessage = "Invalid email"
                }
                else {
                    floatingLabelTextField.errorMessage = ""
                }
            }
        }
    }
}

  8. Customize SkyFloatingLabelTextField via subclassing

    main

    You can extend the control by subclassing. Since it inherits from UITextField, standard overrides apply. Notable customization hooks include:

    • updateColors: Override to customize colors whenever the control state changes.
    • titleLabelRectForBounds(bounds:CGRect, editing:Bool): Override to change the bounds of the top title placeholder view.
    • textRectForBounds(bounds: CGRect): Override to change the bounds of the control (inherited).
    • editingRectForBounds(bounds: CGRect): Override to change the bounds when editing/selected (inherited).
    • placeholderRectForBounds(bounds: CGRect): Override to change the bounds of the placeholder view.
    • lineViewRectForBounds(bounds:CGRect, editing:Bool): Override to change the bounds of the bottom line view.

  10. Customize textfield colors and line height

    main

    You can customize the visual appearance of the textfield by setting properties for colors and line dimensions. Key properties include:

    • tintColor: The color of the blinking cursor.
    • textColor: The color of the input text.
    • lineColor: The color of the bottom line.
    • selectedTitleColor: The color of the title when the field is selected.
    • selectedLineColor: The color of the bottom line when the field is selected.
    • lineHeight: The bottom line height in points.
    • selectedLineHeight: The bottom line height when the field is selected.
    let lightGreyColor = UIColor(red: 197/255, green: 205/255, blue: 205/255, alpha: 1.0)
let darkGreyColor = UIColor(red: 52/255, green: 42/255, blue: 61/255, alpha: 1.0)
let overcastBlueColor = UIColor(red: 0, green: 187/255, blue: 204/255, alpha: 1.0)

let textField2 = SkyFloatingLabelTextField(frame: CGRect(x: 150, y: 10, width: 120, height: 45))
textField2.placeholder = "Last name"
textField2.title = "Family name"

textField2.tintColor = overcastBlueColor
textField2.textColor = darkGreyColor
textField2.lineColor = lightGreyColor
textField2.selectedTitleColor = overcastBlueColor
textField2.selectedLineColor = overcastBlueColor

textField2.lineHeight = 1.0
textField2.selectedLineHeight = 2.0
self.view.addSubview(textField2)

  11. Use icons with SkyFloatingLabelTextFieldWithIcon

    main

    To display icons on the right-hand side of the textfield, use the SkyFloatingLabelTextFieldWithIcon class. You can choose between two iconType modes:

    Using a Font

    Set iconType to .font. You must provide an iconFont (UIFont) and the iconText (the character/glyph string).

    Using an Image

    Set iconType to .image. You must provide an iconImage (UIImage).

    Additional icon customization properties:

    • iconColor: The color of the icon.
    • selectedIconColor: The color of the icon when selected.
    • iconMarginBottom: Precise vertical positioning.
    • iconMarginLeft: Precise horizontal positioning.
    • iconRotationDegrees: Rotation of the icon in degrees.