如何用Swift创建自定义iOS控件

本文将分两个部分内容：基于代码的自定义控件和基于XIB的自定义控件。

基于代码的自定义控件

实现的基本步骤（纯文字版, 阅读障碍者请跳过~）

1. 创建一个新类，基类选择UIView
2. 实现init(frame:)方法

   override init(frame: CGRect) {
    super.init(frame: frame)
    setupSubviews()
   }
   func setupSubviews() {
   // ..
   }

    

3. 实现init()方法

   convenience init() {
    self.init(frame: CGRect.zero)
   }

    

4. 实现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变量之后被调用的。

5. 重写layoutSubviews方法，调整子View的大小。

   override func layoutSubviews() {
    asubview.bounds = self.bounds
    // ...
   }

   有时候也可以在上述创建子View的时候设置相关的大小和约束，但是如果子View的大小或约束需要依赖self的大小的话，就只有在这个方法里进行, 因为之后这个方法被调用的时候self的frame才是正确的, 同时, 在self的frame发生变化的时候(包括发生了旋转), 这个方法也会再次被调用。

基于XIB创建自定义控件

我们假设想写一个类似百度个税计算机的App, 想让其中的税率条目做成自定义控件

自定义控件界面

1. 创建一个新类MyCustomView，派生类选择UIView
   
   
   

   创建新类
2. 创建一个和类同名的XIB文件
   
   
   

   创建XIB文件
3. 修改XIB文件中View的Size 为Freedom, Status bar为None
   
   
   

   Metrices属性
4. 设计自定义控件的试图布局和约束
   
   
   

   设计布局和约束

5. 在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的时候, 我们就会用到这个特性.

6. 给子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!

7. 定义一个加载XIB文件的方法和一个完整的初始化子类的方法

   // load view from xib
    func loadViewFfromNib() -> 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 = loadViewFfromNib()
        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的容器

8. 编写我们的各个初始化函数

    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中使用它?

1. 打开我们主界面的Xib文件, 拖入一个UIView 设置好大小位置和约束
   
   
   

   使用自定义控件
2. 把这个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)

3. 好, 运行一下看看效果.
   
   
   

   效果

---

上面的使用就介绍的差不多了, 但是有个美中不足的地方, 那就是不能在设计阶段看到大致的效果. 也不能在设计阶段修改一些属性 -- 比方说设置title.

下面我们来修改一下MyCustomView, 让它可以支持一些设计时实时展示的特性.

1. 首先, 我们在MyCustomView的定义前面加上 @IBDesignable

   @IBDesignable
   class MyCustomView: UIView {
   
    @IBOutlet weak var titleLabel: UILabel!
   
    @IBOutlet weak var selfTaxRateInput: UITextField!

2. 定义一个title的属性, 并使用@IBInspectable修饰

    @IBInspectable var title: String = "" {
        didSet {
            self.titleLabel.text = title
        }
    }

   
   

   实时设计

   完成之后, 我们再次打开主Xib的Interface Builder界面, 这时候, 我们就已经可以实时看到控件的界面了, 并且在属性面板里头, 我们也多了一个叫"Title"的属性可以设置, 我们试着设置成"公积金", 设计界面就自动更新了. 是不是很有点标准控件的感觉呢?

注意, 你必须给变量定义一个明确的类型, 否则在IB上是看不到的

错误的示范:
 @IBInspectable var title = "" {
        didSet {
            self.titleLabel.text = title
        }
    }

 

文／子达如何（简书作者）
原文链接：http://www.jianshu.com/p/6d73d3b16918
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。