IOS开发之自动布局相关问题

有疑问的请加qq交流群：390438081

我的QQ：604886384（注明来意）

微信：niuting823

分为3种：

注意:

如果使用autolayout来约束控件, 那fraem就失效了, 官方也不建议我们再设置frame了

1。 代码布局    ：功能强大  繁琐

 2。AutoResizing：功能有限  使用 简单

 3。Auto Layout：简单 易用

1.代码布局

1.使用代码为控件添加约束

1）什么时候用？

当子视图对象使用代码创建时，需要为子视图布局则只能使用代码完成

1.1 是控制器针对自带视图的直接子视图的布局

重写控制器的viewWillLayoutSubViews方法

1.2 布局时对状态栏和各种Bar的处理

使用属性：topLayoutGuide.length  //屏幕上方当前被占据的区域的高度

bottomLayoutGuide.length//屏幕下方被各种bar占据的高度

-  (void)viewWillLayoutSubviews{

    [super viewWillLayoutSubviews];

    CGRect frame = self.button.frame;

    frame.origin.x = self.view.bounds.size.width - 20 - frame.size.width;

    frame.origin.y = self.topLayoutGuide.length+20;

    self.button.frame = frame;

    

    frame = self.label.frame;

    frame.origin.x = self.view.bounds.size.width-20-frame.size.width;

    frame.origin.y = self.view.bounds.size.height-20-frame.size.height - self.bottomLayoutGuide.length;

    self.label.frame =frame;

}

2.Auto  Resizing

2.1 是什么？

是旧版本的（iOS5之前）的自动布局计数，操作简单，API简单，有局限性，很久以前叫  struts/spring（结构/弹簧）计数

核心理念：当界面大小发生变化时，根据变化的比例，对子视图进行同比例的变换

2.2 使用方式

step1：关闭自动布局

step2：选中要布局的控件，到第五个检查器，根据需要点亮6根红线中的某几个

外边的4根红线：代表视图与父视图之间的距离是否固定

内部的2根红线：代表视图自身大小是否可伸缩

2.3 使用特点

可以结合手写代码布局完成 Auto Resizing不能实现的功能

2.4 编写代码实现Auto Resizing

设置控件的 autoResizingMask属性即可

代码设置时，规则的描述与检查器中描述相反，如，在检查器中设置按钮的左、上为红线固定时，代码中就要变成描述该按钮的右、下为弹簧式可调节

3.Auto Layout 自动布局

3.1 是什么

是从iOS6开始的一个新的布局计数，功能强大，操作较复杂，从xcode5开始，慢慢好用，在xcode6中功能更强大了

3.2 工作原理

1）是通过一系列的“约束 Constraint”来对控件的布局进行描述，由系统根据约束 来计算 frame  从而完成自动的过程

2）什么是约束？一个条件

3）如何使用约束呢？

可以创建很多的约束对象，用于对一个视图进行位置、大小的描述。可以借助于storyboard来完成约束的添加，也可以使用代码来添加约束

4）如何创建约束？

方式一：storyboard

3.3 添加约束的原则

1）描述清楚（如果不清楚，约束变橙色）

2）互不冲突（如何冲突，会显示红色）

如何满足以上两个原则，则线条变成蓝色

方式二：代码创建

 代码实现Autolayout的步骤

 利⽤用NSLayoutConstraint类创建具体的约束对象
 添加约束对象到相应的view上
- (void)addConstraint:(NSLayoutConstraint *)constraint;
- (void)addConstraints:(NSArray *)constraints;
 代码实现Autolayout的注意点
 要先禁⽌止autoresizing功能,设置view的下⾯面属性为NO
view.translatesAutoresizingMaskIntoConstraints = NO;
添加约束之前,⼀一定要保证相关控件都已经在各⾃自的⽗父控件上
 不⽤用再给view设置frame 

1）创建约束对象？

方法一：使用万能公式

view1.attr1<relation> view2.attr2*multiplier + contant

例：

文字描述：按钮的左边距离容器20个点

公式：button.left=self.view.left*0+20

文字描述：按钮的右边距离容器20个点

公式：button.right=self.view.width*1+(-20)

规律：

1）保证7个参数都写齐

2）7个参数构成等式成立

注意：使用7个参数的工厂方法构建约束时，每次只能创建一个约束对象

 

    //1.button1距离左边20个点

    //button1.left=self.view.left*0+20

    NSLayoutConstraint *c1 = [NSLayoutConstraint constraintWithItem:button1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:0 constant:20];

    [self.view  addConstraint:c1];

    

    //2.button1距离上边20个点

    NSLayoutConstraint *c2 = [NSLayoutConstraint constraintWithItem:button1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:0 constant:20];

    [self.view addConstraint:c2];

    

    //3.button1和button2等宽

    //button1.width=button2.width*1+0

    NSLayoutConstraint *c3 = [NSLayoutConstraint constraintWithItem:button1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:button2 attribute:NSLayoutAttributeWidth multiplier:1 constant:0];

    [self.view addConstraint:c3];

    

    //4.button1的高为40

    NSLayoutConstraint *c4 = [NSLayoutConstraint constraintWithItem:button1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:40];

    [self.view addConstraint:c4];

    

    //5. button2与button1相距10个点

    //button2.leading=button1.right*1+10

    NSLayoutConstraint *c5 = [NSLayoutConstraint constraintWithItem:button2 attribute:NSLayoutAttributeLeading relatedBy:NSLayoutRelationEqual toItem:button1 attribute:NSLayoutAttributeRight multiplier:1 constant:10];

    [self.view addConstraint:c5];

    

    //6.b2与b1的上边缘相等

    NSLayoutConstraint *c6 = [NSLayoutConstraint constraintWithItem:button2 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:button1 attribute:NSLayoutAttributeTop multiplier:1 constant:0];

    [self.view addConstraint:c6];

    

    //7.b2与屏幕右侧距离20个点

    NSLayoutConstraint *c7 = [NSLayoutConstraint constraintWithItem:button2 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];

    [self.view addConstraint:c7];

    

    //8.设定b2的高

    NSLayoutConstraint *c8 = [NSLayoutConstraint constraintWithItem:button2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:button1 attribute:NSLayoutAttributeHeight multiplier:1 constant:0];

    [self.view addConstraint:c8];

 一定要有下面的三个方法（我习惯都写）

    //关闭视图自身的翻译

    button1.translatesAutoresizingMaskIntoConstraints = NO;

    button2.translatesAutoresizingMaskIntoConstraints  = NO;

    self.view.translatesAutoresizingMaskIntoConstraints  = NO;

方法二：使用VFL表达式(Visual Format Language)

后有代码

1）是什么？

是一种特殊的字符串，具有一定的格式，代表一些约束的含义

2）如何编写VFL字符串？

| 代表父视图的边儿

H:|    代表的是左边

V:|    代表的是父视图的上边缘

[ ]       代表一个子视图

( )      代表一个条件（== >=  <=）==可以省略

-        代表一个标准间距  是 8 

-xx-    代表间距是多少

例：

文字描述：button1 button2  button3水平排布，button1距离左边距20个点，button3距离右边距20个点，按钮之间间距10个点

VFL：|-20-[button1]-10-[button2]-10-[button3]-20-|

文字描述：button1 button2  button3等宽

|-20-[button1]-10-[button2(button1)]-10-[button3(button1)]-20-|

文字描述：button1距离顶端为20

V:|-20-[button1]

3)VFL的优势

一个字符串可以描述多个约束，所以在创建约束及添加约束时，能够实现批量操作

注意：有些时候为了描述所有得约束，需要多个VFL配合完成

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views

参数：

第一个参数：VFL 表达式

第二个参数：布局时的对齐方式

第三个参数：Metrics

用于指定VFL字符串中可替换的值，是字典类型，当修改字典中得对照关系时，就可以统一修改vfl中得所有该符号对应的数值大小

第四个参数：views

用于提供vfl中，子视图与实际对象引用的对应关系，可以借助于 NSDictionaryOfVariableBindings方法生成