TextField with Label over the border at Top-Left position

Question

I need to implement outline textfield with placeholder in my swift project one like the Material UI. I tried googling for the same but could not found anything. Anyone know how to achieve it in swift? Reference Images:

Answer 1

Using this pod, you can get the same design

1. Take UIView on Storyboard and set constraints
2. Make class which is a subclass of UIView and import pods MaterialComponents.MaterialTextFields and MaterialComponents.MaterialTextFields_ColorThemer

class CustomOutlinedTxtField: UIView {

private var textFieldControllerFloating: MDCTextInputControllerOutlined!
var textField: MDCTextField!

@IBInspectable var placeHolder: String!
@IBInspectable var value: String!
@IBInspectable var primaryColor: UIColor! = .purple

override open func draw(_ rect: CGRect) {
    super.draw(rect)

    textField.frame = CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height)

}
open override func awakeFromNib() {
    super.awakeFromNib()
    setUpProperty()
}
func setUpProperty() {
    //Change this properties to change the propperties of text
    textField = MDCTextField(frame: CGRect(x: 0, y: 0, width: self.frame.size.width, height: self.frame.size.height))
    textField.placeholder = placeHolder
    textField.text = value

    //Change this properties to change the colors of border around text
    textFieldControllerFloating = MDCTextInputControllerOutlined(textInput: textField)

    textFieldControllerFloating.activeColor = primaryColor
    textFieldControllerFloating.floatingPlaceholderActiveColor = primaryColor
    textFieldControllerFloating.normalColor = UIColor.lightGray
    textFieldControllerFloating.inlinePlaceholderColor = UIColor.lightGray

    //Change this font to make borderRect bigger
    textFieldControllerFloating.inlinePlaceholderFont = UIFont.systemFont(ofSize: 14)
    textFieldControllerFloating.textInsets(UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0))

    self.addSubview(textField)
}

}

3. Assign that custom class to UIView

Result

Answer 2

You can use Material Components:-

It will be looking like this below.

https://material.io/components/text-fields/

Github repo - https://github.com/material-components/material-components-ios

Answer 3

you can also try this framework SkyFloatingLabelTextField , TextFieldEffects or TweeTextField

https://github.com/Skyscanner/SkyFloatingLabelTextField

https://github.com/oleghnidets/TweeTextField

https://github.com/raulriera/TextFieldEffects