XCOde 5 的界面布局一些新特性

 

1.问题

•在iOS程序中，大部分视图控制器都包含了大量的代码用于设置UI布局，设置控件的水平或垂直位置，以确保组件在不同版本的iOS中都能得到合理的布局

•甚至有些程序员希望在不同的设备使用相同的视图控制器，这就给代码添加了更多的复杂性！

•

•自动布局AutoLayout的引入很好地解决了这一问题！

2.测试演练1——使用AutoSizing

•在Main.sotryboard的正中间中添加一个按钮，并使用AutoSizing尝试调整按钮位置

•

•经过运行测试不难发现，不仅在不同分辨率的设备上运行效果不同，而且在不同的版本上运行的表现也不一致

3.定义

•AutoLayout是一种基于约束的，描述性的布局系统

–基于约束：和以往定义frame的位置和尺寸不同，AutoLayout的位置确定是以所谓相对位置的约束来定义的，比如x坐标为superView的中心，y坐标为屏幕底部上方10像素等

–描述性：约束的定义和各个view的关系使用接近自然语言或者可视化语言的方法来进行描述

–布局系统：用来负责界面的各个元素的位置

•

•AutoLayout为开发者提供了一种不同于传统对于UI元素位置指定的布局方法。以前，不论是在IB里拖放，还是在代码中写，每个UIView都会有自己的frame属性，来定义其在当前视图中的位置和尺寸。而使用AutoLayout，就变为了使用约束条件来定义view的位置和尺寸

4.AutoLayout的优势

•解决不同分辨率和屏幕尺寸下view的适配问题，同时也简化了旋转时view的位置的定义。原来在底部之上10像素居中的view，不论在旋转屏幕或是更换设备（iPad、iPad mini、iPhone 4或者是iPhone5）的时候，始终还在底部之上10像素居中的位置，不会发生变化

•

•使用约束条件来描述布局，view的frame会依据这些约束来进行计算

5.测试演练2——在Storyboard中使用自动布局

•在Storyboard中为一个屏幕居中的按钮添加水平居中和垂直居中的布局约束

•

•经过运行测试不难发现，添加了自动布局之后，在不同分辨率的设备以及不同的版本的设备上运行时该按钮始终会保持在屏幕中间

6.测试演练3——在Storyboard中使用自动布局

•以前一演练为基础，分别在垂直方向上，上下各放置间距20点的两个按钮

•

•经过运行测试不难发现，在不同分辨率的设备以及不同的版本的设备上运行时该按钮始终会保持在屏幕中间，而且无需编写任何的代码！

6.AutoLayout和Autoresizing Mask的区别

•在iOS6之前，关于屏幕旋转的适配和iPhone，iPad屏幕的自动适配，基本都是由Autoresizing Mask来完成的。但是随着大家对iOS App的要求越来越高，以及今后可能出现的多种屏幕和分辨率的设备，Autoresizing Mask显得有些落伍和迟钝了。AutoLayout可以完成所有原来Autoresizing Mask能完成的工作，同时还能胜任一些原来无法完成的任务，其中包括：

•

•AutoLayout可以指定任意两个view的相对位置，而不需要像Autoresizing Mask那样需要两个view在直系的view hierarchy中

•AutoLayout不必须指定相等关系的约束，它可以指定非相等约束（大于或者小于等）；而Autoresizing Mask所能做的布局只能是相等条件的

•AutoLayout可以指定约束的优先级，计算frame时将优先按照满足优先级高的条件进行计算

 

 

下面在界面创建两个按钮

 // 创建两个按钮

UIButton *btn1 = [UIButton buttonWithType:UIButtonTypeRoundedRect];

    [btn1 setFrame:CGRectMake(200, 210, 100, 40)];

    [btn1 setTitle:@"点击" forState:UIControlStateNormal];

    [self.view addSubview:btn1];

    [btn1 setTranslatesAutoresizingMaskIntoConstraints:NO];

    

    UIButton *btn2 = [UIButton buttonWithType:UIButtonTypeRoundedRect];

    [btn2 setFrame:CGRectMake(200, 260, 100, 40)];

    [btn2 setTitle:@"按钮" forState:UIControlStateNormal];

    [self.view addSubview:btn2];

    [btn2 setTranslatesAutoresizingMaskIntoConstraints:NO];

    // 使用 VFL控制按钮位置

    // 参数

    // 1.可视化格式语言字符串

    // 2.格式选择

    // 3.所有参加格式化布局数据的字典，串nil也可以的

    //4.所有参加格式化布局的对象字典

    // 返回值：根据VFL生成的一组约束

    NSDictionary *dict = NSDictionaryOfVariableBindings(btn1,btn2);

    // @"H:[btn1]-50-|" [btn1]左右如果有|-50-或者-50-|说明它是在btn1左右个间距50是个点得距离

    NSArray *arrayH1 = [NSLayoutConstraintconstraintsWithVisualFormat:@"H:[btn1]-50-|" options:0 metrics:nil views:dict];

    [self.view addConstraints:arrayH1];

    NSArray *arrayH2 = [NSLayoutConstraintconstraintsWithVisualFormat:@"H:[btn2]-50-|" options:0 metrics:nil views:dict];

    [self.view addConstraints:arrayH2];

    

//    [self.view addConstraints:arrayH1];

//    [self.view addConstraints:arrayH2];

    // 垂直方向的间距

    NSArray *arrayV = [NSLayoutConstraintconstraintsWithVisualFormat:@"V:|-60-[btn1(20)]-20-[btn2]" options:0metrics:nil views:dict];

    [self.view addConstraints:arrayV];