首先上源码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
