通过file's owner构建可在sb中使用的xib

首先上源码github地址

首先新建一个xib,命名为TestView.xib,一个class类名为TestView.

10.jpg

然后简单的在xib中添加一个背景图,一个UILabel用来展示,并且设置好约束.

11.jpg
常规我们使用xib的话通常会把TestView.swift类绑定为这个xib,为了能够在其他的storyboard中我们换一种方式,指定xib的file's owner为该类,这样的话我们还可以在storyboard中像view controller构建的xib那样拖线了,而viewcontroller正是其内部view的file's owner,这里的思路正是借鉴了这个.

选中file's owner选项在右边面板里面绑定为自定义的xib.

12.jpg
下面则是关键部分了,为了能够在storyboard中以及正常我们通过init方法初始化的时候正常使用这个xib,我们需要复写两个方法:

init(frame: CGRect)
init?(coder aDecoder: NSCoder)

正常我们使用init构造方法初始化的时候,会调用init(frame: CGRect),而xib跟storyboard的本质是xml文件,所以往下会调用init?(coder aDecoder: NSCoder)方法.

在这两个方法中实现setup()方法即可

    func setup(){
        
        let bundle = NSBundle(forClass: self.dynamicType)
        let nib    = UINib(nibName: "TestView", bundle: bundle)
        
        view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
        
        view.frame = bounds
                
        addSubview(view)
        
    }

这样我们在storyboard中随便拖一个view,只要指定这个view的Class为TestView即可.

13.jpg
除此之外,并不需要在storyboard中做任何操作,运行之后,OK,正是我们想要的效果. 14.jpg

Extension:我们还使用@IBInspectable对xib进行可视化编辑

我们先把背景图与文字拖为属性,然后使用@IBInspectable设置其get与set方法即可

    @IBOutlet weak var bgimage: UIImageView!
    
    @IBOutlet weak var topicTitle: UILabel!

    @IBInspectable var backgroundImage :UIImage{
        get{
            return bgimage.image!
        }
        set{
            bgimage.image = newValue
        }
    }
    
    @IBInspectable var title: NSString{
        get{
            return topicTitle.text!
        }
        set{
            topicTitle.text = newValue as String
        }
    }

OK,这里我们再通过storyboard中使用的时候就更方便了,直接进行属性的设置
如图:

15.jpg