博客> Xcode: @IBDesignable 和 @IBInspectable 让自定义控件编辑可视化
Xcode: @IBDesignable 和 @IBInspectable 让自定义控件编辑可视化
2019-08-21 19:47 评论:0 阅读:1020 xiphap
ios xcode swift IBDesignable IBInspectable 自定义控件 didSet

当我们自行创建一个空白控件(如 Stack View),并将它与已经自定义好的某个类建立关系后,
在 Identity Inspectors 中和自定义类关联,即完成自定义控件设置
虽然能在编译后具有效果,但并不能在 storyboard 里将它的效果实时显示出来,也不能在 Identity Inspectors 编辑它的属性。为此,需要用到 @IBDesignable 和 @IBInspectable。
如上图红色标识的空间,没有显示任何内容

@IBDesignable

在声明类时加入@IBDesignable,能够让 storyboard 主动编译并显示该类。操作方法:

  • 找到自定类的位置,在 class 前键入 @IBDesignable
    @IBIndesignable class A: UIStackView { }

    这样在 storyboard 中就能显示自定义的控件的样子了。 storyboard 显示出自定义控件的样子

@IBInspectable

在自定义类中声明属性时,加入 @IBInspectable,能够在 Identity Inspectors 中编辑该属性,同时在 stroyboard 中实时显示效果。操作方法:

  • 在自定义类中的属性声明前添加@IBInspectable,以让这些属性在 Identity Inspectors 中显示
    @IBIndesignable class A: UIStackView {
    @IBInspectable var a: CGSize = CGSize(width: 44.0, height: 44.0)
    @IBInspectable var b: Int = 5
    }
  • 在属性声明中添加 didSet 方法,告诉 Interface Builder(IB) 当属性值变动时,执行该方法
    @IBIndesignable class A: UIStackView {
    @IBInspectable var a: CGSize = CGSize(width: 44.0, height: 44.0) {
        didSet {
            //在这里输入执行方法的内容
        }
    }
    @IBInspectable var b: Int = 5 {
        didSet {
            //在这里输入执行方法的内容
        }
    }
    }
  • didSet 方法中移除已有控件,否则 IB 会在已有控件基础上添加控件
    @IBIndesignable class A: UIStackView {
    @IBInspectable var a: CGSize = CGSize(width: 44.0, height: 44.0) {
        didSet {
            removeArrangeSubview(button)    //如果存在控件集(Stack View),该方法将使该控件的位置和大小不再受控件集控制,不是移出控件集
            button.removeFromSuperview()    //将控件移除
        }
    }
    @IBInspectable var b: Int = 5 {
        didSet {
            removeArrangeSubview(button)    //如果存在控件集(Stack View),该方法将使该控件的位置和大小不再受控件集控制,不是移出控件集
            button.removeFromSuperview()    //将控件移除
        }
    }
    }
收藏
0
sina weixin mail 回到顶部