是否可以通过界面构建​​器设置UIView边框属性?


184

是否可以直接从界面生成器控制UIView边框属性(颜色,厚度等),还是只能以编程方式进行控制?



1
以防万一有人像我一样来自Google。要查看这些更改反映在IB中,您只需要创建UIView的子类并将其分配给您要在IB中操作的任何View。
Kanongata

Answers:


393

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

您可能必须使用字符串而不是数字,但是可以!

layer.cornerRadius
layer.borderWidth
layer.borderColor

更新:layer.masksToBounds = true

例

更新:为关键字路径选择适当的类型:

在此处输入图片说明


3
对您和Peter DeWeese:我使用Xcode 4.6.3,并且可以在不实现CALayer接口的情况下将键路径类型设置为“ Color”

39
不幸的是,layer.borderColor不能用这种方式设置。它是CGColorRef,但是IB Color值类型是UIColor。
mrgrieves 2014年

12
因此,这就是用户定义的运行时属性的作用!哈哈,自2011年以来一直在为iOS撰写文章,但我从未了解这些领域的用途。感谢您的回答。
安迪·伊瓦内斯

3
很好,但是您必须为每个属性设置正确的类型。例如,“ layer.cornerRadius”的类型必须设置为“ Number”,而不是“ String”!
Peter Kreinz

5
另外,不要忘记选中“限制范围”复选框以使cornerRadius起作用。
皮埃尔·奥利维尔·西蒙纳德

182

Rich86Man的答案是正确的,但是您可以使用类别来代理诸如layer.borderColor之类的属性。(摘自ConventionalC CocoaPod)

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

界面生成器

layer.borderUIColor

结果将在运行时显示出来,而不是在Xcode中。

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

在Swift 2.0中:

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

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

在Swift 3.0中:

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

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

我不能让它为我工作。.m文件抱怨关于borderColor必须为borderUIColor并进行修复,这样做之后它仍然显示警告,并且边框颜色在运行时不呈现。我的不同之处是我拥有@实现NameOfFile,而不是@实现CALayer(NameOfFile),我不理解CALayer部分,请您进一步解释一下
Dave Haigh 2013年

2
@PeterDeWeese好答案!=)
c-villain

1
实际上,您可以将Number与borderWidth一起使用并接受NSNumber。它工作正常。
彼得·德威斯

1
我认为这绝对是解决BorderColor问题的最佳解决方案。神奇的使用类别!
EricWasTaken 2015年

1
在Swift中工作!
KOTIOS,2016年

81

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

在您的项目中添加一个名为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
        }
    }
}

然后,它将在“界面构建器”中为“实用工具面板”>“属性检查器”中的每个按钮,imageView,标签等可用:

属性检查器

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


@Gaurav您看到什么错误?您在哪个组件(UIButton,UILabel等)上使用它?
Axel Guilmin

没有更多细节,我无济于事:(
Axel Guilmin

2
@IBDesignable从该扩展的开头删除之前,我一直在使用这种方法使Interface Builder崩溃。
艾伯特·博里

1
太好了...谢谢!我正在使用XCode 8.2.1
bobwki

1
非常方便和整洁!谢谢!
周杰伦

56

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

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

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

@dynamic borderColor,borderWidth,cornerRadius;

在。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];
}

现在您将在情节提要中看到所有UIView子类(UILabel,UITextField,UIImageView等)

在此处输入图片说明

就是这样。无需在任何地方导入类别,只需在项目中添加类别的文件,然后在情节提要中查看这些属性。


2
与IB_DESIGNABLE补它,使IB使用的drawRect重绘自定义视图:方法 developer.apple.com/library/ios/recipes/...
txulu

3
那是伟大的,如果你在接口前行.h文件写IB_DESIGNABLE,你不需要在.M添加@dynamic线
Jasmeet

@ user1618612它与分辨率无关,它只是设置普通的图层属性。
iHulk

11

对于Swift 3和Swift 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
        }
    }
}

这对我来说是最好的解决办法
MUCĐồng

伟大的解决方案,谢谢
Ebtehal___

7

虽然这可能会设置属性,但实际上并不会反映在IB中。因此,如果您基本上是用IB编写代码,则最好在源代码中进行操作


1
欢迎使用MVC!您查看的属性永远都不应在代码中!
亚历杭德罗·伊万

2
^这不是MVC。
安德鲁·普卢默

1
考虑到此代码有95%的时间进入控制器,它也是MVC,当然,您应该正确地继承或扩展您的视图,然后通过编码对其进行正确配置:-)
Daniele Bernardini

4

如果您想节省时间,只需UIViews在顶部使用两个,在后面的一个是边框颜色,在前面的一个较小,以产生边框效果。我也不认为这是一个优雅的解决方案,但是如果Apple多关心一点,那么您就不必这样做。


10
解决方法现在可以节省时间,并在将来浪费更多时间。
Lachezar Todorov 2015年


-1

即使在这里尝试了所有解决方案后,Storyboard也不总是对我有用

因此,使用代码始终是一个完美的答案,只需创建UIView的IBOutlet实例并添加属性

简短答案:

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

长答案:

UIView / UIButton等的圆角

customUIView.layer.cornerRadius = 10

边框厚度

pcustomUIView.layer.borderWidth = 2

边框颜色

customUIView.layer.borderColor = UIColor.blue.cgColor

这个问题非常具体,请问如何从Interface Builder中进行操作。您的答案无关紧要。
Shinnyx

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.