Cocoa Touch: How To Change UIView's Border Color And Thickness?
Solution 1
You need to use view's layer to set border property. e.g:
#import <QuartzCore/QuartzCore.h>
...
view.layer.borderColor = [UIColor redColor].CGColor;
view.layer.borderWidth = 3.0f;
You also need to link with QuartzCore.framework to access this functionality.
Solution 2
Xcode 6 update
Since Xcode's newest version there is a better solution to this:
With @IBInspectable
you can set Attributes directly from within the Attributes Inspector
.
This sets the User Defined Runtime Attributes
for you:
There are two approaches to set this up:
Option 1 (with live updating in Storyboard)
- Create
MyCustomView
. - This inherits from
UIView
. - Set
@IBDesignable
(this makes the View update live).* - Set your Runtime Attributes (border, etc.) with
@IBInspectable
- Change your Views Class to
MyCustomView
- Edit in Attributes Panel and see changes in Storyboard :)
`
@IBDesignable
class MyCustomView: UIView {
@IBInspectable var cornerRadius: CGFloat = 0 {
didSet {
layer.cornerRadius = cornerRadius
layer.masksToBounds = cornerRadius > 0
}
}
@IBInspectable var borderWidth: CGFloat = 0 {
didSet {
layer.borderWidth = borderWidth
}
}
@IBInspectable var borderColor: UIColor? {
didSet {
layer.borderColor = borderColor?.CGColor
}
}
}
* @IBDesignable
only works when set at the start of class MyCustomView
Option 2 (not working since Swift 1.2, see comments)
Extend your UIView Class:
extension UIView {
@IBInspectable var cornerRadius: CGFloat = 0 {
didSet {
layer.cornerRadius = cornerRadius
layer.masksToBounds = cornerRadius > 0
}
}
@IBInspectable var borderWidth: CGFloat = 0 {
didSet {
layer.borderWidth = borderWidth
}
}
@IBInspectable var borderColor: UIColor? {
didSet {
layer.borderColor = borderColor?.CGColor
}
}
}
This way, your default View always has those extra editable fields in Attributes Inspector
. Another advantage is that you don't have to change the class to MycustomView
every time.
However, one drawback to this is that you will only see your changes when you run your app.
Solution 3
You can also create border with the color of your wish..
view.layer.borderColor = [UIColor colorWithRed:r/255.0 green:g/255.0 blue:b/255.0 alpha:1.0].CGColor;
*r,g,b are the values between 0 to 255.
Solution 4
Add following @IBInspectables in UIView extension
extension UIView {
@IBInspectable var borderWidth: CGFloat {
get {
return layer.borderWidth
}
set(newValue) {
layer.borderWidth = newValue
}
}
@IBInspectable var borderColor: UIColor? {
get {
if let color = layer.borderColor {
return UIColor(CGColor: color)
}
return nil
}
set(newValue) {
layer.borderColor = newValue?.CGColor
}
}
}
And then you should be able to set borderColor and borderWidth attributes directly from Attribute inspector. See attached image
Solution 5
When I use Vladimir's CALayer solution, and on top of the view I have an animation, like a modal UINavigationController dismissing, I see a lot of glitches happening and having drawing performance issues.
So, another way to achieve this, but without the glitches and performance loss, is to make a custom UIView and implement the drawRect
message like so:
- (void)drawRect:(CGRect)rect
{
CGContextRef contextRef = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(contextRef, 1);
CGContextSetRGBStrokeColor(contextRef, 255.0, 255.0, 255.0, 1.0);
CGContextStrokeRect(contextRef, rect);
}
Related videos on Youtube
Shai UI
front-end developer in finance. especially html5/javascript/css based apps for mobile/desktop/tablets, node.js on the back-end. my main interests are heavy GUI, 2d/3d, data visualizations. check out my youtube channel: https://www.youtube.com/channel/UCJagBFh6ClHpZ2_EI5a3WlQ
Updated on September 22, 2020Comments
-
Shai UI over 3 years
I saw in the inspector that I can change the background color, but I'd like to also change the border color and thickness, is this possible?
-
Daniel Conde Marin over 9 years
-
-
llullulluis over 12 yearsIs there any way to set different width/colors for every side?
-
Vladimir over 12 years@lluismontero I afraid you'll have to make custom UIView with drawRect: method for that
-
Nicu Surdu almost 12 yearsIf I do this, and on top of this view I have an animation, like a modal UINavigationController dismissing, I see a lot of glitches happening, it's hard to describe. If I deactivate the borders, everything goes back to normal.
-
Vladimir almost 12 years@NicolaeSurdu, setting border may indeed be a performance problem, in that case you can use your approach with custom view
-
Admin almost 12 yearsIt's worth noting that
r
,g
andb
should probably be floats; the divisors should also be floats:r / 255.0
. -
Nicu Surdu almost 12 years@Krish You store the color in a variable and when you need to change the border color, you change the variable value and call
setNeedsDisplay
on the view. This will force the redraw of the UIView and implicitly will re-calldrawRect
. Not tested, tho ... -
GoodSp33d almost 10 yearsJust a heads up for others. Xcode suggests bridging UIColor to CGColorRef as
__bridge CGColorRef
. This does not work. It needs to be[UIColor blackColor].CGColor
as mentioned in answer. -
meaning-matters over 9 years
#import <QuartzCore/QuartzCore.h>
is no longer needed. -
c-o-d about 9 yearsYour extension does not work in latest version of Xcode as of today.
-
Sergey Grischyov about 9 yearsI'll confirm @EdgarAroutiounian only to say that in Swift 1.2 the second approach no longer works
-
Nike Kov over 7 yearsWhat about Objective-C?
-
MMachinegun over 7 yearsCheck out spencery2's answer further below, he took the time to write it in Objective-C:
-
ingconti over 6 yearsno, C syntax is not as You say. r, g and b can be int, as C (and objC IS C) promotions will cast int r=128 to double when making: r/255.0. By the way You got double, and Clang will cast to CGFloat.
-
ICL1901 about 6 yearsI really don't like people being down voted without an explanation. It helps no-one.
-
LightningStryk over 5 yearsupdate the extension to not store a value and use set(value) { } and get { } to access the layer directly, it works then.