ios - MDCTextField() 未正确显示

Question

我有一个简单的 UIViewController，我正在尝试学习如何配置 MDCTextField。

我有两个错误

文本字段不可编辑

帮助文本显示在文本字段的顶部而不是其下方。

如何解决这两个错误？或者这种文本字段是否有更好的库。

这里是我们点击它之前的文本字段。 您可以看到帮助文本位于文本字段的顶部。



这是单击后的文本字段。 您可以看到占位符文本确实 float 并且占位符文本和下划线确实改变了颜色，但是我仍然无法输入文本并且帮助文本仍然在顶部而不是在下方。



这是示例代码

let leftpad: CGFloat = 16

import UIKit
import MaterialComponents.MaterialTextFields

class ViewController: UIViewController, UIScrollViewDelegate {  // ,   UITextFieldDelegate

var containerHeight : CGFloat = 1000
let scrollView = UIScrollView()
var textFieldFloating : MDCTextField!
var textFieldControllerFloating = MDCTextInputControllerUnderline()

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.

    // Container
    containerView.delegate = self
    view.addSubview(containerView)
    containerView.contentSize = CGSize(width: view.frame.width, height: containerHeight)
    containerView.autoresizingMask = UIViewAutoresizing.flexibleBottomMargin
    containerView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 0).isActive = true
    containerView.topAnchor.constraint(equalTo: view.topAnchor, constant: 0).isActive = true
    containerView.widthAnchor.constraint(equalTo: view.widthAnchor, constant: 0).isActive = true
    containerView.heightAnchor.constraint(equalTo: view.heightAnchor, constant: 0).isActive = true

    // Text
    textFieldFloating = MDCTextField()
    textFieldFloating.translatesAutoresizingMaskIntoConstraints = false
    // textFieldFloating.delegate = self
    textFieldFloating.placeholder = "Name"
    textFieldFloating.isEnabled = true
    textFieldFloating.isUserInteractionEnabled = true
    textFieldFloating.clearButtonMode = .whileEditing
    textFieldControllerFloating = MDCTextInputControllerUnderline(textInput: textFieldFloating)
    textFieldControllerFloating.helperText = "Enter a name"
    textFieldControllerFloating.leadingUnderlineLabelTextColor = UIColor.darkGray       // The helper text
    textFieldControllerFloating.trailingUnderlineLabelTextColor = UIColor.green
    textFieldControllerFloating.inlinePlaceholderColor = UIColor.lightGray              // inline label
    textFieldControllerFloating.borderFillColor = UIColor.white
    textFieldControllerFloating.isFloatingEnabled = true

    textFieldControllerFloating.activeColor = UIColor.orange                            // active label & underline
    textFieldControllerFloating.normalColor = UIColor.lightGray                         // default underline
    textFieldControllerFloating.errorColor = UIColor.red
    // textFieldControllerFloating.floatingPlaceholderNormalColor = UIColor.magenta

    containerView.addSubview(textFieldFloating)

}

override func viewDidLayoutSubviews() {

    // containerView.view.layout( textFieldFloating).center().left(leftpad).right(leftpad)
    textFieldFloating.topAnchor.constraint(equalTo: containerView.topAnchor, constant : 40 ).isActive = true
    textFieldFloating.leftAnchor.constraint(equalTo: containerView.leftAnchor, constant : leftpad ).isActive = true
    textFieldFloating.widthAnchor.constraint(equalTo: containerView.widthAnchor, constant : -leftpad * 2).isActive = true
    textFieldFloating.heightAnchor.constraint(equalToConstant: 40).isActive = true
}


override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}


// The container
let containerView: UIScrollView = {
    let view = UIScrollView()
    view.backgroundColor = UIColor.white
    view.translatesAutoresizingMaskIntoConstraints = false
    view.layer.masksToBounds = true                          // This makes the rounded corners visible
    let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(handleContainerTap))
    view.isUserInteractionEnabled = true
    view.addGestureRecognizer(tapGestureRecognizer)
    return view
}()
@objc func handleContainerTap() {
    resignFirstResponderListOnContainerTap()
}
func resignFirstResponderListOnContainerTap() {
    // tfName.resignFirstResponder()
}



}

Answer 1

试试 删除 MDCTextfield 的高度限制.我也遇到了同样的问题，并在删除高度约束后得到了修复，因为 MDCTexfield 需要它自己的高度才能正常运行。