UITextField：底部边框

Posted 2023-03-11

【中文标题】UITextField：底部边框

【英文标题】：UITextField: Bottom Border

【发布时间】：2016-05-07 13:18:41

【问题描述】：

我正在创建底部边框文本字段。我是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" 设备上运行应用程序时，它看起来是这样的：

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

【参考方案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：

【讨论】：

谢谢！以及如何改变文字和边框之间的距离？

嘿，我刚刚用textRectForBounds（及其朋友）代码编辑了我的帖子。它应该做你需要的。

【参考方案2】：

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)

    

【参考方案3】：

  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

【讨论】：

如何增加文字和边框的距离？