前言
-
xib 文件可以被 Xcode 编译成 nib 文件,xib 文件本质上是一个 xml 文件,而 nib 文件就是编译后的二进制文件,该文件将视图等控件对象封装了起来,而在程序运行起来后,这些对象会被激活。xib 可以用 vim 或 cat 命令查看。nib 文件可以在程序的 Build 目录下找到。
-
xib 文件有以下几个重要的属性,从哪里加载 xib,加载 xib 中的什么视图,都可以根据这几个属性得出。
- xib 文件名
- File’s Owner
- xib 文件中的视图的 Class
- xib 文件中的视图的 Outlet 指向
-
在写界面时同时混用 xib 和代码可以提高效率,而对 xib 的使用主要体现在其专用性和通用性上。
-
对于一些专门的界面,例如 App 中的设置界面,纯代码写难免会浪费时间,此时可以通过 xib 文件的拖控件方法来定制。这个 xib 是专用于某一个界面的,目的是提高效率。
-
对于一些通用的控件甚至界面,例如一个很漂亮但实现起来非常复杂的按钮,此时可以通过 load xib 文件中的视图来快速添加。这个 xib 对于所有视图是共用的,目的是提高可复用性。
-
对于通用的 xib:
- 如果 xib 只是单纯的界面展示,那么 File’s Owner 可以随意。
- 如果 xib 中包含了按钮、手势等用户输入事件,那么 File’s Owner 最好设置为 UIViewController 类的子类。
-
xib 中可以有多个视图控件,从 xib 中 load 出来的 views 数组中视图对象的排列顺序和 xib scene 中的对象排列顺序一致(其实就是 xml 文件中元素的排序而已)。
1、xib 文件加载
-
1)xib 文件加载方式
-
1> 方法 1
// Test 为 xib 文件名 NSArray *objs = [[NSBundle mainBundle] loadNibNamed:@"Test" owner:nil options:nil]; [self.view addSubview:objs[1]];
-
2> 方法 2
// 一个 UINib 对象就代表一个 xib 文件 /* 一般情况下,bundle 参数传 nil,默认就是 mainBundle */ UINib *nib = [UINib nibWithNibName:@"Test" bundle:[NSBundle mainBundle]]; NSArray *objs = [nib instantiateWithOwner:nil options:nil]; [self.view addSubview:objs[1]];
-
-
2)使用 xib 自定义 view 的步骤
-
新建自定义控件类
-
新建 xib 文件(文件名建议和自定义控件类的类名一致)
-
修改 xib 中控件绑定的类名
-
在类扩展中增加子控件的属性,关联 xib 中的子控件。封装 xib 的加载过程,增加模型属性,在模型属性 setter 方法中设置数据到子控件上。
-
1.1 加载 xib 中 File’s Owner 为 nil 的视图
-
Objective-C
-
BlueView.xib
- 由于 BlueView 会放到其它 View 上作为 subview,所以这儿 size 是 Freeform, Status Bar 是 None。
-
MainViewController.m
@property (strong, nonatomic) UIView *blueView; - (void)loadBlueViewFromXIB { // BlueView.xib 的 File's Owner 为 nil NSArray *views = [[NSBundle mainBundle] loadNibNamed:@"BlueView" owner:nil options:nil]; _blueView = views[0]; [self.view addSubview:_blueView]; // 从 xib 加载进来的 View 大小是确定的,但是该视图在父视图中的位置是不确定的。此外,视图中的子视图也是原封不动地 Load 进来的 CGRect frame = _blueView.frame; frame.origin.x += 50.0f; frame.origin.y += 80.0f; _blueView.frame = frame; }
-
-
Swift
-
BlueView.xib
同 Objective-C 设置
-
MainViewController.swift
var blueView:UIView! func loadBlueViewFromXIB() { // BlueView.xib 的 File's Owner 为 nil let views = NSBundle.mainBundle().loadNibNamed("BlueView", owner: nil, options: nil) blueView = views[0] as! UIView self.view.addSubview(blueView) // 从 xib 加载进来的 View 大小是确定的,但是该视图在父视图中的位置是不确定的。此外,视图中的子视图也是原封不动地 Load 进来的 var frame = blueView.frame frame.origin.x += 50.0 frame.origin.y += 80.0 blueView.frame = frame }
-
-
结论:
- File’s Owner 为 nil 的 xib 文件中的视图属于通用视图,在工程中可以复用。
- 从 xib 加载进来的 View 大小是确定的,但是该视图在父视图中的位置是不确定的,因此需要开发者自行指定。
- 视图中的所有子视图会被原封不动地 Load 进来。
1.2 加载 xib 中 File’s Owner 为 self 的视图
-
Objective-C
-
GreenView.xib
-
MainViewController.m
@property (strong, nonatomic) IBOutlet UIView *greenView; - (void)loadGreenViewFromXIB { // GreenView.xib 的 File's Owner 设为 self,并建立了一个从该 xib 的 View 到 self 的 IBOutlet greenView [[NSBundle mainBundle] loadNibNamed:@"GreenView" owner:self options:nil]; [self.view addSubview:_greenView]; // 只要 self 主动调用 Load XIB 的方法,self 持有的 IBOutlet 指向的视图就会被初始化。这里不需要通过 views[0] 的方式存取视图 CGRect frame = _greenView.frame; frame.origin.x = _blueView.frame.origin.x; frame.origin.y = _blueView.frame.origin.y + 80.0f; _greenView.frame = frame; }
-
-
Swift
-
GreenView.xib
同 Objective-C 设置
-
MainViewController.swift
@IBOutlet var greenView: UIView! func loadGreenViewFromXIB() { // GreenView.xib 的 File's Owner 设为 self,并建立了一个从该 xib 的 View 到 self 的 IBOutlet greenView NSBundle.mainBundle().loadNibNamed("GreenView", owner: self, options: nil) self.view.addSubview(greenView) // 只要 self 主动调用 Load XIB 的方法,self 持有的 IBOutlet 指向的视图就会被初始化。这里不需要通过 views[0] 的方式存取视图 var frame = greenView.frame frame.origin.x = blueView.frame.origin.x frame.origin.y = blueView.frame.origin.y + 80.0 greenView.frame = frame }
-
-
结论:
- File’s Owner 不为 nil 的 xib 文件中的视图属于专用视图,在工程中不应该被复用。
- 只要 self 主动调用 loadNibNamed:owner:options: 方法,self 持有的 IBOutlet 指向的视图就会被初始化。
- 存取 xib 中的视图不用 views[0] 的方式,而是通过 IBOutlet 类型的 property 进行存取。
1.3 加载 xib 中 File’s Owner 为特定类的视图
-
Objective-C
-
RedView.xib
-
RedViewOwner.h
@property (strong, nonatomic) IBOutlet UIView *redView;
-
MainViewController.m
@property (strong, nonatomic) RedViewOwner *redViewOwner; @property (strong, nonatomic) UIView *redView; - (void)loadRedViewFromXIB { // RedView.xib 的 File's Owner 是 RedViewOwner 类的实例,并建立了一个从该 xib 的 View 到 RedViewOwner 实例的 IBOutlet。 // 只要通过 _redViewOwner 主动调用 Load XIB 的方法,该 IBOutlet 指向的视图就会被初始化 _redViewOwner = [RedViewOwner new]; [[NSBundle mainBundle] loadNibNamed:@"RedView" owner:_redViewOwner options:nil]; _redView = _redViewOwner.redView; [self.view addSubview:_redView]; CGRect frame = _redView.frame; frame.origin.x = _greenView.frame.origin.x; frame.origin.y = _greenView.frame.origin.y + 80.0f; _redView.frame = frame; }
-
-
Swift
-
RedView.xib
同 Objective-C 设置
-
RedViewOwner.swift
@IBOutlet var redView: UIView!
-
MainViewController.swift
var redViewOwner:RedViewOwner! var redView:UIView! func loadRedViewFromXIB() { // RedView.xib 的 File's Owner 是 RedViewOwner 类的实例,并建立了一个从该 xib 的 View 到 RedViewOwner 实例的 IBOutlet。 // 只要通过 _redViewOwner 主动调用 Load XIB 的方法,该 IBOutlet 指向的视图就会被初始化 redViewOwner = RedViewOwner() NSBundle.mainBundle().loadNibNamed("RedView", owner: redViewOwner, options: nil) redView = redViewOwner.redView self.view.addSubview(redView) var frame = redView.frame frame.origin.x = greenView.frame.origin.x frame.origin.y = greenView.frame.origin.y + 80.0 redView.frame = frame }
-
-
结论:
- File’s Owner 类可以封装视图中的各种逻辑,而不仅仅是提供视图内容。
- 只要通过 File’s Owner 类主动调用 loadNibNamed:owner:options: 方法,该 IBOutlet 指向的视图就会被初始化。
1.4 加载 xib 中文件名和视图类名一致的视图(File’s Owner 为 nil)
-
Objective-C
-
YellowView.xib
File’s Owner 为 nil
-
YellowView.h
// Convenience Method + (instancetype)viewFromNIB;
-
YellowView.m
+ (instancetype)viewFromNIB { // 加载 xib 中的视图,其中 xib 文件名和本类类名必须一致 // 这个 xib 文件的 File's Owner 必须为空 // 这个 xib 文件必须只拥有一个视图,并且该视图的 class 为本类 NSArray *views = [[NSBundle mainBundle] loadNibNamed:NSStringFromClass([self class]) owner:nil options:nil]; return views[0]; } - (void)awakeFromNib { // self 就是 xib 文件中的 View self.backgroundColor = [UIColor yellowColor]; }
-
MainViewController.m
@property (strong, nonatomic) YellowView *yellowView; - (void)loadYellowViewFromXIB { // 说明见 YellowView.m 的 viewFromNIB 方法 _yellowView = [YellowView viewFromNIB]; [self.view addSubview:_yellowView]; CGRect frame = _yellowView.frame; frame.origin.x = _redView.frame.origin.x; frame.origin.y = _redView.frame.origin.y + 80.0f; _yellowView.frame = frame; }
-
-
Swift
-
YellowView.xib
同 Objective-C 设置
-
YellowView.swift
class func viewFromNIB() -> AnyObject { // 加载 xib 中的视图,其中 xib 文件名和本类类名必须一致 // 这个 xib 文件的 File's Owner 必须为空 // 这个 xib 文件必须只拥有一个视图,并且该视图的 class 为本类 let views = NSBundle.mainBundle().loadNibNamed("YellowView", owner: nil, options: nil) return views[0] } override func awakeFromNib() { // self 就是 xib 文件中的 View self.backgroundColor = UIColor.yellowColor() }
-
MainViewController.swift
var yellowView:YellowView! func loadYellowViewFromXIB() { // 说明见 YellowView.m 的 viewFromNIB 方法 yellowView = YellowView.viewFromNIB() as! YellowView self.view.addSubview(yellowView) var frame = yellowView.frame frame.origin.x = redView.frame.origin.x frame.origin.y = redView.frame.origin.y + 80.0 yellowView.frame = frame }
-
-
结论:
- 这里的 viewFromNib 方法只是对 loadNibNamed:owner:options: 方法的一个简单封装,要求的条件包括:
- xib 文件名和本类类名必须一致。
- 这个 xib 文件的 File’s Owner 必须为空。
- 这个 xib 文件必须只拥有一个视图,并且该视图的 class 为本类。
- 这里的 viewFromNib 方法只是对 loadNibNamed:owner:options: 方法的一个简单封装,要求的条件包括:
1.5 通过 UIViewController 的 initWithNibName:bundle: 方法加载 xib 文件中的视图
-
Objective-C
-
BlackViewController.xib
- 如果 BlackViewController 类希望 self.view 就是 xib 文件中的 View,可以在 Connections 页中建立 view -> File’s Owner 的 Outlet。由 File’s Owner 右键拖动到 view 上。
-
BlackViewController.h
// Conveniece Method + (instancetype)viewControllerFromNIB;
-
BlackViewController.m
+ (instancetype)viewControllerFromNIB { return [[BlackViewController alloc] initWithNibName:NSStringFromClass([self class]) bundle:[NSBundle mainBundle]]; } - (void)viewDidLoad { [super viewDidLoad]; // self.view 就是 xib 文件中的 View self.view.backgroundColor = [UIColor blackColor]; }
-
MainViewController.m
@property (strong, nonatomic) BlackViewController *blackViewController; @property (strong, nonatomic) UIView *blackView; - (void)loadBlackViewFromXIB { _blackViewController = [[BlackViewController alloc] initWithNibName:@"BlackViewController" bundle:[NSBundle mainBundle]]; // 或使用 Conveniece Method,但要求 xib 文件名和 View Controller 类名一致 _blackViewController = [BlackViewController viewControllerFromNIB]; _blackView = _blackViewController.view; [self.view addSubview:_blackView]; CGRect frame = _blackView.frame; frame.origin.x = _yellowView.frame.origin.x; frame.origin.y = _yellowView.frame.origin.y + 80.0f; _blackView.frame = frame; }
-
-
Swift
-
BlackViewController.xib
同 Objective-C 设置
-
BlackViewController.swift
class func viewControllerFromNIB() -> AnyObject { return BlackViewController(nibName: "BlackViewController", bundle: NSBundle.mainBundle()) } override func viewDidLoad() { super.viewDidLoad() self.view.backgroundColor = UIColor.blackColor() }
-
MainViewController.swift
var blackViewController:BlackViewController! var blackView:UIView! func loadBlackViewFromXIB() { blackViewController = BlackViewController(nibName: "BlackViewController", bundle: NSBundle.mainBundle()) // 或使用 Conveniece Method,但要求 xib 文件名和 View Controller 类名一致 blackViewController = BlackViewController.viewControllerFromNIB() as! BlackViewController blackView = blackViewController.view; self.view.addSubview(blackView) var frame = blackView.frame frame.origin.x = yellowView.frame.origin.x frame.origin.y = yellowView.frame.origin.y + 80.0 blackView.frame = frame }
-
-
结论:
-
将 xib 的 File’s Owner 设成一个 UIViewController 子类,可以将这个 xib 文件的视图展示和外部响应事件(例如点击一个按钮触发的点击事件,该视图的手势事件等)全部封装在一个 View Controller 中,如果把按钮的点击事件封装在一个 UIView 类中,貌似破坏了 MVC 模式,因此最好将 xib 的 File’s Owner 设成一个 UIViewController 子类,该类可以通过 addChildViewController 方法将其添加到现有的 View Controller 上。如果只是希望加载视图,可以通过 viewcontroller.view 存取。
-
如果希望 ViewControllerA 加载并响应 aXIBView 中的按钮点击事件,这时必须建立一个 aXIBView 到 ViewControllerA 的 IBAction,如果 ViewControllerA 需要拥有多个这样的 XIB,那么 ViewControllerA 会变得非常的庞大,此时可以通过为每一个 XIB 设置一个 ViewController,再让 ViewControllerA 加载这些 Child View Controllers,这样可以将这些事件的响应职责和视图的描绘工作分派给专门的 Child View Controller,在减小 ViewControllerA 体积的同时,也可以提高各个 xib 的可复用性。
-
这里的 viewControllerFromNIB 方法其实就是 initWithNibName:bundle: 方法的一个简单封装,要求:xib 的 File’s Owner 设为本类。
-
1.6 通过 UIViewController + NIB 加载 xib 文件中的 View Controller 类和其视图
-
Objective-C
-
GrayViewController.xib
-
UIViewController+NIB.h
@interface UIViewController (NIB) // 要求 xib 文件名和 View Controller 类名一致 + (instancetype)loadFromNib; @end
-
UIViewController+NIB.m
@implementation UIViewController (NIB) + (instancetype)loadFromNib { // [self class] 会由调用的类决定 return [[[self class] alloc] initWithNibName:NSStringFromClass([self class]) bundle:[NSBundle mainBundle]]; } @end
-
GrayViewController.h
@property (weak, nonatomic) IBOutlet UIButton *actionButton;
-
GrayViewController.m
- (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor grayColor]; } // 推荐从 xib 文件中加载 View Controller 的方法,这种方法可以将 xib 文件中的视图和其按钮响应事件全部封装在 GrayViewController // 如果 GrayViewController 的按钮响应事件由 MainViewController 作出响应,那么二者的耦合度就过高 // 建议: // 单纯的通用 View 展示,使用从 xib 文件加载视图的方法,File's Owner 设为 nil // 特定拥有者的 View 展示,从 xib 文件加载视图时,File's Owner 设为拥有者 // 如果视图中有按钮响应事件,或其它可以和用户交互的事件,建议采用从 xib 文件中加载 View Controller 的方法,这样可以封装 UI 展示和交互事件 - (IBAction)action:(UIButton *)sender { NSLog(@"action"); }
-
MainViewController.m
@property (strong, nonatomic) GrayViewController *grayViewController; @property (strong, nonatomic) UIView *grayView; - (void)loadGrayViewFromXIB { _grayViewController = [GrayViewController loadFromNib]; _grayView = _grayViewController.view; [self.view addSubview:_grayView]; CGRect frame = _grayView.frame; frame.origin.x = _blackView.frame.origin.x; frame.origin.y = _blackView.frame.origin.y + 80.0f; _grayView.frame = frame; }
-
-
结论:
- 这里我专门写了一个 UIViewController+NIB 的 category,只需要调用 loadFromNib 类方法就可以加载 xib 中的视图。要求:
- xib 文件的 File’s Owner 必须设置为对应的 View Controller 类。
- 这里我专门写了一个 UIViewController+NIB 的 category,只需要调用 loadFromNib 类方法就可以加载 xib 中的视图。要求: