级别： ★☆☆☆☆
标签：「iOS布局」「iOS frame」「iOS frame bounds」
作者： Xs·H
审校： QiShare团队
在 沐灵洛 线下分享iOS UIButton根据内容自动布局时，有和前端同学讨论到iOS的常用布局方式。讨论过程十分热闹，不容易记录，但作者认为讨论结果有必要记录一下，希望能帮助到一些同学。
作者将iOS常用布局方式归纳为Frame、Autoresizing、Constraint、StackView和Masonry五种，并将逐一介绍。
本篇文章介绍Frame。
frame是UIView的属性，用来描述UIView及其子类所表示的视图的位置（origin）和大小（size）。frame是iOS布局中最基本、最常用和最容易被开发者接受的布局方式。一般来说，可以通过以下方式很方便地创建并显示一个视图，如下。
- (void)viewDidLoad {
[super viewDidLoad];
_contentView = [[QiFrameContentView alloc] initWithFrame:self.view.bounds];
_contentView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:_contentView];
}
在上述代码中，作者在viewDidLoad中，将一个浅灰色的contentView添加到了self.view上，并将其frame设置为了self.view.bounds。显然，作者希望浅灰色的contentView完全盖住self.view（默认白色）。使用模拟器运行一下，初始效果如作者所愿，但将模拟器旋转方向后，浅灰色的contentView没有一起旋转，在右侧漏出了一部分白色的self.view，如下。
上述现象其实是frame特性的一种表现。在仅使用frame来布局视图时，视图的位置和大小是被唯一确定了的，不会跟随父视图的变化而变化，除非在某个时间点再次设置了frame。
作者希望contentView可以跟着self.view一起旋转，始终保持完全覆盖的效果，于是做了如下修改。
- (void)viewDidLoad {
[super viewDidLoad];
_contentView = [[QiFrameContentView alloc] initWithFrame:CGRectZero];
_contentView.backgroundColor = [UIColor lightGrayColor];
[self.view addSubview:_contentView];
}
- (void)viewWillLayoutSubviews {
[super viewWillLayoutSubviews];
_contentView.frame = self.view.bounds;
}
为实现想要的小伙，作者在viewWillLayoutSubviews方法中重新设置了contentView的frame，并将viewDidLoad中初始化contentView时设置的frame改为了CGRectZero。因为在每一次self.view的frame变化后和self.view的子view发生变化前都会触发viewWillLayoutSubviews方法。
借鉴上面的原理，作者在contentView上添加4个subView，实现4等分的效果，如下图。
实现上图效果的代码如下：
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
_subView1 = [[UIView alloc] initWithFrame:CGRectZero];
_subView1.backgroundColor = [[UIColor redColor] colorWithAlphaComponent:.6];
[self addSubview:_subView1];
_subView2 = [[UIView alloc] initWithFrame:CGRectZero];
_subView2.backgroundColor = [[UIColor greenColor] colorWithAlphaComponent:.6];
[self addSubview:_subView2];
_subView3 = [[UIView alloc] initWithFrame:CGRectZero];
_subView3.backgroundColor = [[UIColor blueColor] colorWithAlphaComponent:.6];
[self addSubview:_subView3];
_subView4 = [[UIView alloc] initWithFrame:CGRectZero];
_subView4.backgroundColor = [[UIColor yellowColor] colorWithAlphaComponent:.6];
[self addSubview:_subView4];
}
return self;
}
- (void)layoutSubviews {
[super layoutSubviews];
CGFloat margin = 20.0;
CGFloat padding = 20.0;
CGFloat width = (self.bounds.size.width - margin * 2 - padding) / 2;
CGFloat height = (self.bounds.size.height - margin * 2 - padding) / 2;
_subView1.frame = CGRectMake(margin, margin, width, height);
_subView2.frame = CGRectMake(margin + width + padding, margin, width, height);
_subView3.frame = CGRectMake(margin, margin + height + padding, width, height);
_subView4.frame = CGRectMake(margin + width + padding, margin + height + padding, width, height);
/*
_subView4.qi_width = width;
_subView4.qi_height = height;
_subView4.qi_top = _subView3.qi_top;
_subView4.qi_left = _subView3.qi_right + padding;
*/
}
其中，通过打点可知contentView中的layoutSubviews方法与viewController中的viewWillLayoutSubviews方法成对触发，并且layoutSubviews晚于后者。
PS：bounds与frame有一定区别。
bounds只用来描述视图的尺寸，就像一页A4纸，不论把它放在桌子上还是地板上，它的bounds都不发生变化。
frame除了能够描述视图的尺寸外还能描述视图的位置。再如A4纸，从桌子上挪到地板上，它的frame就发生变化了。
另外，为了更方便、直观地使用frame布局视图，可以使用类似上面代码中注释的代码形式。具体的实现细节，可以在QiLayoutDemo中查看。
