ios 是否可以从界面构建器设置 UIView 边框属性？

Is it possible to set UIView border properties from interface builder?

提问by matteo.cajani

Is it possible to control UIView border properties (color, thickness, etc...) directly from interface builder or I can only do it programmatically?

是否可以直接从界面构建器控制 UIView 边框属性（颜色、厚度等...），或者我只能以编程方式进行？

回答by Rich86man

Actually you can set some properties of a view's layer through interface builder. I know that I can set a layer's borderWidth and cornerRadius through xcode. borderColor doesn't work, probably because the layer wants a CGColor instead of a UIColor.

实际上，您可以通过界面构建​​器设置视图层的一些属性。我知道我可以通过xcode设置图层的borderWidth和cornerRadius。borderColor 不起作用，可能是因为该层需要 CGColor 而不是 UIColor。

You might have to use Strings instead of numbers, but it works!

您可能必须使用字符串而不是数字，但它有效！

layer.cornerRadius
layer.borderWidth
layer.borderColor

Update: layer.masksToBounds = true

更新：layer.masksToBounds = true

Update: select appropriate Type for Keypath:

更新：为 Keypath 选择适当的类型：

回答by Peter DeWeese

Rich86Man's answer is correct, but you can use categories to proxy properties such as layer.borderColor. (From the ConventionalCCocoaPod)

Rich86Man 的回答是正确的，但是可以使用categories 来代理layer.borderColor 等属性。（来自ConventionalCCocoaPod）

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

layer.borderUIColor

The result will be apparent during runtime, not in Xcode.

结果将在运行时显而易见，而不是在 Xcode 中。

Edit: You also need to set layer.borderWidthto at least 1 to see the border with the chosen color.

编辑：您还需要layer.borderWidth至少设置为 1 才能看到所选颜色的边框。

In Swift 2.0:

在 Swift 2.0 中：

extension CALayer {
    var borderUIColor: UIColor {
        set {
            self.borderColor = newValue.CGColor
        }

        get {
            return UIColor(CGColor: self.borderColor!)
        }
    }
}

In Swift 3.0:

在 Swift 3.0 中：

extension CALayer {
    var borderUIColor: UIColor {
        set {
            self.borderColor = newValue.cgColor
        }

        get {
            return UIColor(cgColor: self.borderColor!)
        }
    }
}

回答by Axel Guilmin

Similar answer to iHulk's one, but in Swift

与 iHulk 的答案类似，但在 Swift 中

Add a file named UIView.swift in your project (or just paste this in any file) :

在您的项目中添加一个名为 UIView.swift 的文件（或将其粘贴到任何文件中）：

import UIKit

@IBDesignable extension UIView {
    @IBInspectable var borderColor: UIColor? {
        set {
            layer.borderColor = newValue?.cgColor
        }
        get {
            guard let color = layer.borderColor else {
                return nil
            }
            return UIColor(cgColor: color)
        }
    }
    @IBInspectable var borderWidth: CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }
    @IBInspectable var cornerRadius: CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
}

Then this will be available in Interface Builder for every button, imageView, label, etc. in the Utilities Panel > Attributes Inspector :

然后这将在 Interface Builder 中为每个按钮、imageView、label 等提供，在 Utilities Panel > Attributes Inspector 中：

Note: the border will only appear at runtime.

注意：边框只会在运行时出现。

回答by iHulk

You can make a category of UIView and add this in .h file of category

您可以创建一个 UIView 类别并将其添加到类别的 .h 文件中

@property (nonatomic) IBInspectable UIColor *borderColor;
@property (nonatomic) IBInspectable CGFloat borderWidth;
@property (nonatomic) IBInspectable CGFloat cornerRadius;

Now add this in .m file

现在将其添加到 .m 文件中

@dynamic borderColor,borderWidth,cornerRadius;

and this as well in . m file

这也在 . m文件

-(void)setBorderColor:(UIColor *)borderColor{
    [self.layer setBorderColor:borderColor.CGColor];
}

-(void)setBorderWidth:(CGFloat)borderWidth{
    [self.layer setBorderWidth:borderWidth];
}

-(void)setCornerRadius:(CGFloat)cornerRadius{
    [self.layer setCornerRadius:cornerRadius];
}

now you will see this in your storyboard for all UIView subclasses (UILabel, UITextField, UIImageView etc)

现在你将在你的故事板中看到所有 UIView 子类（UILabel、UITextField、UIImageView 等）

Thats it.. No Need to import category anywhere, just add the category's files in the project and see these properties in the storyboard.

就是这样......无需在任何地方导入类别，只需在项目中添加类别的文件并在故事板中查看这些属性。

回答by RamwiseMatt

For Swift 3 and 4, if you're willing to use IBInspectables, there's this:

对于Swift 3 和 4，如果您愿意使用IBInspectables，则是：

@IBDesignable extension UIView {
    @IBInspectable var borderColor:UIColor? {
        set {
            layer.borderColor = newValue!.cgColor
        }
        get {
            if let color = layer.borderColor {
                return UIColor(cgColor: color)
            }
            else {
                return nil
            }
        }
    }
    @IBInspectable var borderWidth:CGFloat {
        set {
            layer.borderWidth = newValue
        }
        get {
            return layer.borderWidth
        }
    }
    @IBInspectable var cornerRadius:CGFloat {
        set {
            layer.cornerRadius = newValue
            clipsToBounds = newValue > 0
        }
        get {
            return layer.cornerRadius
        }
    }
}

回答by Zayin Krige

while this might set the properties, it doesnt actually reflect in IB. So if you're essentially writing code in IB, you might as well then do it in your source code

虽然这可能会设置属性，但它实际上并未反映在 IB 中。因此，如果您本质上是在 IB 中编写代码，那么您不妨在源代码中进行

回答by Matthew Quiros

If you want to save time, just use two UIViewson top of each other, the one at the back being the border color, and the one in front smaller, giving the bordered effect. I don't think this is an elegant solution either, but if Apple cared a little more then you shouldn't have to do this.

如果要节省时间，只需将两个UIViews叠在一起使用，后面的一个是边框颜色，前面的一个较小，从而产生边框效果。我也不认为这是一个优雅的解决方案，但如果 Apple 更关心一点，那么你不应该这样做。

回答by Sunil Targe

Its absolutely possible only when you set layer.masksToBounds = trueand do you rest stuff.

只有当您设置layer.masksToBounds = true并休息时才绝对可能。

回答by swiftBoy

Storyboard doesn't work for me all the time even after trying all the solution here

即使在这里尝试了所有解决方案后，故事板也不能一直为我工作

So it is always perfect answer is using the code, Just create IBOutlet instance of the UIView and add the properties

所以使用代码总是完美的答案，只需创建 UIView 的 IBOutlet 实例并添加属性

Short answer :

简短的回答：

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

---

---

Long answer :

长答案：

Rounded Corners of UIView/UIButton etc

UIView/UIButton 等的圆角

customUIView.layer.cornerRadius = 10

Border Thickness

边框厚度

pcustomUIView.layer.borderWidth = 2

Border Color

边框颜色

customUIView.layer.borderColor = UIColor.blue.cgColor

回答by Sneha Patil

Please add these 2 simple line of code:

请添加这 2 行简单的代码：

self.YourViewName.layer.cornerRadius = 15
self.YourViewName.layer.masksToBounds = true

It will work fine.

它会正常工作。