1.布局 Layout
什么是布局
- 是指在一个视图中,如何摆放它的子视图 (设置子视图的位置和大小)
如何布局?
方法一: 纯代码布局 (古老的方法)
- 理念:当屏幕发生变化时,自动执行一段代码,在代码中根据新的屏幕大小重新计算各个视图的frame,从而达到重新定位的目的
- 特点:功能强大,非常繁琐
-(void)viewDidLayoutSubviews {
[super viewDidLayoutSubviews]
//纯代码布局
CGFloat viewWidth = (self.view.bounds.size.width - 50) / 2
CGRect frame = self.myView1.frame
frame.origin.x = 20
frame.origin.y = 20
frame.size.width = viewWidth
frame.size.height = 40
self.myView1.frame = frame
frame.origin.x += 10 + viewWidth
self.myView2.frame = frame
}
方法二: Auto Resizing 以前的一种自动布局技术
- 理念:根据屏幕的等比变化,同样等比调整视图的距离上下左右边缘的距离,或等比调整视图的大小
- 特点:简单易用
- (void)viewDidLoad {
[super viewDidLoad];
UIView *myView = [[UIView alloc]init];
myView.frame = CGRectMake(self.view.frame.size.width - 20 - 100, 20, 100, 40);
myView.backgroundColor = [UIColor redColor];
myView.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin;
[self.view addSubview:myView];
}
方法三:Auto Layout 最新的自动布局方法
- 理念:将视图所在的位置使用多个约束条件描述出来,当屏幕大小发生变化时,系统会自动根据设定的多个约束,由系统计算出 不违背所有条件的一个合适的frame
- 工作原理
- 通过一系列的“约束constraint”来描述视图的展示位置
- 什么是约束?代表一个条,只需要设定一些约束,则系统会根据这一堆约束,自动计算出符合约束的frame
- 如何创建约束?
- 约束的两个原则
- 1.描述清楚 (x, y, w, h 全部通过约束描述出来)
- 2.互不冲突
- 使用代码创建AutoLayout约束
- 如何实现:
step1:创建约束对象 NSLayoutConstraint
step2:将约束对象加入到视图的父试图中
- 创建一个约束对象
- 方式一 : 万能公式法
- view1.attr < relation> view2.attr *multiplier + constant
文字描述:按键1距离视图的左边为20个点
公式描述:button1.left = self.view.left * 1 + 20
文字描述:按键1的宽度是按键2宽度的一半
公式描述:button1.width = button2.width * 0.5 + 0
文字描述:按键1的右边和按键2的左边间隔10
公式描述:button1.right = button2.left * 1 + 10
- (void)viewDidLoad {
[super viewDidLoad];
UIView *myView1 = [[UIView alloc]init];
myView1.backgroundColor = [UIColor redColor];
UIView *myView2 = [[UIView alloc]init];
myView2.backgroundColor = [UIColor greenColor];
[self.view addSubview:myView1];
[self.view addSubview:myView2];
myView1.translatesAutoresizingMaskIntoConstraints = NO;
myView2.translatesAutoresizingMaskIntoConstraints = NO;
NSLayoutConstraint *c1 = [NSLayoutConstraint constraintWithItem:myView1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
NSLayoutConstraint *c2 = [NSLayoutConstraint constraintWithItem:myView1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
NSLayoutConstraint *c3 = [NSLayoutConstraint constraintWithItem:myView1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:myView2 attribute:NSLayoutAttributeWidth multiplier:1 constant:0];
NSLayoutConstraint *c4 = [NSLayoutConstraint constraintWithItem:myView1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:40];
[self.view addConstraint:c1];
[self.view addConstraint:c2];
[self.view addConstraint:c3];
[self.view addConstraint:c4];
NSLayoutConstraint *c5 = [NSLayoutConstraint constraintWithItem:myView2 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
NSLayoutConstraint *c6 = [NSLayoutConstraint constraintWithItem:myView2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:40];
NSLayoutConstraint *c7 = [NSLayoutConstraint constraintWithItem:myView2 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
NSLayoutConstraint *c8 = [NSLayoutConstraint constraintWithItem:myView2 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:myView1 attribute:NSLayoutAttributeRight multiplier:1 constant:10];
[self.view addConstraint:c5];
[self.view addConstraint:c6];
[self.view addConstraint:c7];
[self.view addConstraint:c8];
}
- 方法二: VFL 法 (Visual Format Language)
- 是什么?
- 一个字符串,具有一定的格式,不同的格式代表不同的约束,并且,一个字符串往往能一次性表达出多个约束
- 如何写VFL字符串?
- 文字:button1和button2之间的间距为30
- VFL:[button1]-30-[button]
- 文字:button1的宽度为50
- VFL:[button1(==50)] 或 [button1(50)]
- 文字:button1 距离 左边20,button2距离右边20, button1和button2间隔10, button1宽度和button2的宽度相等
- VFL: |-20-[button1(button2)]-10-[button2(button1)]-20-|
- 文字:button1 距离顶部 为20
- VFL: V:|-20-[button1]
- 文字:button1 和 button2 垂直方向间隔10
- VFL: V:[button1]-10-[button2]
- VFL 特殊符号的含义
| 代表父视图的边缘
H:| 代表父试图的左边缘
V:| 代表父试图的上边缘
[] 代表一个子视图
() 代表一个宽度或高度的条件
-x- 代表间距是 x
-代表标准间距 8
- (void)viewDidLoad {
[super viewDidLoad];
UIView *view1 = [[UIView alloc]init];
view1.backgroundColor = [UIColor redColor];
UIView *view2 = [[UIView alloc]init];
view2.backgroundColor = [UIColor greenColor];
[self.view addSubview:view1];
[self.view addSubview:view2];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view2.translatesAutoresizingMaskIntoConstraints = NO;
NSString *hVFL = @"H:|-left-[view1]-space-[view2(view1)]-right-|";
NSString *vVFL = @"V:|-top-[view1(40)]";
NSDictionary *metricsDic = @{
@"left":@20,
@"right":@20,
@"space":@10,
@"top":@20};
NSDictionary *dic = NSDictionaryOfVariableBindings(view1,view2);
NSArray<NSLayoutConstraint*> *constraints = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:metricsDic views:dic];
NSArray<NSLayoutConstraint*> *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatAlignAllTop metrics:metricsDic views:dic];
[self.view addConstraints:constraints];
[self.view addConstraints:constraints2];
}