How to only show bottom border of UITextField in Swift
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.cgColormyTextField.borderStyle = UITextField.BorderStyle.nonemyTextField.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.
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.
@mina-fawzyI 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!