如何创建带下划线的 UITextField答案

【问题标题】：How to create underlined UITextField如何创建带下划线的 UITextField
【发布时间】：2015-08-22 11:27:28
【问题描述】：

这里是 iOS 菜鸟

当我向 ViewController 添加默认的 UITextField 时，它看起来像这样：

我的设计师希望我将UITextField 变成这样（即背景是透明的，并且只有一个下划线：

我该怎么做？应该要求我的设计师将图像设置为UITextField 的背景。图像应该是什么样子？图片应该是=蓝色背景+下划线（减去我猜的数字）

是吗？

更新：根据以下方向（来自@Ashish Kakkad），在 Swift 中将此代码添加到 ViewDidLoad：

    var bottomLine = CALayer()
    bottomLine.frame = CGRectMake(0.0, view.frame.height - 1, view.frame.width, 1.0)
    bottomLine.backgroundColor = UIColor.whiteColor().CGColor
    tf_editPassword.borderStyle = UITextBorderStyle.None
    tf_editPassword.layer.addSublayer(bottomLine)

这几乎可行，但问题是所有边边框都消失了，我只想留下底线。

【问题讨论】：

标签： ios swift storyboard uitextfield

【解决方案1】：

试试这个代码：

Obj-C

CALayer *bottomLine = [CALayer layer];
bottomLine.frame = CGRectMake(0.0f, self.frame.size.height - 1, self.frame.size.width, 1.0f);
bottomLine.backgroundColor = [UIColor whiteColor].CGColor;
[myTextField setBorderStyle:UITextBorderStyleNone];
[myTextField.layer addSublayer:bottomLine];

斯威夫特

var bottomLine = CALayer()
bottomLine.frame = CGRectMake(0.0, view.frame.height - 1, view.frame.width, 1.0)
bottomLine.backgroundColor = UIColor.whiteColor().CGColor
myTextField.borderStyle = UITextBorderStyle.None
myTextField.layer.addSublayer(bottomLine)

希望对你有帮助

如果您使用自动布局，请尝试在 viewDidLayoutSubviews 方法中执行此代码。

【讨论】：

嘿，我试过你的（虽然将其转换为 Swift - 请参阅更新的问题）。它几乎可以工作。但是没有底线，即使那消失了。 UITextBorderStyle.None 去掉所有边框，想保留底线
@user1406716 哦！我不知道你正在快速工作。我会检查并通知您。

【解决方案2】：

@Ashish Kakkad 发布了正确的代码，但它可能不适用于 @user1406716 的原因是因为当文本字段中没有文本时，框架的高度和宽度为 0，所以也许您可以尝试以下操作：

Obj-C：

CALayer *bottomLine = [CALayer layer];
bottomLine.frame = CGRectMake(0.0f, 75 - 1, 300, 1.0f);
bottomLine.backgroundColor = [UIColor whiteColor].CGColor;
[myTextField setBorderStyle:UITextBorderStyleNone];
[myTextField.layer addSublayer:bottomLine];

斯威夫特：

var bottomLine = CALayer()
bottomLine.frame = CGRectMake(0.0, 75 - 1, 300, 1.0)
bottomLine.backgroundColor = UIColor.whiteColor().CGColor
myTextField.borderStyle = UITextBorderStyle.None
myTextField.layer.addSublayer(bottomLine)

这将确保即使文本字段中没有文本，该行也是可见的。

【讨论】：

【解决方案3】：

将此扩展用于 UITextField

extension UITextField {

    func setUnderLine() {
        let border = CALayer()
        let width = CGFloat(0.5)
        border.borderColor = UIColor.darkGray.cgColor
        border.frame = CGRect(x: 0, y: self.frame.size.height - width, width:  self.frame.size.width - 10, height: self.frame.size.height)
        border.borderWidth = width
        self.layer.addSublayer(border)
        self.layer.masksToBounds = true
    }

}

在ViewDidLoad() 中调用上面的函数，并显示带有下划线的文本字段。

myTextField.setUnderLine()

【讨论】：

嗨，有趣且干净的解决方案，但似乎在我的情况下不起作用...我添加了扩展名并在 viewDidLoad 中添加了代码，但我看不到任何更改.. .反正我没有任何错误所以...我不知道问题出在哪里： override func viewDidLoad() { super.viewDidLoad() txtUserName.setUnderLine(); txtPassword.setUnderLine();

【解决方案4】：

要使用 Swift 3 进行更新：

let bottomLine = CALayer()
bottomLine.frame = CGRect(origin: CGPoint(x: 0, y:first.frame.height - 1), size: CGSize(width: first.frame.width, height:  1))
bottomLine.backgroundColor = UIColor.white.cgColor
first.borderStyle = UITextBorderStyle.none
first.layer.addSublayer(bottomLine)

【讨论】：

什么是 first.frame.height？
@swift2geek 这是一个 UITextField
做这个提示就消失了。我应该怎么做才能解决这个问题？

【解决方案5】：

删除边框并添加下划线 - Swift 5：

extension UITextField {
    
    func addUnderLine () {
        let bottomLine = CALayer()
        
        bottomLine.frame = CGRect(x: 0.0, y: self.bounds.height + 3, width: self.bounds.width, height: 1.5)
        bottomLine.backgroundColor = UIColor.lightGray.cgColor
        
        self.borderStyle = UITextField.BorderStyle.none
        self.layer.addSublayer(bottomLine)
    }
    
}

【讨论】：