ios - 用户界面文本字段 : Bottom Border

Question

我正在创建底部边框文本字段。我是 UITextField 的子类。在这里:

 @IBDesignable class LinedTextField: UITextField {

@IBInspectable var borderColor: UIColor = UIColor.whiteColor() {
    didSet {
        let border = CALayer()
        border.borderColor = self.borderColor.CGColor
        border.frame = CGRect(x: 0, y: self.frame.size.height - borderWidth, width:  self.frame.size.width, height: self.frame.size.height)

        border.borderWidth = borderWidth
        self.layer.addSublayer(border)
        self.layer.masksToBounds = true
    }
}

@IBInspectable var borderWidth: CGFloat = 0.5 {
    didSet {
        let border = CALayer()
        border.borderColor = self.borderColor.CGColor
        border.frame = CGRect(x: 0, y: self.frame.size.height - borderWidth, width:  self.frame.size.width, height: self.frame.size.height)

        border.borderWidth = borderWidth
        self.layer.addSublayer(border)
        self.layer.masksToBounds = true
    }
}

override init(frame : CGRect) {
    super.init(frame : frame)
    setup()
}

convenience init() {
    self.init(frame:CGRectZero)
    setup()
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    setup()
}


override func awakeFromNib() {
    super.awakeFromNib()
    setup()
}

override func prepareForInterfaceBuilder() {
    super.prepareForInterfaceBuilder()
    setup()
}

func setup() {
    let border = CALayer()
    border.borderColor = self.borderColor.CGColor
    border.frame = CGRect(x: 0, y: self.frame.size.height - borderWidth, width:  self.frame.size.width, height: self.frame.size.height)

    border.borderWidth = borderWidth
    self.layer.addSublayer(border)
    self.layer.masksToBounds = true
}

override func layoutSubviews() {
    super.layoutSubviews()
}

然后在界面生成器中我设置了 2 个属性(边框颜色和边框宽度)，一切看起来都不错:

但是当我在真正的 5.5"设备上运行应用程序时，它看起来是这样的:

边框不如文本字段长。这里有什么问题吗？

Answer 1

我认为这是因为需要在 layoutSubviews 上计算边框。以下是有关如何执行此操作的示例(加上代码的简化):

在 Swift 3 中受支持

  @IBDesignable class UnderlinedTextField: UITextField {

let border = CALayer()

@IBInspectable var borderColor: UIColor = UIColor.white {
    didSet {
        setup()
    }
}

@IBInspectable var borderWidth: CGFloat = 0.5 {
    didSet {
        setup()
    }
}

override init(frame : CGRect) {
    super.init(frame : frame)
    setup()
}

convenience init() {
    self.init(frame:CGRect.zero)
    setup()
}

required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    setup()
}


override func awakeFromNib() {
    super.awakeFromNib()
    setup()
}

override func prepareForInterfaceBuilder() {
    super.prepareForInterfaceBuilder()
    setup()
}

func setup() {
    border.borderColor = self.borderColor.cgColor
    border.borderWidth = borderWidth
    self.layer.addSublayer(border)
    self.layer.masksToBounds = true
}

override func layoutSubviews() {
    super.layoutSubviews()
    border.frame = CGRect(x: 0, y: self.frame.size.height - borderWidth, width:  self.frame.size.width, height: self.frame.size.height)
}

override func textRect(forBounds bounds: CGRect) -> CGRect {
    return editingRect(forBounds: bounds)
}

override func placeholderRect(forBounds bounds: CGRect) -> CGRect {
    return editingRect(forBounds: bounds)
}

override func editingRect(forBounds bounds: CGRect) -> CGRect {
    return bounds.insetBy(dx: 10, dy: 0)
}

}

编辑: 我为文本区域添加了代码。在此示例中，有一个 20px 的水平插图。在 Apple 的文档中有关于 editingRectForBounds(及其 friend )的更多信息:https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextField_Class/#//apple_ref/occ/instm/UITextField/textRectForBounds :