iOS - Xib

前言

• 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 为本类。

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 类。