级别: ★★☆☆☆
标签:「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中查看。
小编微信:可加并拉入《QiShare技术交流群》。
关注我们的途径有:
QiShare(简书)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公众号)
推荐文章:
iOS UIButton根据内容自动布局
iOS 指定初始化方法
UIView中的hitTest方法
奇舞周刊
网友评论