UITextField border color
IosColorsUikitUitextfieldBorderIos Problem Overview
I have really great wish to set my own color to UITextField border. But so far I could find out how to change the border line style only.
I've used background property to set background color in such way:
self.textField.backgroundColor = textFieldColor;
But I have to change color of UITextField border too. And my question was about how to change the border color.
Ios Solutions
Solution 1 - Ios
Import QuartzCore
framework in you class:
#import <QuartzCore/QuartzCore.h>
and for changing the border color use the following code snippet (I'm setting it to redColor),
textField.layer.cornerRadius=8.0f;
textField.layer.masksToBounds=YES;
textField.layer.borderColor=[[UIColor redColor]CGColor];
textField.layer.borderWidth= 1.0f;
For reverting back to the original layout just set border color to clear color,
serverField.layer.borderColor=[[UIColor clearColor]CGColor];
in swift code
textField.layer.borderWidth = 1
textField.layer.borderColor = UIColor.whiteColor().CGColor
Solution 2 - Ios
Try this:
UITextField *theTextFiels=[[UITextField alloc]initWithFrame:CGRectMake(40, 40, 150, 30)];
theTextFiels.borderStyle=UITextBorderStyleNone;
theTextFiels.layer.cornerRadius=8.0f;
theTextFiels.layer.masksToBounds=YES;
theTextFiels.backgroundColor=[UIColor redColor];
theTextFiels.layer.borderColor=[[UIColor blackColor]CGColor];
theTextFiels.layer.borderWidth= 1.0f;
[self.view addSubview:theTextFiels];
[theTextFiels release];
and import QuartzCore:
#import <QuartzCore/QuartzCore.h>
Solution 3 - Ios
Import the following class:
#import <QuartzCore/QuartzCore.h>
//Code for setting the grey color for the border of the text field
[[textField layer] setBorderColor:[[UIColor colorWithRed:171.0/255.0
green:171.0/255.0
blue:171.0/255.0
alpha:1.0] CGColor]];
Replace 171.0
with the respective color number as required.
Solution 4 - Ios
this question shows up pretty high on a Google search and worked for the most part! I did find that Salman Zaidi's answer was partially correct for iOS 7.
You need to make a modification to the "reverting" code. I found that the following for reverting worked perfectly:
textField.layer.cornerRadius = 0.0f;
textField.layer.masksToBounds = YES;
textField.layer.borderColor = [[UIColor blackColor] CGColor];
textField.layer.borderWidth = 0.0f;
I understand that this is most likely due to changes in iOS 7.
Solution 5 - Ios
Update for swift 5.0
textField.layer.masksToBounds = true
textField.layer.borderColor = UIColor.blue.cgColor
textField.layer.borderWidth = 1.0
Solution 6 - Ios
To simplify this actions from accepted answer, you can also create Category for UIView
(since this works for all subclasses of UIView, not only for textfields:
UIView+Additions.h:
#import <Foundation/Foundation.h>
@interface UIView (Additions)
- (void)setBorderForColor:(UIColor *)color
width:(float)width
radius:(float)radius;
@end
UIView+Additions.m:
#import "UIView+Additions.h"
@implementation UIView (Additions)
- (void)setBorderForColor:(UIColor *)color
width:(float)width
radius:(float)radius
{
self.layer.cornerRadius = radius;
self.layer.masksToBounds = YES;
self.layer.borderColor = [color CGColor];
self.layer.borderWidth = width;
}
@end
Usage:
#import "UIView+Additions.h"
//...
[textField setBorderForColor:[UIColor redColor]
width:1.0f
radius:8.0f];
Solution 7 - Ios
If you use a TextField with rounded corners use this code:
self.TextField.layer.cornerRadius=8.0f;
self.TextField.layer.masksToBounds=YES;
self.TextField.layer.borderColor=[[UIColor redColor]CGColor];
self.TextField.layer.borderWidth= 1.0f;
To remove the border:
self.TextField.layer.masksToBounds=NO;
self.TextField.layer.borderColor=[[UIColor clearColor]CGColor];
Solution 8 - Ios
borderColor on any view(or UIView Subclass) could also be set using storyboard with a little bit of coding and this approach could be really handy if you're setting border color on multiple UI Objects.
Below are the steps how to achieve it,
- Create a category on CALayer class. Declare a property of type UIColor with a suitable name, I'll name it as borderUIColor .
- Write the setter and getter for this property.
- In the 'Setter' method just set the "borderColor" property of layer to the new colors CGColor value.
- 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 2.0:
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;
- Click on the View object for which you want to set border Color.
- Click on "Identity Inspector"(3rd from Left) in "Utility"(Right side of the screen) panel.
- Under "User Defined Runtime Attributes", click on the "+" button to add a key path.
- Set the type of the key path to "Color".
- 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].
- Finally chose whatever color you want.
You've to set layer.borderWidth property value to at least 1 to see the border color.
Build and Run. Happy Coding. :)
Solution 9 - Ios
extension UIView {
func addBorder(_ width: CGFloat = 1, color: UIColor = .black, cornerRadius: CGFloat = 4) {
layer.borderWidth = width
layer.borderColor = color.cgColor
layer.cornerRadius = cornerRadius
}
}
Call this like:
email.addBorder(1.0, color: .blue, cornerRadius: 5)
.