iOS 常用布局方式之Frame

级别： ★☆☆☆☆
标签：「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中查看。

---

了解更多iOS及相关新技术，请关注我们的公众号：

小编微信：可加并拉入《QiShare技术交流群》。

关注我们的途径有：
QiShare()
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)

推荐文章：
iOS UIButton根据内容自动布局
iOS 指定初始化方法
UIView中的hitTest方法
奇舞周刊