本文将分两个部分内容：基于代码的自定义控件和基于XIB的自定义控件。
基于代码的自定义控件
实现的基本步骤（纯文字版, 阅读障碍者请跳过~）
- 创建一个新类，基类选择UIView
- 实现init(frame:)方法
override init(frame: CGRect) {
super.init(frame: frame)
setupSubviews()
}
func setupSubviews() {
// ..
}
- 实现init()方法
convenience init() {
self.init(frame: CGRect.zero)
}
- 实现init(coder:)方法
基本逻辑跟init(frame:)是类似的
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupSubviews()
}
init(coder:)和init(frame:)是在两个不同的情境下被调用的。前者是当自定义控件在XIB中使用的时候被调用，后者是使用代码直接创建自定义控件时被调用的。
当自定义控件在XIB中使用时候还有一个方法会被触发：awakeFromeNib，此方法是当控件从NIB文件加载完毕之后触发的, 它和init(coder:)的触发机制是不同的, init(coder:)要做真正的反序列化的工作, awakeFromNib是反序列化完毕并且设置好相关的Outlet变量之后被调用的。
- 重写layoutSubviews方法，调整子View的大小。
override func layoutSubviews() {
asubview.bounds = self.bounds
// ...
}
有时候也可以在上述创建子View的时候设置相关的大小和约束，但是如果子View的大小或约束需要依赖self的大小的话，就只有在这个方法里进行, 因为之后这个方法被调用的时候self的frame才是正确的, 同时, 在self的frame发生变化的时候(包括发生了旋转), 这个方法也会再次被调用。
基于XIB创建自定义控件
我们假设想写一个类似百度个税计算机的App, 想让其中的税率条目做成自定义控件
自定义控件界面
-
创建一个新类MyCustomView，派生类选择UIView
创建新类
-
创建一个和类同名的XIB文件
创建XIB文件
-
修改XIB文件中View的Size 为Freedom, Status bar为None
Metrices属性
-
设计自定义控件的视图布局和约束
设计布局和约束
- 在XIB的File's Owner界面的Custom Class中选择自定义类的名字
File's Owner
注意：不是在View自身的Custom Class中填写，如果你调试的时候出现init(coder:)递归调用了的话，那就是这个地方弄错了
错误的示范
File's Owner设置的CustomView是设定子View关联Outlet变量到哪个类的对象, 这个对象跟后面通过UINib加载Xib文件传递的Owner对象的关系就是"类"与"对象"的关系.
而View的CustomView是指当Xib文件被加载进来的时候其跟View对象的类型. 默认是UIView, 后面我们会展示在Xib中使用我们的自定义控件MyCustomView的时候, 我们就会用到这个特性.
- 给子View拉线关联必要的Outlet变量。
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var selfTaxRateInput: UITextField!
@IBOutlet weak var selfTaxResultLabel: UILabel!
@IBOutlet weak var companyTaxRateInput: UITextField!
@IBOutlet weak var companyTaxResultLabel: UILabel!
- 定义一个加载XIB文件的方法和一个完整的初始化子类的方法
// load view from xib
func loadViewFromNib() -> UIView {
let bundle = NSBundle(forClass: self.dynamicType)
let nib = UINib(nibName: String(self.dynamicType), bundle: bundle)
let view = nib.instantiateWithOwner(self, options: nil)[0] as! UIView
return view
}
// setup view's auto resize to fill parent, and add a % view to input view
func setupSubviews() {
view = loadViewFromNib()
view.autoresizingMask = [UIViewAutoresizing.FlexibleWidth, UIViewAutoresizing.FlexibleHeight]
addSubview(view)
selfTaxRateInput.rightViewMode = .Always
let labelMaker:()->UIView = {
let precentLabel = UILabel();
precentLabel.text = "%";
return precentLabel
}
selfTaxRateInput.rightView = labelMaker()
companyTaxRateInput.rightViewMode = .Always
companyTaxRateInput.rightView = labelMaker()
}
// reset subview's frame
override func layoutSubviews() {
view.frame = bounds
let precentRect = CGRect(x: 0, y: 0, width: 20, height: bounds.size.height)
selfTaxRateInput.rightView?.bounds = precentRect
companyTaxRateInput.rightView?.bounds = precentRect
}
这里需要一个添加一个view的属性, 用来保存从Xib中加载得到的View, 然后作为子View添加给self. 这里可能有点迷惑, 我们不就是一个view吗? 其实, 在现在这个用法里面, self只是一个容器, 它的作为就是作为Xib中View的容器
- 编写我们的各个初始化函数
weak var view: UIView!
override init(frame: CGRect) {
super.init(frame: frame)
setupSubviews()
}
convenience init() {
self.init(frame: CGRect.zero)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
setupSubviews()
}
上面的步骤已经完成了自定义控件的编写了, 下面接着介绍如何在Xib中使用它?
-
打开我们主界面的Xib文件, 拖入一个UIView 设置好大小位置和约束
使用自定义控件
-
把这个UIView的CustomView设置为我们上面开发的"MyCustomView"
设置CustomView
这里设置了子View的CustomView为MyCustomView, 那么当主Xib被加载的时候, 解析到这个子View的时候, 就会用这个CustomView的类型来创建对象. 伪代码类似这样:
let theClass: AnyClass! = NSClassFromString(CustomClassName)
let classObject: NSObject.Type! = theClass as! NSObject.Type!
let obj = classObject.init()
rootView.addSubview(obj)
-
好, 运行一下看看效果.
效果
上面的使用就介绍的差不多了, 但是有个美中不足的地方, 那就是不能在设计阶段看到大致的效果. 也不能在设计阶段修改一些属性 -- 比方说设置title.
下面我们来修改一下MyCustomView, 让它可以支持一些设计时实时展示的特性.
- 首先, 我们在MyCustomView的定义前面加上 @IBDesignable
@IBDesignable
class MyCustomView: UIView {
@IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var selfTaxRateInput: UITextField!
- 定义一个title的属性, 并使用@IBInspectable修饰
@IBInspectable var title: String = "" {
didSet {
self.titleLabel.text = title
}
}
实时设计
完成之后, 我们再次打开主Xib的Interface Builder界面, 这时候, 我们就已经可以实时看到控件的界面了, 并且在属性面板里头, 我们也多了一个叫"Title"的属性可以设置, 我们试着设置成"公积金", 设计界面就自动更新了. 是不是很有点标准控件的感觉呢?
注意, 你必须给变量定义一个明确的类型, 否则在IB上是看不到的
错误的示范:
@IBInspectable var title = "" {
didSet {
self.titleLabel.text = title
}
}
如果你对实时设计感兴趣的话, 还可以阅读文章《如何创建iOS可视化控件》
网友评论