ios 在 Storyboard 中为 UIButton 设置边框

Set a border for UIButton in Storyboard

提问by Tommy Nicholas

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?

如果不直接在代码中设置它们，我就无法在 Xcode 5 中为我的按钮设置边框。如果不制作自定义背景图像，是否可能无法在情节提要上执行此操作？

回答by Guilherme Torres Castro

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 @IBInspectableto show the result at the storyboard (If you are using the category, use only cornerRadiusand not layer.cornerRadiusas a key path.

例如layer.cornerRadius，图像上描述的角半径 ( )。 您将无法看到情节提要上的效果，因为此参数是在运行时评估的。现在，您可以在 UIView 中使用 swift 类别（图片下方的代码）在@IBInspectable故事板中显示结果（如果您正在使用类别，请仅使用cornerRadius而不是layer.cornerRadius作为关键路径。

---

---

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

---

---

Here is category from Peter DeWeeseanswer that allow use keypath layer.borderUIColorto set the border color.

这是Peter DeWeese回答的类别，允许使用 keypathlayer.borderUIColor设置边框颜色。

CALayer+XibConfiguration.h:

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:

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

回答by dchakarov

Swift 3If 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.

Swift 3如果你想在使用 IBInspectable 时在 IB 中看到结果，你必须扩展 UIView 并将属性添加到该类中，即

@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/

参考：http: //nshipster.com/ibinspectable-ibdesignable/

回答by swiftBoy

Short answer :

简短的回答：

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

---

---

Long answer :

长答案：

Rounded Corners UIButton

圆角 UIButton

customUIView.layer.cornerRadius = 10

Border Thickness

边框厚度

pcustomUIView.layer.borderWidth = 1

Border Color

边框颜色

customUIView.layer.borderColor = UIColor.blue.cgColor

回答by Mostafa Mohamed Raafat

You can use a piece of code like:

您可以使用一段代码，如：

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

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

Please note: addButtonis an IBOutlet.

请注意：addButton是一个IBOutlet。