Cant change custom UITextField border color

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

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 4

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