Storyboard的使用（二）

这篇主要讲的是Xib的使用。

简单的说，Xib就是对应于界面上一个一个小小的界面。每一个界面都可以对应一个Xib的视图。

主要作用和Storyboard一样，都是为了减少繁琐的界面工作。

虽然Xib和Storyboard的概念以及使用场景不同，但是作为User Interface的一部分，两者的使用在我看来还是有很多联系的。

Xib和Storyboard用于快速开发效果还是很不错的。

废话不多说，先看结构。

1）一个视图的Xib

2）多个视图的Xib

3）Xib与文件的关联

4）总结

1、一个视图的Xib

新建一个SingleView的工程Storyboard2，在工程中新建一个Xib文件。创建的时候，选择新建窗口中的User Interface里的View选项。

命名为View1。

在生成的View1.xib文件中可以看到一个View的界面，往View中添加控件。

是不是感觉和Storyboard差不多？

然后找到ViewController.m文件，修改代码。

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    UIView *view1 = [[[NSBundle mainBundle] loadNibNamed:@"View1" owner:self options:nil] lastObject];
    [self.view addSubview:view1];
}

不难看懂吧？

也许你会好奇为什么需要使用lastObject，后面你就会明白了。

先运行代码，发现看到的和刚才做的这个界面完全一致。

到这里，你已经基本会创建和使用Xib文件了。

2、多个视图的Xib

用同样的方式创建View2.xib文件，在上面添加一个视图，添加控件。

当你添加一个视图的时候View可能无法改变大小，但是不要紧。

选择属性面板中的Size属性置为Freeform，View的边框上就出现了一些小控点。

拖拽这些控点，改变这个视图的大小。

你也许已经看到我这里把这个视图的标签定为View2-1。

没错，再新建一个View，命名为View2-2。

这个时候你也许也会发现，为什么前面要用lastObject了。

我们来看一下代码。

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    // 视图1
    UIView *view1 = [[[NSBundle mainBundle] loadNibNamed:@"View1" owner:self options:nil] lastObject];
    [self.view addSubview:view1];
    
    
    // 视图2-1
    UIView *view2_1 = [[[NSBundle mainBundle] loadNibNamed:@"View2" owner:self options:nil] objectAtIndex:0];
    [self.view addSubview:view2_1];
    
    
    // 视图2-2
    UIView *view2_2 = [[[NSBundle mainBundle] loadNibNamed:@"View2" owner:self options:nil] objectAtIndex:1];
    [self.view addSubview:view2_2];
    // 设置视图的frame
    CGRect viewFrame2_2 = view2_2.frame;
    viewFrame2_2.origin = CGPointMake(0, [UIScreen mainScreen].bounds.size.height - viewFrame2_2.size.height);
    [view2_2 setFrame:viewFrame2_2];

}

没错，一个Xib文件里的很多视图，事实上就是一个数组，你可以创建一个Xib文件的同时建立多个视图。

当然，建议你还是把属于相同模块的视图放到同一个Xib文件中，而把属于不用模块或者公用模块的视图分别写到不同的Xib文件中。

再跑一下项目，可以看到界面已经发生了变化。

因为我们对视图View2-2的位置做了改变，所以视图也有所不同。

3、Xib与文件的关联

为了便于讲解，让我们回到View1。

新建一个名为View1的UIView的Objective-C类。

选择Xib中View1的界面，将其class属性设置为View1。这样，两种就发生了关联。

将View1上控件关联到View1.h中。还接的Storyboard的使用（一）中的用法吗？

在弹出的菜单中写上这个UILabel的名称，那么他们就发生关联了。

再看看代码发生了哪些变化。

    // 视图1
    View1 *view1 = (View1*)[[[NSBundle mainBundle] loadNibNamed:@"View1" owner:self options:nil] lastObject];
    view1.viewLabel.text = @"Label 1";
    [self.view addSubview:view1];

很简单吧？

如果是按钮的话，也可以同样的方式添加关联，并在代码中为按钮绑定事件并实现事件的回调。

在这里，建议手动为按钮或其他控件绑定事件，因为Xib里的视图可能是给多个界面使用的，随意地拖拽绑定会使代码变得十分复杂。

4、总结

Xib的使用在很多地方都和Storyboard类似，毕竟大家都是User Interface。

使用Xib可以减少很多工作量，但是Xib不可以继承，所以，该手写代码的时候还是手写代码吧~