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

Posted 2020-08-09

1.使用autoresizing

2.使用autolayout

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

 

使用autoresizing

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

  

如图中所示

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

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

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

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

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

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

 

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

 

使用autolayout

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

 

注意：

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

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

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

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

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

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

 

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

 

 

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

 

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

 

 

 

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

先约束红色和蓝色等宽，然后选中约束，改变下图所写值（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(>[email protected])]

• 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];

}