xib使用-part4_xib中使用自定义的xib视图

本节是第三节的一个延续，建议阅读之前先看一下：XIB使用-Part3 使用XIB自定义视图第三节中使用xib自定义的HeaderView，并且在RootViewController的viewDidLoad方法中创建了HeaderView的对象展示在页面上。这一节将进一步介绍，不用代码创建HeaderView的对象，而是在RootViewController.xib文件中直接使用拖拽的方式创建HeaderView的对象。

本节demo地址：https://github.com/huibaoer/Demo_xib

1.首先在第三节的基础上，将RootViewController的viewDidLoad中的代码做简单修改，将标题设置为“headerView1”，描述设置为“headerView1 from code”，说明headerView1是从代码创建的。

// 1. create headerView1
HeaderView *headerView1 = [[HeaderView alloc] initWithFrame:CGRectMake(0, 100, 320, 100)];
headerView1.titleLabel.text = @"headerView1";
headerView1.descriptionLabel.text = @"headerView1 from code";
[self.view addSubview:headerView1];

运行后效果如下：

xib_demo_04_1

2.打开RootViewController.xib文件，拖拽一个View控件到默认的view上，调整控件的大小为320*100，调整位置居中偏下，保证与headerView1不重叠。选中新添加的view，选择右侧第三个选项卡，设置Class为‘HeaderView’，这样保证新添加的view是HeaderView的一个实例。

xib_demo_04_2

3.将设置好的headerView连接到RootViewController中，打开xib文件，选择‘Assistant Editor’（Xcode右上方两个圈的按钮），进入助手编辑模式，确保左侧打开的是RootViewController.xib，右侧打开的是RootViewController.m。选中xib中headerView，打开右侧最后一个选项卡（连接选项卡），拖拽New Referencing outlet到RootViewController的延展中生成属性，并命名为‘headerView2’。

xib_demo_04_3.png

4.看起来已经完成，但是运行后会发现headerView2并没有创建成功，在HeaderView的initWithFrame方法中打断点会发现init方法并没有执行。这是因为从xib中创建的实例并不会通过initWithFrame初始化，而是通过另一个初始化方法initWithCoder来初始化。所以实现HeaderView的initWithCoder方法如下：

- (id)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self setupXib];
    }
    return self;
}
 
- (void)setupXib {
    [[NSBundle mainBundle] loadNibNamed:@"HeaderView" owner:self options:nil];
    [self addSubview:self.contentView];
}

5.在RootViewController的viewDidLoad方法中添加如下代码，设置headerView2的标题和描述。

// 2. config headerView2
self.headerView2.titleLabel.text = @"headerView2";
self.headerView2.descriptionLabel.text = @"headerView2 from XIB";

运行结果如下：

xib_demo_04_4