iOS,自动布局autoresizing和auto layout,VFL语言

1.使用autoresizing

2.使用autolayout

3.VFL语言(Visual Format Language:可视化格式语言)

使用autoresizing

点击xib文件，去掉使用autolayout（autolayout和autoresizing只能使用一个）

  

如图中所示

   1.代表视图距离父容器顶部距离固定

   2.代表视图距离父容器左边距离固定

   3.代表视图距离父容器底部距离固定

   4.代表视图距离父容器右边距离固定

   5.中间水平线表示视图随着父容器变宽而变宽(按比例)

   6.中间垂直线表示视图随着父容器变高而变高(按比例)

 

autoresizing的局限性就是只能表现父视图与子视图的关系，而无法表达兄弟视图之间的关系。在处理复杂布局上比较无力

 

使用autolayout

 autolayout的2个核心概念： 参照、约束

注意：

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

如果利用autolayout约束一个控件，和我们以前使用frame约束控件一样，必须设置宽度/高度/X/Y,如果缺少一个约束就会报错，报错有可能会引发一些未知的bug。

如果有红色错误：代表缺少约束，或者约束有冲突（约束可以重复添加 ）

如果有黄色警告：代表当前的位置大小和约束的位置大小不一样

在使用autolayout时，最好给每个控件起一个名称，方便阅读

在使用autolayout让某个控件相对于另一个控件约束，一定要在另一个控件周围

iOS8，默认情况下，左右两边会留出一段距离

xib编辑页面autolayout相关约束选项

设置好约束后在各个尺寸，横竖屏下查看效果

Xcode8中查看

 

 

下面设置红色视图宽度为蓝色的一半。

先约束红色和蓝色等宽，然后选中约束，改变下图所写值（Multiplier乘数），然后红色就为蓝色宽的一半；

（注：在水平居中、垂直居中等约束方式上也可以进行类似的约束操作）

Priority优先级一般不用改(优先级最大为1000，优先级越高的约束越先被满足)

 

同理宽度也可以采取相同方法

代码实现Autolayout（太麻烦，开发中不介意这样用）

代码实现autolayout的注意点

       *要先禁止autoresizing功能，设置view的下面属性为NO;

 view.translatesAutoresizingMaskIntoConstraints=NO;

       *添加约束之前，一定要保证相关控件都已经在各自的父控件上。（先add控件，再添加约束）

       *不用再给view设置frame

代码实现autolayout的步奏

*利用NSLayoutConstraint类创建具体的约束对象。

*添加约束对象到相应的view上

-(void)addCOnstraint:(NSLayoutConstraint *)constraint;

-(void)addConstraints:(NSArray *)constraints;

在添加目标view约束时会遵循以下规则。(通过代码添加约束时参照该规则)

1)对于两个同层级view之间的约束关系，添加到它们的父view上

2)对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上(父view不同，继续找父view的父view...)

3)对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上

示例：

- (void)viewDidLoad {

[super viewDidLoad];

//添加2个控件到父控件上

//添加蓝色view

UIView *blueView=[[UIView alloc] init];

blueView.backgroundColor=[UIColor blueColor];

//禁用autoresizing

blueView.translatesAutoresizingMaskIntoConstraints=NO;

[self.view addSubview:blueView];

//添加红色view

UIView *redView=[[UIView alloc] init];

redView.backgroundColor=[UIColor redColor];

//禁用autoresizing

redView.translatesAutoresizingMaskIntoConstraints=NO;

[self.view addSubview:redView];

//添加约束

//添加蓝色View距离父控件左边的距离固定为20  x

/*

item == first item  需要设置约束的控件

attribute == 需要设置的约束

relatedBy == relation 等于

toItem == second item 被参照的控件

attribute == 需要设置的约束

multiplier == multiplier 乘以

constant == constant 加上

*/

//蓝色view的左边等于父控件的左边乘以1加20

NSLayoutConstraint *leftCos=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.viewattribute:NSLayoutAttributeLeft multiplier:1.0f constant:20];

[self.view addConstraint:leftCos];

//添加蓝色View距离父控件右边的距离固定为20  宽度

NSLayoutConstraint *rightCos=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.viewattribute:NSLayoutAttributeRight multiplier:1.0f constant:-20];

[self.view addConstraint:rightCos];

//添加蓝色View距离父控件顶部边的距离固定为20 y

NSLayoutConstraint *topCos=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.viewattribute:NSLayoutAttributeTop multiplier:1.0f constant:20];

[self.view addConstraint:topCos];

//添加蓝色View的高度50                   高度

NSLayoutConstraint *heightCos=[NSLayoutConstraintconstraintWithItem:blueView attribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqual toItem:nilattribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f constant:50];

[blueView addConstraint:heightCos];

//设置红色约束

//红色高度和蓝色一样  height

NSLayoutConstraint *redHeightCos=[NSLayoutConstraintconstraintWithItem:redView attribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeightmultiplier:1.0f constant:0];

[self.view addConstraint:redHeightCos];

//红色的右边和蓝色右边对齐  x

NSLayoutConstraint *redRightCos=[NSLayoutConstraintconstraintWithItem:redView attribute:NSLayoutAttributeRightrelatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRightmultiplier:1.0f constant:0];

[self.view addConstraint:redRightCos];

//红色的顶部和蓝色底部距离固定20   y

NSLayoutConstraint *redTopCos=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0f constant:20];

[self.view addConstraint:redTopCos];

//红色宽度等于蓝色宽度一半

NSLayoutConstraint *redWidthCos=[NSLayoutConstraintconstraintWithItem:redView attribute:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidthmultiplier:0.5f constant:0];

[self.view addConstraint:redWidthCos];

}

 

VFL语言(Visual Format Language:可视化格式语言)

VFL语言是苹果公司为了简化Autolayout的编码而推出的抽象语言

VFL示例

• H:[cancelButton(72)]-12-[acceptButton(50)]

• canelButton宽72，acceptButton宽50，它们之间水平间距12

• H:[wideView(>=60@700)]

• wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）

• V:[redBox]-[yellowBox(==redBox)]

• 竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox

• H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|

• 水平方向上，Find距离父view左边缘默认间隔宽度10，之后是FindNext距离Find间隔默认宽度0；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）

和上面代码实现Autolayout完成同样的demo效果

- (void)viewDidLoad {

[super viewDidLoad];

//添加2个控件到父控件上

//添加蓝色view

UIView *blueView=[[UIView alloc] init];

blueView.backgroundColor=[UIColor blueColor];

//禁用autoresizing

blueView.translatesAutoresizingMaskIntoConstraints=NO;

[self.view addSubview:blueView];

//添加红色view

UIView *redView=[[UIView alloc] init];

redView.backgroundColor=[UIColor redColor];

//禁用autoresizing

redView.translatesAutoresizingMaskIntoConstraints=NO;

[self.view addSubview:redView];

//添加约束

/*

VisualFormat:VFL语句

options:对齐方式

metrics:VFL语句中用到的变量值

views:VFL语句中用到的控件

*/

//blueView水平方向距离两边各20距离,设置了x值和宽度

NSArray *blueViewHorizontal=[NSLayoutConstraintconstraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nilviews:@{@"blueView":blueView}];

[self.view addConstraints:blueViewHorizontal];

//blueView垂直方向距离顶部20距离，高度50 ，blueView底部距离redView为20距离  redView高度==blueView；并且设置红色和蓝色右边对齐

NSArray *blueViewVertical=[NSLayoutConstraintconstraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]"options:NSLayoutFormatAlignAllRight metrics:nilviews:@{@"blueView":blueView,@"redView":redView}];

[self.view addConstraints:blueViewVertical];

//注意：在VFL语句中是不支持乘除法，要用autolayout代码实现

//    NSArray *redViewHorizontal=[NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(==blueView)]" options:0 metrics:nil views:@{@"blueView":blueView,@"redView":redView}];

//    [self.view addConstraints:redViewHorizontal];

NSLayoutConstraint *redViewW=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];

[self.view addConstraint:redViewW];

}