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]; //手动设置 AutoResizing 这里和故事版中点亮红线的方向是反 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]; //关闭系统 Autoresizing myView1.translatesAutoresizingMaskIntoConstraints = NO; myView2.translatesAutoresizingMaskIntoConstraints = NO; /**创建左边view的约束对象**/ //左边距离屏幕左边 20 NSLayoutConstraint *c1 = [NSLayoutConstraint constraintWithItem:myView1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20]; //上边距离屏幕顶部 20 NSLayoutConstraint *c2 = [NSLayoutConstraint constraintWithItem:myView1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20]; //myView1的宽度 等于 myView2的宽度 NSLayoutConstraint *c3 = [NSLayoutConstraint constraintWithItem:myView1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:myView2 attribute:NSLayoutAttributeWidth multiplier:1 constant:0]; //高度为 40 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]; /**myView2 约束**/ //顶部 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]; //关闭 autoresizing 自动翻译约束的 功能 view1.translatesAutoresizingMaskIntoConstraints = NO; view2.translatesAutoresizingMaskIntoConstraints = NO; //VFL表达式 //1.准备一个 VFL 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}; //该宏会创建 一个字典， 该字典的value就是传入的对象， 该字典会自动使用传入的对象的名称 作为key 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]; // NSArray<NSLayoutConstraint*> *constraints = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:nil views:@{@"view1":view1, @"view2":view2}]; // NSArray<NSLayoutConstraint*> *constraints2 = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatAlignAllTop metrics:nil views:@{@"view1":view1}]; [self.view addConstraints:constraints]; [self.view addConstraints:constraints2]; }