如何创建带下划线的 UITextField

Question

iOS noob here

When I add a default UITextField to the ViewController, it looks like this:

My designer would like me to make the UITextField look like this (ie background is transparent, and just has an underline:

How do I do this? Should be asking my designer for an image to set as background for the UITextField . What should the image look like? Should the image be = the blue background + the underline (minus the number i guess)

Is that right?

UPDATE : Based on direction below (from @Ashish Kakkad), added this code in Swift to 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)

This almost works, but the problem is that all side borders disappear, I want just the bottom line to stay.

Answer 1

Try this code :

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];

Swift

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)

Hope it helps

If you are using the auto-layout then try to do this code inside the viewDidLayoutSubviews method.

Answer 2

@Ashish Kakkad has posted the right code but the reason it might not be working for @user1406716 is because when there is no text in the textfield, the height and width of the frame are 0 so maybe you can try the following :

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];

Swift :

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)

This will ensure that the line is visible even when there is no text in the textfield.

Answer 3

Use this Extension for 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
    }

}

Call the above function in ViewDidLoad() and display the textfield with an underline.

myTextField.setUnderLine()

Answer 4

To update this with 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)

Answer 5

Delete borders and add underline - 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)
    }
    
}