I have two UITextField in a regular ViewController, and i put a green border in left side with CALayer.
my textfield
Here is the code that i developed:
let borderU = CALayer()
let borderP = CALayer()
let posx = CGFloat(2.0)
let height:CGFloat = (txtfUser?.frame.size.height)!
if #available(iOS 11.0, *) {
borderU.borderColor = UIColor(named: "primaryGreen")?.cgColor
borderP.borderColor = UIColor(named: "primaryGreen")?.cgColor
} else {
// Fallback on earlier versions
}
borderU.frame = CGRect(x: posx, y: -2, width: 2, height: height)
borderP.frame = CGRect(x: posx, y: -2, width: 2, height: height)
borderU.borderWidth = CGFloat(2.0)
borderP.borderWidth = CGFloat(2.0)
self.txtfUser?.layer.addSublayer(borderU)
self.txtfUser?.layer.masksToBounds = true
self.txtfPassWord?.layer.addSublayer(borderP)
self.txtfPassWord?.layer.masksToBounds = true
In next View controller i have nine UITextField and I need the same border in left side and i thought about that solution for don´t repeat the code nine times, but didn´t work:
let border = CALayer()
let posx = CGFloat(2.0)
let height:CGFloat = (txtfUser?.frame.size.height)!
if #available(iOS 11.0, *) {
border.borderColor = UIColor(named: "primaryGreen")?.cgColor
} else {
// Fallback on earlier versions
}
border.frame = CGRect(x: posx, y: -2, width: 2, height: height)
border.borderWidth = CGFloat(2.0)
self.txtfUser?.layer.addSublayer(border)
self.txtfUser?.layer.masksToBounds = true
self.txtfPassWord?.layer.addSublayer(border)
self.txtfPassWord?.layer.masksToBounds = true
Any help will be appreciated.
You can subclass your textField:
class TextField: UITextField {
private var leftLayer: CALayer!
override func awakeFromNib() {
super.awakeFromNib()
//create your layer here, and keep reference in leftLayer for further resize, color...
}
}
I'm trying to change border properties with the following code:
class SimpleTextField: UITextField, UITextFieldDelegate {
override func layoutSubviews() {
super.layoutSubviews()
let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.black.cgColor
border.frame = CGRect(x: 0, y: self.frame.size.height - width, width: self.frame.size.width, height: self.frame.size.height)
border.borderWidth = width
self.layer.addSublayer(border)
self.layer.masksToBounds = true
self.delegate = self
}
func textFieldDidBeginEditing(_ textField: UITextField) {
let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.green.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
}
func textFieldDidEndEditing(_ textField: UITextField) {
let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.black.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
}
}
I wrote code in layoutSubviews() function as a default appearance for textField. I used textFieldDidBeginEditing() and textFieldDidEndEditing() functions for changing bottom border color. If I use the code layoutSubviews() the border color won't be changed at all but if I remove the code that I use as default appearance, border color will change but I don't have default border as the first time when text field is appeared.
Don't create new layer every time you start/end editing the text field. Instead, reuse it: make it a property and then just update when needed accordingly.
The default appearance you can set at the same point where the text field itself and the border are created, e.g.:
let textField = UITextField(frame: CGRect(x: 100.0, y: 100.0, width: 200.0, height: 50.0))
let border = CALayer()
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(textField)
textField.layer.addSublayer(border)
textField.delegate = self
updateBorder(textField: textField, color: UIColor.black, width: 2.0)
}
func updateBorder(textField: UITextField, color: UIColor, width: CGFloat) -> Void {
border.backgroundColor = color.cgColor
border.frame = CGRect(x: 0.0, y: textField.frame.size.height - width, width: textField.frame.size.width, height: width);
}
func textFieldDidBeginEditing(_ textField: UITextField) {
updateBorder(textField: textField, color: UIColor.green, width: 2.0)
}
func textFieldDidEndEditing(_ textField: UITextField) {
updateBorder(textField: textField, color: UIColor.black, width: 2.0)
}
I am trying to make a nice textField but it didn't work. So my problem is when i begin edit textfield i need to change border color to another, but when it happens my custom border going to default rect. What i want it's just change color of bottom border.
func textFieldDidBeginEditing(_ textField: UITextField) {
nameField.borderStyle = UITextBorderStyle.none
nameField.layer.borderWidth = 2.0
nameField.layer.borderColor = UIColor.red.cgColor
nameField.layer.masksToBounds = true
print("lol")
}
public func testField() {
let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = lightBlue
border.frame = CGRect(x: 0, y: nameField.frame.size.height - width, width: nameField.frame.size.width, height: nameField.frame.size.height)
border.borderWidth = width
nameField.layer.addSublayer(border)
nameField.layer.masks[ToBounds = true
}
Here is a solution. I have subclassed UITextField and overrided layoutSubviews func with checking if it is firstResponder (means cursor is there) or not and setting corresponding color.
Swift (3.0):
class TextField: UITextField {
lazy var bottomBorder: CALayer = {
let border = CALayer();
border.borderColor = UIColor.white.cgColor;
border.borderWidth = 1;
return border
}()
override func awakeFromNib() {
super.awakeFromNib()
borderStyle = .none;
layer.addSublayer(bottomBorder);
}
override func layoutSubviews() {
super.layoutSubviews();
let borderColor = isFirstResponder ? UIColor.blue : UIColor.white;
bottomBorder.borderColor = borderColor.cgColor;
bottomBorder.frame = CGRect(x: 0, y: layer.frame.size.height - 1, width: layer.frame.size.width, height: 1)
}
}
Objective-C
#interface TextField ()
#property (nonatomic, strong) CALayer *bottomBorder;
#end
#implementation TextField
- (void)awakeFromNib {
[super awakeFromNib];
[self.layer addSublayer:self.bottomBorder];
}
- (void)layoutSubviews {
[super layoutSubviews];
UIColor *borderColor = self.isFirstResponder ? [UIColor blueColor] : [UIColor whiteColor];
self.bottomBorder.borderColor = borderColor.CGColor;
self.bottomBorder.frame = CGRectMake(0, self.layer.frame.size.height - 1, self.layer.frame.size.width, 1);
}
- (CALayer *)bottomBorder {
if (!_bottomBorder) {
_bottomBorder = [CALayer layer];
_bottomBorder.borderColor = [UIColor whiteColor].CGColor;
_bottomBorder.borderWidth = 1;
}
return _bottomBorder;
}
#end
Make your border
let border = CALayer()
Global and the just change its borderColor in textFieldDidBeginEditing
func textFieldDidBeginEditing(_ textField: UITextField) {
border.borderColor = UIColor.red.cgColor
}
Hope this helps.
Try to add this line of code in your func textFieldDidBeginEditing(_ textField: UITextField) method, this will remove your custom layer and you can see the change done.
if (nameField.layer.sublayers?.count)! > 0{
nameField.layer.sublayers?[0].removeFromSuperlayer()
}
Hope this helps.
Use this piece of code
func textFieldDidBeginEditing(_textField: UITextField) {
nameField.layer.sublayers![1].borderColor = UIColor.redColor().CGColor
}
func testField() {
nameField.layer.sublayers![0].hidden = true
let border = CALayer()
border.frame = CGRectMake(0, nameField.frame.size.height - 2, nameField.frame.size.width, 20)
border.borderColor = UIColor.blueColor().CGColor
border.borderWidth = 2
nameField.layer.addSublayer(border)
}
You need to add additional sublayer to border of textfield so that you can assign any of the color.
let border = CALayer()
let width = CGFloat(1.0)
border.borderColor = UIColor(red: 188/255, green: 189/255, blue: 192/255 , alpha: 1).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
I've added this image, I hope you can see it, of a user interface login. Notice the text field is transparent with the exception of the line at the bottom. What code do I put in to get that affect? Can I put the necessary information in the "user defined runtime attributes"?
Create a subclass of UITextField as below, And simply set this class in your storyboard to UITextField
Swift 5 Support With #IBInspectable
import UIKit
class HSUnderLineTextField: UITextField , UITextFieldDelegate {
let border = CALayer()
#IBInspectable open var lineColor : UIColor = UIColor.black {
didSet{
border.borderColor = lineColor.cgColor
}
}
#IBInspectable open var selectedLineColor : UIColor = UIColor.black {
didSet{
}
}
#IBInspectable open var lineHeight : CGFloat = CGFloat(1.0) {
didSet{
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
}
}
required init?(coder aDecoder: (NSCoder?)) {
super.init(coder: aDecoder!)
self.delegate=self;
border.borderColor = lineColor.cgColor
self.attributedPlaceholder = NSAttributedString(string: self.placeholder ?? "",
attributes: [NSAttributedString.Key.foregroundColor: UIColor.white])
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
border.borderWidth = lineHeight
self.layer.addSublayer(border)
self.layer.masksToBounds = true
}
override func draw(_ rect: CGRect) {
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
}
override func awakeFromNib() {
super.awakeFromNib()
border.frame = CGRect(x: 0, y: self.frame.size.height - lineHeight, width: self.frame.size.width, height: self.frame.size.height)
self.delegate = self
}
func textFieldDidBeginEditing(_ textField: UITextField) {
border.borderColor = selectedLineColor.cgColor
}
func textFieldDidEndEditing(_ textField: UITextField) {
border.borderColor = lineColor.cgColor
}
}
Set lineColor and selectedLineColor from the storyboard and run your project.
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()
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.
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-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!
Objective C
[txt.layer setBackgroundColor: [[UIColor whiteColor] CGColor]];
[txt.layer setBorderColor: [[UIColor grayColor] CGColor]];
[txt.layer setBorderWidth: 0.0];
[txt.layer setCornerRadius:12.0f];
[txt.layer setMasksToBounds:NO];
[txt.layer setShadowRadius:2.0f];
txt.layer.shadowColor = [[UIColor blackColor] CGColor];
txt.layer.shadowOffset = CGSizeMake(1.0f, 1.0f);
txt.layer.shadowOpacity = 1.0f;
txt.layer.shadowRadius = 1.0f;
Swift
textField.layer.backgroundColor = UIColor.whiteColor().CGColor
textField.layer.borderColor = UIColor.grayColor().CGColor
textField.layer.borderWidth = 0.0
textField.layer.cornerRadius = 5
textField.layer.masksToBounds = false
textField.layer.shadowRadius = 2.0
textField.layer.shadowColor = UIColor.blackColor().CGColor
textField.layer.shadowOffset = CGSizeMake(1.0, 1.0)
textField.layer.shadowOpacity = 1.0
textField.layer.shadowRadius = 1.0
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
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
}
}
Solution which using CALayer is not good because when device is rotated the underline doesn't change width.
class UnderlinedTextField: UITextField {
override func awakeFromNib() {
super.awakeFromNib()
let bottomLine = CALayer()
bottomLine.frame = CGRect(x: 0, y: self.frame.size.height, width: UIScreen.main.bounds.width, height: 1)
bottomLine.bounds = CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: self.frame.size.height)
bottomLine.backgroundColor = UIColor.black.cgColor
borderStyle = .none
layer.addSublayer(bottomLine)
layer.masksToBounds = true
}
}
The best solution is to use UIView.
class UnderlinedTextField: UITextField {
private let defaultUnderlineColor = UIColor.black
private let bottomLine = UIView()
override func awakeFromNib() {
super.awakeFromNib()
borderStyle = .none
bottomLine.translatesAutoresizingMaskIntoConstraints = false
bottomLine.backgroundColor = defaultUnderlineColor
self.addSubview(bottomLine)
bottomLine.topAnchor.constraint(equalTo: self.bottomAnchor, constant: 1).isActive = true
bottomLine.leadingAnchor.constraint(equalTo: self.leadingAnchor).isActive = true
bottomLine.trailingAnchor.constraint(equalTo: self.trailingAnchor).isActive = true
bottomLine.heightAnchor.constraint(equalToConstant: 1).isActive = true
}
public func setUnderlineColor(color: UIColor = .red) {
bottomLine.backgroundColor = color
}
public func setDefaultUnderlineColor() {
bottomLine.backgroundColor = defaultUnderlineColor
}
}
First set borderStyle property to .none.
Also, don't forget that the best time to call this method in the viewDidAppear(_:) method.
To make it handy, you can use an extension:
extension UIView {
func addBottomBorderWithColor(color: UIColor, width: CGFloat) {
let border = CALayer()
border.backgroundColor = color.cgColor
border.frame = CGRect(x: 0, y: self.frame.size.height - width,
width: self.frame.size.width, height: width)
self.layer.addSublayer(border)
}
}
Call it like:
textfield.addBottomBorderWithColor(color: UIColor.lightGray, width: 0.5)
Using extension and Swift 5.3
extension UITextField {
internal func addBottomBorder(height: CGFloat = 1.0, color: UIColor = .black) {
let borderView = UIView()
borderView.backgroundColor = color
borderView.translatesAutoresizingMaskIntoConstraints = false
addSubview(borderView)
NSLayoutConstraint.activate(
[
borderView.leadingAnchor.constraint(equalTo: leadingAnchor),
borderView.trailingAnchor.constraint(equalTo: trailingAnchor),
borderView.bottomAnchor.constraint(equalTo: bottomAnchor),
borderView.heightAnchor.constraint(equalToConstant: height)
]
)
}
}
For those looking for a solution that works for Autolayout, IBInspectable, and the Storyboard, subclass UITextField into your custom textfield class and add these:
func setUnderline() {
for sub in self.subviews {
sub.removeFromSuperview()
}
if underlineStyle == true {
var bottomBorder = UIView()
bottomBorder = UIView.init(frame: CGRect(x: 0, y: 0, width: 0, height: 0))
bottomBorder.backgroundColor = borderColor //YOUR UNDERLINE COLOR HERE
bottomBorder.translatesAutoresizingMaskIntoConstraints = false
self.addSubview(bottomBorder)
bottomBorder.bottomAnchor.constraint(equalTo: self.bottomAnchor).isActive = true
bottomBorder.leftAnchor.constraint(equalTo: self.leftAnchor).isActive = true
bottomBorder.rightAnchor.constraint(equalTo: self.rightAnchor).isActive = true
bottomBorder.heightAnchor.constraint(equalToConstant: underlineHeight).isActive = true
layoutIfNeeded()
}
}
#IBInspectable var underlineStyle: Bool = false {
didSet {
setUnderline()
}
}
#IBInspectable var underlineHeight: CGFloat = 0 {
didSet {
setUnderline()
}
}
Swift 5.
extension UITextField {
let bottomLine = UIView()
bottomLine.backgroundColor = .black
borderStyle = .none
self.addSubview(bottomLine)
NSLayoutConstraint.activate([
bottomLine.topAnchor.constraint(equalTo: bottomAnchor + 10),
bottomLine.leadingAnchor.constraint(equalTo: leadingAnchor),
bottomLine.trailingAnchor.constraint(equalTo: trailingAnchor),
bottomLine.heightAnchor.constraint(equalToConstant: 1)
])
}
For multiple Text Field
override func viewDidLoad() {
configureTextField(x: 0, y: locationField.frame.size.height-1.0, width: locationField.frame.size.width, height:1.0, textField: locationField)
configureTextField(x: 0, y: destinationField.frame.size.height-1.0, width: destinationField.frame.size.width, height:1.0, textField: destinationField)
configureTextField(x: 0, y: originField.frame.size.height-1.0, width: originField.frame.size.width, height:1.0, textField: originField)
configureTextField(x: 0, y: nameField.frame.size.height-1.0, width: nameField.frame.size.width, height:1.0, textField: nameField)
locationField.text="Hello"
super.viewDidLoad()
// Do any additional setup after loading the view.
}
func configureTextField(x:CGFloat,y:CGFloat,width:CGFloat,height:CGFloat,textField:UITextField)
{
let bottomLine = CALayer()
bottomLine.frame = CGRect(x: x, y: y, width: width, height: height)
bottomLine.backgroundColor = UIColor.white.cgColor
textField.borderStyle = UITextBorderStyle.none
textField.layer.addSublayer(bottomLine)
}
Textfield bottom border set but some more issues for devices.So bottom border not fit in textfield.I retrieve that problem the code like this
It works fine
swift 4.2
let bottomLine = CALayer()
bottomLine.frame = CGRect(x: 0.0, y: textField.frame.height - 1, width: screenSize.width - 32, height: 1.0)
bottomLine.backgroundColor = UIColor(hex: 0xD5D5D5).cgColor
textField.borderStyle = UITextField.BorderStyle.none
textField.layer.addSublayer(bottomLine)
For swift 4. this works for me.
let myfield:UITextField = {
let mf=UITextField()
let atributePlaceHolder=NSAttributedString(string: "Text_description", attributes:[NSAttributedString.Key.foregroundColor :UIColor.darkGray])
mf.textColor = .gray
mf.attributedPlaceholder=atributePlaceHolder
mf.layer.borderColor = UIColor.black.cgColor
mf.layer.backgroundColor = UIColor.white.cgColor
mf.layer.borderWidth = 0.0
mf.layer.shadowOffset = CGSize(width: 0, height: 1.0)
mf.layer.shadowOpacity = 1.0
mf.layer.shadowRadius = 0.0
return mf
}()