使用 IBInspectable 和 IBDesignable
最近 Xcode 版本中最酷的新功能中的一个(或两个)是 IBInspectable
属性和 IBDesignable
UIView
s。这些与你的应用程序的功能无关,而是影响 Xcode 中的开发人员体验。目标是能够在不运行 iOS 应用程序的情况下直观地检查自定义视图。因此,假设你有一个创造性地命名为 CustomView
的自定义视图,该视图继承自 UIView
。在此自定义视图中,它将显示具有指定颜色的文本字符串。你也可以选择不显示任何文本。我们需要三个属性:
var textColor: UIColor = UIColor.blackColor()
var text: String?
var showText: Bool = true
然后我们可以覆盖类中的 drawRect
函数:
if showText {
if let text = text {
let s = NSString(string: text)
s.drawInRect(rect,
withAttributes: [
NSForegroundColorAttributeName: textColor,
NSFontAttributeName: UIFont(name: "Helvetica Neue", size: 18)!
])
}
}
假设设置了 text
属性,这将在运行应用程序时在视图的左上角绘制一个字符串。问题是如果不运行应用程序,我们将不知道它是什么样的。这就是 IBInspectable
和 IBDesignable
的用武之地 .IBInspectable
允许我们在 Xcode 中直观地设置视图的属性值,就像内置控件一样。IBDesignable
将向我们展示故事板中的视觉预览。以下是该类的外观:
@IBDesignable
class CustomView: UIView {
@IBInspectable var textColor: UIColor = UIColor.blackColor()
@IBInspectable var text: String?
@IBInspectable var showText: Bool = true
override func drawRect(rect: CGRect) {
// ...
}
}
或者在目标 C 中:
IB_DESIGNABLE
@interface CustomView: UIView
@property (nonatomic, strong) IBInspectable UIColor* textColor;
@property (nonatomic, strong) IBInspectable NSString* text;
@property (nonatomic, assign) IBInspectable BOOL showText;
@end
@implementation CustomView
- (instancetype)init {
if(self = [super init]) {
self.textColor = [UIColor blackColor];
self.showText = YES;
}
return self;
}
- (void)drawRect:(CGRect)rect {
//...
}
@end
下一个屏幕截图显示了 Xcode 中发生的事情。第一个是添加修订后的类后发生的事情。请注意,这三个属性有三个新的 UI 元素。该文本颜色会显示颜色选择器,文本只是一个输入框和显示文本会给我们它们分别是 false
和 true
为 Off
和 On
的选项。
接下来是使用颜色选择器将文本颜色更改为红色。此外,还提供了一些文本以使 drawRect
功能显示它。请注意,Interface Builder 中的视图也已更新。
最后,在属性检查器中将“ 显示文本” 设置为 Off
使得 Interface Builder 中的文本显示消失。
然而,当我们需要在你的 Storyboard
中的多个视图创建圆形 UIView
时,我们都会出现这种情况。而不是向 Storyboard
的每个视图声明 IBDesignable
,更好的是创建 UIView
的 UIView
并获得专为你的每个 tihuan 建立的用户界面 24 整个项目通过设置角半径来创建圆角视图。在故事板中创建的任何 UIView 上的可配置边框半径。
extension UIView {
@IBInspectable var cornerRadius:CGFloat {
set {
layer.cornerRadius = newValue
clipsToBounds = newValue > 0
}
get {
return layer.cornerRadius
}
}
}