入职有两三个月了吧,都是使用 Objective-C 纯代码(虽然有时候偷偷参杂一些 Swift 开源库)来编写公司APP,写布局的时候几乎都是要么在初始化的时候用 initWithFrame,要么就初始化完毕之后用 view.frame。虽然这种方法很直观,一眼就可以看出这个 view 的位置以及大小,但是坏处也是有的,比如说在计算的时候麻烦等等。
概述
使用 Objective-C 纯代码编写 AutoLayout,看 AutoLayout 的字面理解就是自动布局,听起来好像蛮屌的样子。说白了就是适配:适应、兼容各种不同的情况,包括不同版本的操作系统的适配(系统适配)和不同屏幕尺寸的适配(屏幕适配)。
在 Storyboard 中,AutoLayout 有以下 3 个常用面板:
- Align(对齐)
Align(对齐)
- Pin(相对)
Pin(相对)
- Resolve Auto Layout Issues(约束处理)
Resolve Auto Layout Issues(约束处理)
在 Storyboard 中实现 AutoLayout 我就不在本文讲解,因为讲了就是违背了不忘初心,方得始终的标题了。
Talk is cheap, show me the code
先说一下用代码实现 AutoLayout 步骤,别眨眼:
- 利用
NSLayoutConstraint
类创建具体的约束对象; - 添加约束对象到相应的 view 上,代码有这两种:
1 2 |
- (void)addConstraint:(NSLayoutConstraint *)constraint; - (void)addConstraints:(NSArray *)constraints; |
或许有人问了,原来才两个步骤就可以了,我刚刚裤子都脱了,你就给我看这个?!
话不多说,马上 show you the code !
先看看我们使用 frame 的方式是如何确定一个 view 的位置的:
1 2 3 4 5 6 7 |
- (void)viewDidLoad { [super viewDidLoad]; self.title = @"使用 frame 的方式"; UIView *purpleView = [[UIView alloc] initWithFrame:CGRectMake(100, 200, 150, 150)]; purpleView.backgroundColor = [UIColor purpleColor]; [self.view addSubview:purpleView]; } |
代码很简单,运行效果如下:
再来看看 AutoLayout 的实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
- (void)viewDidLoad { [super viewDidLoad]; self.title = @"使用 AutoLayout 的方式"; UIView *purpleView = [[UIView alloc] init]; purpleView.backgroundColor = [UIColor purpleColor]; // 禁止将 AutoresizingMask 转换为 Constraints purpleView.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview:purpleView]; // 添加 width 约束 NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:150]; [purpleView addConstraint:widthConstraint]; // 添加 height 约束 NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:150]; [purpleView addConstraint:heightConstraint]; // 添加 left 约束 NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:100]; [self.view addConstraint:leftConstraint]; // 添加 top 约束 NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:200]; [self.view addConstraint:topConstraint]; } |
看完这段代码,我收到了惊吓!我被这一大段代码吓到了,很多童鞋看到那么简单的布局需要写那么多代码,可能就被吓跑了。我只能说一句:先不要走,待我慢慢解释~
- 创建约束对象(NSLayoutConstraint)的常用方法
一个NSLayoutConstraint
对象就代表一个约束。
1 |
+ (id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constantn class="crayon-o">:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constantme,要么就初始化完毕之后用 view.frame。虽然这种方法很直观,一眼就可以看出这个 view 的位置以及大小,但是坏处也是有的,比如说在计算的时候麻烦等等。
概述使用 Objective-C 纯代码编写 AutoLayout,看 AutoLayout 的字面理解就是自动布局,听起来好像蛮屌的样子。说白了就是适配:适应、兼容各种不同的情况,包括不同版本的操作系统的适配(系统适配)和不同屏幕尺寸的适配(屏幕适配)。 在 Storyboard 中,AutoLayout 有以下 3 个常用面板:
在 Storyboard 中实现 AutoLayout 我就不在本文讲解,因为讲了就是违背了不忘初心,方得始终的标题了。 不忘初心,方得始终
Talk is cheap, show me the code先说一下用代码实现 AutoLayout 步骤,别眨眼:
或许有人问了,原来才两个步骤就可以了,我刚刚裤子都脱了,你就给我看这个?! 话不多说,马上 show you the code ! 先看看我们使用 frame 的方式是如何确定一个 view 的位置的:
代码很简单,运行效果如下: 运行效果
再来看看 AutoLayout 的实现:
看完这段代码,我收到了惊吓!我被这一大段代码吓到了,很多童鞋看到那么简单的布局需要写那么多代码,可能就被吓跑了。我只能说一句:先不要走,待我慢慢解释~
|