没有边框的 Swift 文本字段答案

【问题标题】：Swift textfields without border没有边框的 Swift 文本字段
【发布时间】：2017-09-06 04:16:48
【问题描述】：

我是 swift 新手。您的帮助将不胜感激。

我的应用程序中有两个文本字段。我将如何创建与下图中相同的 UI。

我想创建在屏幕截图中给出的边框下方只有一个的文本字段。

https://www.dropbox.com/s/wlizis5zybsvnfz/File%202017-04-04%2C%201%2052%2024%20PM.jpeg?dl=0

【问题讨论】：

这对于 IB 来说非常简单，不要对文本字段使用任何边框，并在文本字段下方添加一个标签，其宽度与文本字段相同，高度为 1 或 2 px，删除标签文本 & 最后最重要的是给标签一个背景颜色（EX：灰色），就是这样......希望它有所帮助
stackoverflow.com/a/26801251/4475605

标签： ios swift uitextfield

【解决方案1】：

@IBOutlet var textField: UITextField! {
  didSet {
    let border = CALayer()
    let width: CGFloat = 1 // this manipulates the border's width
    border.borderColor = UIColor.darkGray.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
  }
}

【讨论】：

【解决方案2】：

创建 UITextField 的子类，以便您可以跨多个视图重用此组件，而无需重新实现绘图代码。通过@IBDesignable 和@IBInspectable 公开各种属性，您可以控制故事板中的颜色和厚度。另外 - 通过覆盖layoutSubviews 实现“重绘”，因此如果您使用自动布局并且存在方向或可能基于约束的动画，则边框将调整。话虽如此 - 实际上你的子类可能看起来像这样：

import UIKit

class Field: UITextField {

    private let border = CAShapeLayer()

    @IBInspectable var color: UIColor = UIColor.blue {
        didSet {
            border.strokeColor = color.cgColor
        }
    }

    @IBInspectable var thickness: CGFloat = 1.0 {
        didSet {
            border.lineWidth = thickness
        }
    }

    override func draw(_ rect: CGRect) {
        self.borderStyle = .none
        let from = CGPoint(x: 0, y: rect.height)
        let here = CGPoint(x: rect.width, y: rect.height)
        let path = borderPath(start: from, end: here).cgPath
        border.path = path
        border.strokeColor = color.cgColor
        border.lineWidth = thickness
        border.fillColor = nil
        layer.addSublayer(border)
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        let from = CGPoint(x: 0, y: bounds.height)
        let here = CGPoint(x: bounds.width, y: bounds.height)
        border.path = borderPath(start: from, end: here).cgPath
    }

    private func borderPath(start: CGPoint, end: CGPoint) -> UIBezierPath {
        let path = UIBezierPath()
        path.move(to: start)
        path.addLine(to: end)
        return path
    }
}

然后，当您向故事板添加文本字段视图时 - 更新 Identity Inspector 中的类以使用此子类 Field - 然后在属性检查器中，您可以设置颜色和粗细。

【讨论】：

【解决方案3】：

在 UITextField 的底部添加边框调用下面的函数：

func setTextFieldBorder(_ dimension: CGRect) -> CALayer {
    let border = CALayer()
    let width = CGFloat(2.0)
    border.borderColor = UIColor.darkGray.cgColor
    border.frame = CGRect(x: 0, y: dimension.size.height - width, width:  dimension.size.width, height: dimension.size.height)

    border.borderWidth = width
    return border

}

如何在 textField 中设置 UITextField 边框，示例代码如下：

txtDemo.layer.addSublayer(setTextFieldBorder(txtDemo.frame))
txtDemo.layer.masksToBounds = true

其中 txtDemo 是 UITextField 的 IBOutlet。

【讨论】：