前言

由于公司的项目都是本人单人开发的，所以都是使用storyboard或者xib搭建的UI，基本上没有使用代码，所以本人为了更好的看到storyboard或者xib上的UI的相关，实现所见即所得，因此对UIKit的基本控件进行了简单的封装。效果图如下：

screenshot.gif

实现原理

如果要使你自定义的类和属性在storyboard或者xib中实时通过设置的值改变状态，就不得不说这两个关键字：@IBDesignable和@IBInspectable。在本篇文章中，它们是主角。
@IBDesignable是用于修饰自定义类的。
@IBInspectable是用于修饰自定义属性的。
其中自定义属性目前只支持基本的数据类型：

支持的数据类型.jpg

代码结构

代码结构很简单：

结构.jpg

这些以HXIB开头的类都是继承自相应的UIKit的控件的类。其中UIView+HXIBKit中定义了三个UIView的通用属性

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

使用也很简单

三个通用属性.jpg

HXIBView和HXIBImageView只是定义了一个类，并没有定义其他属性，因为storyboard的机制是：虽然已经在category中定义了属性，storyboard中也可以直接修改这三个数值了，但是如果你想要真正的所见即所得，必须要使用自定义的类。
其他几个类都有单独实现在日常开发中经常用到的属性，使用也非常简单，就像设置普通的属性一样，这里就不赘述了。

值得说明的是

在HXIBLayoutButton中定义了枚举HXIBButtonLayoutType。
在HXIBLoadingButton中定义了枚举HXIBButtonActivityPosition和HXIBButtonActivityStyle。
由于storyboard不支持自定义数据类型的属性，所以这些枚举的rawValue都是String类型的，我在定义属性时都是定义的String类型的属性。比如：

 @IBInspectable var activityStyle: String = "white" {
        didSet {
            guard let style = HXIBButtonActivityStyle(rawValue: activityStyle) else { return }
            switch style {
            case .white:
                activityView.activityIndicatorViewStyle = .white
            case .gray:
                activityView.activityIndicatorViewStyle = .gray
            }
        }
    }

storyboard这样设置：

loadingBtn.jpg

小tips

有些同学虽然都按照要求定义了类和属性，但是在storyboard中设置了属性之后并没有变化。遇到这样的情况该怎么办呢？泡哥哥告诉你：
在storyboard界面中，点击xcode上方菜单栏的Editor --> Refresh All Views，这样storyboard就会强制刷新，等它刷新完了之后，你就会发现你所设置的效果就出来了。但是如果你再改数值，xcode又没反应了，再重复一下上面的步骤，效果又出来了。不过这样操作就太麻烦了吧，有没有一劳永逸的办法呢？当然有啦，只需要点击xcode上方菜单栏的Editor --> Automatically Refresh Views，这时候在该选择前面有个小勾，就表示你选中了，到时候就可以愉快的实时修改实时反馈啦。

editor.jpg

总结

如果这篇文章对各位有那么一些些作用，本人就感觉非常高兴了，谢谢。
这里是本文demo