美文网首页iOS
iOS基于storyboard简单封装的控件

iOS基于storyboard简单封装的控件

作者: 大泡沫 | 来源:发表于2018-08-14 17:18 被阅读29次

    前言

    由于公司的项目都是本人单人开发的,所以都是使用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

    相关文章

      网友评论

        本文标题:iOS基于storyboard简单封装的控件

        本文链接:https://www.haomeiwen.com/subject/vgjvbftx.html