How to only show bottom border of UITextField in Swift

Question

I want to show only bottom border and hide the other sides.

Output I see: As you can see I see the top, left and right borders also and they are black in color, I want to remove them. Only need the bottom white thick 2.0 border.

Code I am using (source):

var border = CALayer()
var width = CGFloat(2.0)
border.borderColor = UIColor.whiteColor().CGColor
border.frame = CGRect(x: 0, y: tv_username.frame.size.height - width, width: tv_username.frame.size.width, height: tv_username.frame.size.height)

border.borderWidth = width
tv_username.backgroundColor = UIColor.clearColor()
tv_username.layer.addSublayer(border)
tv_username.layer.masksToBounds = true
tv_username.textColor = UIColor.whiteColor()

Solution 1

Try to do by this way, with Swift 5.1:

var bottomLine = CALayer()
bottomLine.frame = CGRect(x: 0.0, y: myTextField.frame.height - 1, width: myTextField.frame.width, height: 1.0)
bottomLine.backgroundColor = UIColor.white.cgColor
myTextField.borderStyle = UITextField.BorderStyle.none
myTextField.layer.addSublayer(bottomLine)

You have to set the borderStyle property to None

If you are using the autolayout then set perfect constraint else bottomline will not appear.

Hope it helps.

Solution 2

Thought from @Ashish's answer, used same approach long ago in Objective-C but implementing extension will be more useful.

extension UITextField {
    func addBottomBorder(){
        let bottomLine = CALayer()
        bottomLine.frame = CGRect(x: 0, y: self.frame.size.height - 1, width: self.frame.size.width, height: 1)
        bottomLine.backgroundColor = UIColor.white.cgColor
        borderStyle = .none
        layer.addSublayer(bottomLine)
    }
}

In your controller:

self.textField.addBottomBorder()

Can add further parameters to your method, like adding border height, color.

Solution 3

@mina-fawzy I liked the answer that included masksToBounds by Mina Fawzy...

I ran into this issue where I was trying to style a bottom border of a UITextField, and the comments using a CGRect worked for me, however, I ran into issues when using different screen sizes, or if I changed the orientation to landscape view from the portrait.

ie. My Xcode Main.storyboard was designed with iPhone XS Max, with a UITextField constrained to be 20 points from the left/right of the screen. In my viewDidLoad() I stylized the UITextField (textfield) using the CGRect approach, making the width of the rectangle equal to textfield.frame.width.

When testing on the iPhone XS Max, everything worked perfectly, BUT, when I tested on iPhone 7 (smaller screen width) the CGRect was grabbing the width of the iPhone XS Max during the viewDidLoad(), causing the rectangle (bottom line) to be too wide, and the right edge went off the screen. Similarly, when I tested on iPad screens, the bottom line was way too short. And also, on any device, rotating to landscape view did not re-calculate the size of the rectangle needed for the bottom line.

The best solution I found was to set the width of the CGRect to larger than the longest iPad dimension (I randomly chose 2000) and THEN added textfield.layer.masksToBounds = true. This worked perfectly because now the line is plenty long from the beginning, does not need to be re-calculated ever, and is clipped to the correct width of the UITextField no matter what screen size or orientation.

Thanks Mina, and hope this helps others with the same issue!

Solution 4

I have tried all this answer but no one worked for me except this one

  let borderWidth:CGFloat = 2.0 // what ever border width do you prefer 
    let bottomLine = CALayer()

    bottomLine.frame = CGRectMake(0.0, Et_textfield.height  - borderWidth, Et_textfield.width, Et_textfield.height )
    bottomLine.backgroundColor = UIColor.blueColor().CGColor
    bottomLine
    Et_textfield.layer.addSublayer(bottomLine)
    Et_textfield.layer.masksToBounds = true // the most important line of code

Solution 5

Swift 3:

Just subclass your UITextField

class BottomBorderTF: UITextField {

var bottomBorder = UIView()
override func awakeFromNib() {

    //MARK: Setup Bottom-Border
    self.translatesAutoresizingMaskIntoConstraints = false
    bottomBorder = UIView.init(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
    bottomBorder.backgroundColor = UIColor.orange
    bottomBorder.translatesAutoresizingMaskIntoConstraints = false
    addSubview(bottomBorder)
    //Mark: Setup Anchors
    bottomBorder.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
    bottomBorder.leftAnchor.constraint(equalTo: leftAnchor).isActive = true
    bottomBorder.rightAnchor.constraint(equalTo: rightAnchor).isActive = true
    bottomBorder.heightAnchor.constraint(equalToConstant: 1).isActive = true // Set Border-Strength

   }
}

View more solutions

Comments

[user1406716]

tried the code but I see all border disappear with that this code. (my background is blue, not sure if that matters). I want the bottom border to be white only.

[Ashish Kakkad]

@user1406716 Check this : stackoverflow.com/questions/30701655/… My answer

[user1406716]

meaning is there anything additional required other than the 5 lines above? I used them just replacing myTextField with my 'tv_username` UITextField

[user1406716]

hmm, strange then because I see only this (no bottom border): imgur.com/i2h1zXj

[user1406716]

I will mark your answer as the answer, but I only had to add this line to the code in my question (so may be you want to edit the answer for anyone who reads this later): myTextField.borderStyle = UITextBorderStyle.None

[Ashish Kakkad]

@user1406716 border must be at position : (height minus your line height).

[Kento]

"If you are using the autolayout then set perfect constraint else bottomline will not appear." -> That is Key. In my sandbox app, I hadn't applied any constraints and I would see bottom border and normal gray rounded edge border when using UITextBorderStyleRoundedRect but not when using UITextBorderStyleNone I would see nothing. Had to set constraints of my UITextField in IB, then it all worked.

[theDC]

what does it mean to set "perfect" constaint?

[Sahir]

@DCDC little late but "perfect" constraint means set a hard height for the textfield in IB

[iBug]

Why not extension?

[Codetard]

Use the way it suits.

[Fernando Perez]

Thanks. It worked for me. Also i could go further: extension UITextField { public func addBottomBorder(color: UIColor = UIColor.black, marginToUp: CGFloat = 1.00, height: CGFloat = 1.00){ let bottomLine = CALayer() bottomLine.frame = CGRect(x: 0, y: self.frame.size.height - marginToUp, width: self.frame.size.width, height: height) bottomLine.backgroundColor = color.cgColor borderStyle = .none layer.addSublayer(bottomLine) } }

[JRam13]

This is the correct answer + explanation and I wish the accepted answer would incorporate this "gotcha". One improvement I can add is instead of choosing an arbitrary width, you can use the actual device screen width via UIScreen.main.bounds.width (not the width of the textfield like the accepted answer!).

[Sapar Friday]

Work perfectly, just change leftAnchor to leadingAnchor and rightAnchor to trailingAnchor

[mpc75]

This. I tried almost every other method here and none worked well with my hybrid auto-layout methods until this :)

[iosMentalist]

instead of background color I used border color in order to work

[KSR]

Good answer.Thanks iBug.

[rule_it_subir]

This was the better solution for me since I needed to hide/show the TextField and could not use frame and CALayer as I had to do it in viewDidLoad.