当 UITextField 是 ScrollView 的子视图时如何为 UITextField 添加下划线边框答案

【问题标题】：How To Add an Underline Border to a UITextField When it is a SubView of ScrollView当 UITextField 是 ScrollView 的子视图时如何为 UITextField 添加下划线边框
【发布时间】：2017-04-10 05:39:42
【问题描述】：

当 UITextfield 是使用 Swift 构建的 iOS 应用程序中的 UIScrollView 的子视图时，我正在尝试以编程方式为它创建下划线边框。我已经设法实现了这一点，但只有当 UITextfield 是视图的子视图时，如我的应用程序的以下屏幕截图所示。

UITextfield with an Underline Border

现在我希望 UITextField 成为同一视图中 UIScrollView 的子视图，但不显示下划线边框。

我通过在 viewDidLayoutSubviews 方法中创建一个 CALayer 成功地在上面的屏幕截图中创建了下划线边框，如下所示。

    let usernameTextField = UITextField()

    override func viewDidLoad() {
        usernameTextField.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(usernameTextField)
        let constraints: [NSLayoutConstraint] = [
        usernameTextField.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor, constant: 20),
        usernameTextField.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor),
        usernameTextField.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor)
        ]
        NSLayoutConstraint.activate(constraints)
    }

    override func viewDidLayoutSubviews() {
            let textField = usernameTextField
            let border = CALayer()
            let width = CGFloat(1.0)
            border.borderColor = UIColor(red:0.61, green:0.61, blue:0.61, alpha:1.0).cgColor
            border.frame = CGRect(x: 0, y: textField.frame.size.height - width, width:  textField.frame.size.width, height: textField.frame.size.height)

            border.borderWidth = width

            textField.layer.addSublayer(border)

            textField.layer.masksToBounds = true

    }

但是当 UITextField 是 UIScrollView 的子视图时，这将不起作用。这是我尝试过的：

    let usernameTextField = UITextField()
    let scrollView = UIScrollView()

override func viewDidLoad() {
    usernameTextField.translatesAutoresizingMaskIntoConstraints = false
    scrollView.translatesAutoresizingMaskIntoConstraints = false
    scrollView.addSubview(usernameTextField)
    view.addSubview(scrollView)
    let scrollViewConstraints: [NSLayoutConstraint] = [
        scrollView.topAnchor.constraint(equalTo: topLayoutGuide.bottomAnchor),
        scrollView.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor),
        scrollView.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor),
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20)
    ]

    NSLayoutConstraint.activate(scrollViewConstraints)
    let constraints: [NSLayoutConstraint] = [
    usernameTextField.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 20),
        usernameTextField.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
        usernameTextField.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor) 
    ]
    NSLayoutConstraint.activate(constraints)
  }

   override func viewDidLayoutSubviews() {
        let textField = usernameTextField
        let border = CALayer()
        let width = CGFloat(1.0)
        border.borderColor = UIColor(red:0.61, green:0.61, blue:0.61, alpha:1.0).cgColor
        border.frame = CGRect(x: 0, y: textField.frame.size.height - width, width:  textField.frame.size.width, height: textField.frame.size.height)

        border.borderWidth = width

        textField.layer.addSublayer(border)

        textField.layer.masksToBounds = true

}

当 UITextField 是同一视图中 UIScrollView 的子视图时，任何人都可以建议一种方法吗？

编辑

我已经接受了 Matthias 的回答，他建议我将 UIView 作为边框而不是 SubLayer。

    let border = UIView()
    border.backgroundColor =UIColor(red:0.61, green:0.61, blue:0.61, alpha:1.0)
            border.translatesAutoresizingMaskIntoConstraints = false

    textField.addSubview(border)

        border.heightAnchor.constraint(equalToConstant: 1).isActive = true
        border.widthAnchor.constraint(equalTo:textField.widthAnchor).isActive = true
        border.bottomAnchor.constraint(equalTo: textField.bottomAnchor, constant: -1).isActive = true
        border.leftAnchor.constraint(equalTo: textField.leftAnchor).isActive = true

这回答了这个问题，但只是出于好奇，如果有人也可以解释是否可以使用子图层实现相同的效果，我将不胜感激。

【问题讨论】：

标签： ios swift uiscrollview uitextfield subview

【解决方案1】：

不要添加子图层，而是尝试添加子视图:)

    let border = UIView()
border.backgroundColor =UIColor(red:0.61, green:0.61, blue:0.61, alpha:1.0)
                border.translatesAutoresizingMaskIntoConstraints = false

textField.addSubview(border)

            border.heightAnchor.constraint(equalToConstant: 1).isActive = true
            border.widthAnchor.constraint(equalTo:textField.widthAnchor).isActive = true
            border.bottomAnchor.constraint(equalTo: textField.bottomAnchor, constant: -1).isActive = true
            border.leftAnchor.constraint(equalTo: textField.leftAnchor).isActive = true

【讨论】：

太棒了。边界正在显示。为了帮助其他人，您可能需要删除 cgColor，因为边框只是 UIView 而不是 CALayer。但你的回答奏效了。