美文网首页
SWIFT-通过XIB文件自定义视图-一劳永逸

SWIFT-通过XIB文件自定义视图-一劳永逸

作者: Eddy_0 | 来源:发表于2018-04-17 19:14 被阅读145次

在iOS开发中,通过XIB文件自定义UI视图是常见的做法。

UIView初始化为一个自定义类

当你想要直接从UIViewController或UIView类的Interface Builder中添加自定义UIView类时,使用此方法。


图-1.png

可能你已经遇到了一些例子,如上图。我现在告诉你将如何做到这一点。这种方法既简单易用,又能保持你的代码整洁。

1, 创建一个父类

我们将创建一个名为NibView的父类,它将处理有关XIB文件合并的所有内容。创建一个父类对于可重复使用来说是很有用的。你可以让每个UIView继承这个父类。

import UIKit

class NibView: UIView {

    var view: UIView!
    override init(frame: CGRect) {
        super.init(frame: frame)
        xibSetup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        xibSetup()
    }
}

//NibView的private方法
private extension NibView {
    func xibSetup() {
        backgroundColor = UIColor.clear
        view = loadNib()
        view.frame = bounds
        addSubview(view)
        view.translatesAutoresizingMaskIntoConstraints = false
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[childView]|",
                                                      options: [],
                                                      metrics: nil,
                                                      views: ["childView": view]))
        addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|[childView]|",
                                                      options: [],
                                                      metrics: nil,
                                                      views: ["childView": view]))
    }
}

神奇发生在xibSetup()函数内部。我们通过使用NSLayoutConstraints (https://developer.apple.com/documentation/appkit/nslayoutconstraint)来确保UIView的大小和它的父视图一样大。

2, 创建UIView扩展
为了初始化自定义的XIB文件,我创建了一个名为loadNib()的UIView扩展。(你可以顺着上面的代码往下写)

//UIView的extension
extension UIView {

    func loadNib() -> UIView {
        let bundle = Bundle(for: type(of: self));
        let nibName = type(of: self).description().components(separatedBy: ".").last!
        let nib = UINib(nibName: nibName, bundle: bundle)
        return nib.instantiate(withOwner: self, options: nil).first as! UIView
    }
}

3, 让自定义UIView类继承自NibView类
最后一步是创建一个自定义UIView和一个将从NibView超类继承的XIB文件。

class CustomView: NibView {
    //添加UI控件
}

然后,打开你的XIB文件,从左侧边栏中选择文件的 File’s Owner,输入自定义类的名称。


图-2.png

现在,进入你的UIViewController,添加一个UIView组件并将你的UIView作为自定义类添加。为了使这种方法起作用,请记住将你的XIB文件命和UIView类名保持一致。

本文翻译自:SWIFT — Custom UIView with XIB file

相关文章

网友评论

      本文标题:SWIFT-通过XIB文件自定义视图-一劳永逸

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