xib使用-part5_xib自定义视图的自动布局

前面几节介绍了使用xib自定义视图的一些情况，但上面的例子都是运行在iphone5模拟器上，细心的小伙伴会发现，如果使用iphone6模拟器运行，视图的布局就会出现问题。本节将会在上一节（XIB使用-Part4 XIB中使用自定义的XIB视图）的基础上添加自动布局。

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

首先分析一下我们自定义视图HeaderView的结构，HeaderView继承于UIView，所以其本身是一个view；HeaderView拥有一个xib文件HeaderView.xib，当HeaderView初始化时，会从xib文件中获得一个contentView作为HeaderView的一个属性，最后HeaderView将contentView贴附在自己上。而最终展现在我们面前的，也是我们希望展现在我们面前的其实是HeaderView的contentView，但是我们外面设置的是HeaderView的frame，所以我们要做的就是HeaderView的frame变化时，contentView跟着变化，只要保证contentView一直铺满HeaderView就行了。至于contentView内部各个控件的布局，由contentView自己添加约束；而HeaderView在其父视图中的布局，由其父视图添加约束管理。

1.打开HeaderView.xib，为HeaderView的contentView的各个子控件添加约束。

xib_demo_05_1

2.确保contentView铺满HeaderView，打开HeaderView.m，重写HeaderView的layoutSubviews方法，该方法提供了修改子视图布局的机会。代码如下：

- (void)layoutSubviews {
    [super layoutSubviews];
    self.contentView.frame = self.bounds;
}

3.修改RootViewController的viewDidLoad方法中的headerView1的frame，确保headerView1铺满屏幕。代码如下：

// 1. create headerView
HeaderView *headerView = [[HeaderView alloc] initWithFrame:CGRectMake(0, 100, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.width*(100/320.0))];
headerView.titleLabel.text = @"HeaderView1";
headerView.descriptionLabel.text = @"headerView from code";
[self.view addSubview:headerView];

在iphone6模拟器上运行工程，headerView1已经布局正常。

xib_demo_05_2

4.打开RootViewController.xib，为headerView2添加约束。

xib_demo_05_3

运行工程，headerView2也布局正常。

xib_demo_05_4