在左上角位置的边框上带有标签的 TextField

Question

我需要在我的 swift 项目中实现带有占位符的大纲文本字段，例如 Material UI。我尝试用谷歌搜索相同但找不到任何东西。任何人都知道如何在 swift 中实现它？参考图片：

Answer 1

You can use Material Components:-

它看起来像下面这样。

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

Github 回购 - https://github.com/material-components/material-components-ios

Answer 2

你也可以试试这个框架 SkyFloatingLabelTextField , TextFieldEffects 或者 TweeTextField

https://github.com/Skyscanner/SkyFloatingLabelTextField

https://github.com/oleghnidets/TweeTextField

https://github.com/raulriera/TextFieldEffects

Answer 3

使用这个pod，你可以得到相同的设计

在 Storyboard 上取 UIView 并设置约束
创建 class，它是 UIView 的子 class 并导入 pods MaterialComponents.MaterialTextFields 和 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)
}

}

将自定义 class 分配给 UIView

结果

在左上角位置的边框上带有标签的 TextField

TextField with Label over the border at Top-Left position

uitextfield

ios

swift

material-components-ios