Question

我要创建这个TextField

所以我写了这个课

class UnderLineTextField:UITextField{

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        let border = CALayer()
        let width = CGFloat(2.0)
        border.borderColor = UIColor.darkgray().cgColor
        border.frame = CGRect(x: 0, y: frame.size.height - width, width: frame.size.width, height: frame.size.height)

        textColor = UIColor.gold()
        backgroundColor = UIColor.clear

        border.borderWidth = width
        layer.addSublayer(border)
        layer.masksToBounds = true

        attributedPlaceholder = NSAttributedString(string: "",
                                                  attributes: [NSAttributedStringKey.foregroundColor: UIColor.darkgray()])}
}

但是有两个问题

下划线不等于TextField，如果我增加宽度width: frame.size.width + 500，可以解决此问题，但是为什么呢？我应该传递给width:的正确值是什么？
attributedPlaceholder将替换在xib中设置的占位符，如何在不添加空字符串的情况下更改占位符？

Answer 1

下划线不等于TextField，如果我添加更多的width宽度：frame.size.width + 500，该问题可以解决，但是为什么呢？我应该传递给width的正确值是什么？？

您应该将绘图下划线代码放在draw(_ rect: CGRect)而不是init上。由于您使用autolayout，因此init中获得的宽度与运行应用程序时可以看到的width有所不同。

attributedPlaceholder将替换我在xib中设置的占位符，如何在不添加空字符串的情况下更改占位符？

您也可以在draw(_ rect: CGRect)中基于占位符重绘attributedPlaceholder。

attributedPlaceholder = NSAttributedString(
    string: self.placeholder,
    attributes: [NSAttributedStringKey.foregroundColor: UIColor.darkgray()]
)

Answer 2

看来您的代码还可以。

使用以下代码设置占位符：

class UnderLineTextField:UITextField{

    @IBInspectable var borderColor: UIColor = UIColor.white {
        didSet {
            layer.borderColor = borderColor.cgColor

        }
    }
    @IBInspectable var placeHolderText: String = "default place holder" {
        didSet {
            attributedPlaceholder = NSAttributedString(string: placeHolderText,
                                                       attributes: [NSAttributedStringKey.foregroundColor: UIColor.darkGray])}

        }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        let border = CALayer()
        let width = CGFloat(2.0)
        border.borderColor = UIColor.darkGray.cgColor
        border.frame = CGRect(x: 0, y: frame.size.height - width, width: frame.size.width, height: frame.size.height)

        textColor = UIColor.lightGray
        backgroundColor = UIColor.clear

        border.borderWidth = width
        layer.addSublayer(border)
        layer.masksToBounds = true

        attributedPlaceholder = NSAttributedString(string: placeHolderText,
                                                   attributes: [NSAttributedStringKey.foregroundColor: UIColor.darkGray])}
}

，然后在情节提要中设置占位符：

结果将如下所示：

Answer 3

对于UITextField下划线，请使用此...

let border = CALayer()
let width = CGFloat(1.0)
border.borderColor = UIColor.gray.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

Answer 4

嘿，已经有很多答案了：），让我们看看这个详细的答案是否可以帮助您实现更多目标：如果可能的话，我更喜欢使用扩展而不是继承。

extension UITextField {

func setTextColor(_ color: UIColor, font: UIFont) {

    self.textColor = color
    self.font = font
}

func setBottomBorder(with color: UIColor, width: CGFloat) {
    self.borderStyle = .none
    self.layer.backgroundColor = UIColor.white.cgColor // bg color of your choice

    self.layer.masksToBounds = false
    self.layer.shadowColor = color.cgColor
    self.layer.shadowOffset = CGSize(width: 0.0, height: width)
    self.layer.shadowOpacity = 1.0
    self.layer.shadowRadius = 0.0
}


func setPlaceHolderAttributes(placeHolderText : String, colour : UIColor , font : UIFont){

    self.attributedPlaceholder = NSAttributedString(string:placeHolderText, attributes:[NSAttributedStringKey.foregroundColor: colour , NSAttributedStringKey.font : font])
}

}

// MARK：提供文字插图

class MyTextField: UITextField {

override func textRect(forBounds bounds: CGRect) -> CGRect {
    return CGRect.init(x:10, y:2, width:bounds.width-20, height:bounds.height - 4)
}

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

}

我更喜欢从Code配置UI，它将加快您的编码速度，并实现从一个地方进行项目明智的更改，因此您可以从以下代码中进行操作：

 let font: UIFont = UIFont.systemFont(ofSize: 14.0)
    let placeHolderTextColor: UIColor = UIColor.brown
    let textColor: UIColor = UIColor.darkText

    nameTextField.setBottomBorder(with: UIColor.darkGray, width: 1.0)
    passwordTextField.setBottomBorder(with: UIColor.darkGray, width: 1.0)

    nameTextField.setPlaceHolderAttributes(placeHolderText: "Name", colour: placeHolderTextColor, font: font)
    nameTextField.setTextColor(textColor, font: font)

    passwordTextField.setPlaceHolderAttributes(placeHolderText: "Password", colour: placeHolderTextColor, font: font)
    passwordTextField.setTextColor(textColor, font: font)

希望这会有所帮助：）

自定义UITextField中的边框宽度和占位符

4 个答案: