swift：使用xib布局文完成自定义UIView

当自定义uiview 时候有几种方法，这里使用 xib 文件布局控件 + uiview.swift 文件方式

实例如下：

a) 新建UIview 文件： MyVolumeView

继承自UIView, 自定义的uiview 命名为MyVolumeView.

注意：这里，由于继承自UIView，无法选择同时创建xib文件。

b) 新建xib文件

name 同自定义的view: MyVolumeView, 新建后会有个xib文件在目录里。

c) 指定xib 文件中的file's owner 的custom class 为自定义的class: MyVolumeView 。

注意不是view 的custom class.

d) 布局xib文件：正常添加需要的控件，属性等。设定size 属性如下：

按照自己的需要来添加控件，本例子如下。

e) 为控件添加事件 到MyVolumeView.swift

e) 使用自定义控件。

在main.storyboard 中添加一个view控件，并排版布局好。

指定其custom class 为先前定义的MyVolumeView,

如此就能找到我们自定义的界面的类了。

运行，发现在界面中还不能加载出来，那是因为没有加载xib文件，也没有重写init。

swift语言强制要求重写init（frame：CGRect)方法，其中required init?(coder aDecoder: NSCoder) 是必不可少的。

在MyVolumeView 中添加代码来加载xib 文件

    fun  loadXib() ->UIView {
        let className = type(of:self)
        let bundle = Bundle(for:className)
        let name = NSStringFromClass(className).components(separatedBy: ".").last
        let nib = UINib(nibName: name!, bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView
        
        return view
    }

完整的代码如下：

import UIKit

class MyVolumeView: UIView {
    
    @IBOutlet weak var volumeIndicator: UILabel!

    @IBAction func btnVolumeUp(_ sender: UIButton) {
        self.volumeIndicator.text = "up dB"
        print("volume up click")
    }
    
    
    @IBAction func btnVolumeDown(_ sender: UIButton) {
        self.volumeIndicator.text = "down dB"
    }
    
    
    override func layoutSubviews() {
        super.layoutSubviews()
        
    }
    
    var contentView:UIView!
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        contentView = loadXib()
        addSubview(contentView)
    }
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        contentView = loadXib()
        addSubview(contentView)
        
    }
    
    func loadXib() ->UIView {
        let className = type(of:self)
        let bundle = Bundle(for:className)
        let name = NSStringFromClass(className).components(separatedBy: ".").last
        let nib = UINib(nibName: name!, bundle: bundle)
        let view = nib.instantiate(withOwner: self, options: nil).first as! UIView
        
        return view
    }
    
}

运行程序

结果如图，本程序中给两个button 简单的添加了事件修改 label 显示。

点击 volume + 显示：up dB, 表示控件动作有效。

思考：

如何能在main.storyboard 中直接加载出自定义的界面？？

这里没有使用uiviewcontroller，自定义uiviewcontroller又是怎么回事？

学习ios 开发边学边做，有挺多不清楚的，还是需要多思考，多做。勉励自己。

xib, storyboard, nib 关系: nib 是最初用来布局的文件，xcode 4.0后推出使用xib来实现布局，

再后来ios 推出了storyboard 来布局和管理ui。目前xib和storyboard 都存在，nib则退居幕后。

使用xib / storyboard 有何区别呢？storyboard 可以对应多个类，多个控制器，但xib通常对应一个类。

参考：

1.http://www.hangge.com/blog/cache/detail_1394.html

2.xib,storyboard nib 关系 https://www.cnblogs.com/tgycoder/p/5677121.html

3.https://blog.csdn.net/testsust/article/details/51965240

4.https://www.cnblogs.com/Mr-------Li/p/6401100.html

swift：使用xib布局文完成自定义UIView

猜你喜欢