使用IBInspectable和IBDesignable实现实时预览

最新推荐文章于 2020-12-21 15:47:30 发布

weixin_34365417

最新推荐文章于 2020-12-21 15:47:30 发布

阅读量168

点赞数

文章标签： xcode 移动开发

原文链接：https://yq.aliyun.com/articles/48884

版权

Xcode6提供了这样一个激动人心的feature，在设计项目的时候建立一个自定义的界面来使你可以配置自定义的属性并控制它们实时显示出来，用IBInspectable和IBDesignable来完成。

IBInspectable

IBInspectable 属性提供了访问旧功能的新方式：用户自定义的运行时属性。从目前的身份检查器（identity inspector）中访问，这些属性在 Interface Builder 被整合到 Xcode 之前就可用了。他们提供了一个强有力的机制来配置一个 NIB，XIB，或者 storyboard 实例中的任何键值编码（key-value coded）属性

keyPath.png

虽然功能强大，运行时属性可能会使工作很繁琐。一个属性的关键字路径，类型和属性值需要在每个实例设置，没有任何自动完成或输入提示，这就需要前往文档或自定义子类的源代码仔细检查设置。 IBInspectable 属性彻底的解决了这个问题：在 Xcode 6，你现在可以指定任何属性作为可检查项并为你的自定义类建立了一个用户界面。

如果我们想要单纯的让项目中的view都改变某个样式，并且可以在inspect中显示出来，但是storyboard并不会实时更新的话，扩展UIView，重写属性即可。

MARK: - 扩展UIView，能出现在inspect栏里
extension UIView {
    @IBInspectable var cornalRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
}

可检查属性仅仅是用户定义的运行时属性顶部的接口，所以支持相同的类型列表：布尔，字符串和数字（即，NSNumber 或任何数值类型），以及 CGPoint、CGSize、CGRect、UIColor 和 NSRange，额外增加了 UIImage。

这样所有view都可以改变圆角半径了。

但是我们想实时预览，并且可以指定某个view改变，就要用到IBDesignable了

IBDesignable

如果这还不够，IBDesignable 自定义视图也在 Xcode 6 中亮相了。当应用到 UIView 或 NSView 子类中的时候，@ IBDesignable 让 Interface Builder 知道它应该在画布上直接渲染视图。你会看到你的自定义视图在每次更改后不必编译并运行你的应用程序就会显示。

标记一个自定义视图为 IBDesignable，只需在类名前加上 @IBDesignable 的前缀（或是 Objective-C 里的 IB_DESIGNABLE 宏）。你的初始化、布置和绘制方法将被用来在画布上渲染你的自定义视图：

import UIKit

/// 实时渲染自定义类
@IBDesignable
class RoundImageView: UIImageView {

    /// 自定义圆角半径
    @IBInspectable var cornerRadius: CGFloat = 0 {
        didSet{
            layer.cornerRadius = cornerRadius
            layer.masksToBounds = cornerRadius > 0
        }
    }
    
    /// 自定义边框宽度
    @IBInspectable var borderWidth: CGFloat = 0 {
        didSet{
            layer.borderWidth = borderWidth
        }
    }
    
    /// 自定义边框颜色
    @IBInspectable var borderColor: UIColor? {
        didSet{
            layer.borderColor = borderColor?.CGColor
        }
    }
}

写完后，切回storyboard，点击show the identity inspector，选中要改变属性的view，指定它的Class为自定义的Class，接着会看到designables updating

update.png

最后的效果如下图所示：

roundImage.png

IBCalculatorConstructorSet

把自定义 IBDesignable 视图和视图里的 IBInspectable 属性结合在一起，你能干点啥？作为一个例子，让我们更新老式经典 Apple folklore：在“Steve Jobs Roll Your Own Calculator Construction Set”，Xcode 6 的风格：