前面几节介绍了使用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的各个子控件添加约束。
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已经布局正常。
4.打开RootViewController.xib,为headerView2添加约束。
运行工程,headerView2也布局正常。