CODEWITHSUNDEEP
iosobjective-cswiftuibuttonstoryboard
Tommy Nicholas
Tommy Nicholas

Reputation: 1173

Set a border for UIButton in Storyboard

I can't get a border onto my buttons in Xcode 5 without setting them directly in the code. Is it possible that there's no way to do this on the storyboard without making a custom background image?

Upvotes: 27

Views: 51151

Answers (6)

Calibrator
Calibrator

Reputation: 1

It is correct! See Key "borderColor" - this is without "layer."

Upvotes: 0

Muhammad Ali
Muhammad Ali

Reputation: 915

you can set your UIButton User Defined Run Time Attributes ie borderWidth, cornerRadius, borderColor etc. As shown in the image. Note:- don't use layer. before the attribute name, it will not work.

enter image description here

Upvotes: 0

swiftBoy
swiftBoy

Reputation: 35783

Short answer :

layer.cornerRadius = 10
layer.borderWidth = 1
layer.borderColor = UIColor.blue.cgColor

Long answer :

Rounded Corners UIButton

customUIView.layer.cornerRadius = 10

Border Thickness

pcustomUIView.layer.borderWidth = 1

Border Color

customUIView.layer.borderColor = UIColor.blue.cgColor

Upvotes: 0

dchakarov
dchakarov

Reputation: 9478

Swift 3 If you want to see the result in IB when you use IBInspectable, you have to extend UIView and add the properties to that class, i.e.

@IBDesignable class MyView: UIView {}

extension MyView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderWidth: CGFloat {
        get {
            return layer.borderWidth
        }
        set {
            layer.borderWidth = newValue
            layer.masksToBounds = newValue > 0
        }
    }

    @IBInspectable var borderColor: UIColor {
        get {
            return UIColor.init(cgColor: layer.borderColor!)
        }
        set {
            layer.borderColor = newValue.cgColor
        }
    }
}

reference: http://nshipster.com/ibinspectable-ibdesignable/

Upvotes: 9

Mostafa
Mostafa

Reputation: 1612

You can use a piece of code like:

self.addButton.layer.borderColor = [[UIColor greenColor] CGColor];

Please note: addButton is an IBOutlet.

Upvotes: -3

Guilherme Torres Castro
Guilherme Torres Castro

Reputation: 15350

You can use key path.

For example the corner radius (layer.cornerRadius) as describe on the image. You will not be able to see the effects on storyboard, cause this parameters are evaluated at runtime. Now you can use a swift category in UIView (code bellow the picture) in with @IBInspectable to show the result at the storyboard (If you are using the category, use only cornerRadius and not layer.cornerRadius as a key path.

enter image description here

extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
}

Here is category from Peter DeWeese answer that allow use keypath layer.borderUIColor to set the border color.

CALayer+XibConfiguration.h:

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

@interface CALayer(XibConfiguration)

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

@end

CALayer+XibConfiguration.m:

#import "CALayer+XibConfiguration.h"

@implementation CALayer(XibConfiguration)

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

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

@end

Upvotes: 76

Related Questions