×

使用xib进行UI封装

发表于2年前(Oct 31, 2015 10:14:35 PM)  阅读 873  评论 0

分类: 移动应用开发 ios

标签: xib loadNibNamed

ios界面设计主要分为三种方式,一是使用storyboard方式,这也是苹果现在主推的开发方式,二是使用完全使用代码进行UI设计,storyboard的优势是可以使用拖拽的方式快速构建UI界面,几乎不需要编写什么代码,而使用代码的方式则是更适合多人协作开发。使用xib+代码进行开发则介于两者之间,xib更利于UI的封装以及重用。

本文主要介绍如何使用xib进行ios界面设计,这里假设我们要做一个文章标题的UI界面,一个简单的居中对齐的UILabel。

1.新建一个Single View Application,添加一个UI界面,这里我们命名为XibView:

2.打开XibView,可以看到跟storyboard类似的设计界面,我们可以在里面添加任何元素:

3.现在我们拖入一个UILabel进来,并将它与XibView的四边的距离约束为0,并将UILabel的对齐方式设为居中对齐:

4.新建一个Cocoa Touch Class类,命名为TestXibView,继承于UIView,然后将XibView.xib的实现类设置为TestXibView;

5.将XibView.xib中得UILabel连线到TestXibView.swift,命名为titleLab:
@IBOutlet weak var titleLab: UILabel!

6.在ViewController中使用XibView:

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        self.view.backgroundColor = UIColor.redColor()
        
        let titleXib = NSBundle.mainBundle().loadNibNamed("XibView", owner: nil, options: nil).first! as! TestXibUIView
        titleXib.frame = CGRectMake(0, 20, self.view.frame.width, 20)
        titleXib.backgroundColor = UIColor.yellowColor()
        titleXib.titleLab.text = "title1"
        
        self.view.addSubview(titleXib)
        
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

在这里我们使用frame来控制的xib的大小,我们同样可以使用约束来控制。

发表评论