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?

回答1:

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.

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

回答2:

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/

回答3:

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

回答4:

You can use a piece of code like:

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

Please note: addButton is an IBOutlet.

来源：https://stackoverflow.com/questions/20477990/set-a-border-for-uibutton-in-storyboard

标签

ios

objective-c

swift

uibutton

storyboard