UITextField set border color using storyboard

Question

I'd like to set border color using storyboard if possible. I've seen answer here: UITextField border color

And I followed answer in storyboard:

All properties set, but TextField doesn't show border. Any suggestions?

Solution 1

Well as Bogdan pointed out, you could very well do that with simple subclassing and just a few bits of code. After that everything will be editable in Storyboards.

1. Subclass UITextField
2. Create two properties, one for border width and one for border color
3. Make those variables IBInspectable and entire class IBDesignable
4. You'll be able to change color and width of border and see the change in real time.

Code for illustration (Swift 3.1):

@IBDesignable
class FormTextField: UITextField {

    @IBInspectable var borderColor: UIColor? {
        didSet {
            layer.borderColor = borderColor?.cgColor
        }
    }

    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }
}

Edit: You'll see this in your Attributes Inspector

Solution 2

As Bogdan pointed out it's true that you can't find the layer.borderColor property in storyboard as it's a run time thing.

However still you can set the borderColor without using IB_DESIGNABLE, on any view(or UIView Subclass) with a little bit of coding.

Below are the steps how to achieve it,

1. Create a category on CALayer class. Declare a property of type UIColor with a suitable name, I'll name it as borderUIColor .
2. Write the setter and getter for this property.
3. In the 'Setter' method just set the "borderColor" property of layer to the new colors CGColor value.
4. In the 'Getter' method return UIColor with layer's borderColor.

P.S: Remember, Categories can't have stored properties. 'borderUIColor' is used as a calculated property, just as a reference to achieve what we're focusing on.

Please have a look at the below code sample;

Objective C:

Interface File:

#import <QuartzCore/QuartzCore.h>
#import <UIKit/UIKit.h>

@interface CALayer (BorderProperties)

// This assigns a CGColor to borderColor.
@property (nonatomic, assign) UIColor* borderUIColor;

@end

Implementation File:

#import "CALayer+BorderProperties.h"

@implementation CALayer (BorderProperties)

- (void)setBorderUIColor:(UIColor *)color {
    self.borderColor = color.CGColor;
}

- (UIColor *)borderUIColor {
    return [UIColor colorWithCGColor:self.borderColor];
}

@end

Swift 3.1:

extension CALayer {
    var borderUIColor: UIColor {
        set {
            self.borderColor = newValue.cgColor
        }

        get {
            return UIColor(cgColor: self.borderColor!)
        }
    }
}

And finally go to your storyboard/XIB, follow the remaining steps;

5. Click on the View object for which you want to set border Color.
6. Click on "Identity Inspector"(3rd from Left) in "Utility"(Right side of the screen) panel.
7. Under "User Defined Runtime Attributes", click on the "+" button to add a key path.
8. Set the type of the key path to "Color".
9. Enter the value for key path as "layer.borderUIColor". [Remember this should be the variable name you declared in category, not borderColor here it's borderUIColor].
10. Finally chose whatever color you want.

Edit: You've to set layer.borderWidth property value to at least 1 to see the border color.

Build and Run. Happy Coding. :)

Solution 3

I'm not sure you can change the border colour of a UITextfield in storyboard. You can change it programmatically with something along the lines of;

UITextField *myTextField = (UITextField *)[self.view viewWithTag:1];
myTextField.borderStyle = UITextBorderStyleLine;
myTextField.layer.borderWidth = 2;
myTextField.layer.borderColor = [[UIColor redColor] CGColor];

Hope this helps.

Solution 4

Adition to markus, put the full code:

import UIKit //IMPORTANT
@IBDesignable
class BorderTextField: UITextField {
 @IBInspectable var borderColor: UIColor? {
    didSet {
        layer.borderColor = borderColor?.cgColor
    }
 }
 @IBInspectable var borderWidth: CGFloat = 0 {
    didSet {
        layer.borderWidth = borderWidth
    }
 }
}

View more solutions