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＆＃34;上运行应用程序时设备，它看起来像这样：

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

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（及其朋友）中有更多信息：https://developer.apple.com/library/ios/documentation/UIKit/Reference/UITextField_Class/#//apple_ref/occ/instm/UITextField/textRectForBounds：

Answer 2

  let border = CALayer()
  border.borderColor = UIColor.blackColor().CGColor
  border.frame = CGRectMake(-30, textField.frame.size.height - 1.0, textField.frame.size.width*1.5 , 1.0)
  border.borderWidth = 1.0
  textField.layer.addSublayer(border)
  textField.layer.masksToBounds = true

Answer 3

import UIKit

@IBDesignable
class MyTextField: UITextField {

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

        setupView()
    }

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

        setupView()
    }

    func setupView(){

        self.borderStyle = UITextBorderStyle.None
        let border = CALayer()
        let borderWidth: CGFloat = 2
        border.borderColor = UIColor(red: 5/255, green: 84/255, blue: 115/255, alpha: 1.0).CGColor
        border.frame = CGRectMake(0, self.frame.size.height - borderWidth, self.frame.size.width, self.frame.size.height)
        border.borderWidth = borderWidth
        self.layer.addSublayer(border)

    }

}

UITextField：底部边框

3 个答案: