Cant change custom UITextField border color - ios

Question

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
}

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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)
}

Answer 5

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