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
————————————————
版权声明:本文为CSDN博主「xiangrufeifei3」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/xiangrufeifei3/article/details/79759563

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值