[New learn]AutoLayout调查基于code

Posted 2020-07-04

代码https://github.com/xufeng79x/TestAutolayout-code2

1.简介

　　前一篇文章[New learn]AutoLayout调查基于IB讲述了如何在IB的基础上为控件添加约束。本文主要讲述如何在代码情况下操作autolayout

 

2.约束总结：

　　在上一篇文章中的主要约束为：

　　

 

总结为：

　　1.两个view各自和边缘间隔20

　　2.两个view与top边缘相隔30

　　3.两个之间相隔80

　　4.两个view的高宽比保持不变1：1

　　5.两个view的宽度保持相等

 

3.使用VFL语言

　　VFL为Visual format language的缩写，意为可视化格式语言。他不是一种计算机语言，应该算是一种数据描述格式。

　　过多的对于VFL不做解释，这里仅仅举几个??：

@"H:|-20-[redView]-80-[blueView]-20-|"

 

　　上述字符串既是一个VFL的表达格式，表达了下述两个横向上的约束：

　　1.两个view各自和边缘间隔20 

　　3.两个之间相隔80　　

　　

4.代码表达约束

　　分为两步，创建约束和设置约束

　　1.创建约束　　

    // 使用VFL描述进行约束设定
    
    // 1.创建名称映射，以便于VFL中的[view名称]能够和正真的view实例像映射
    NSDictionary *nameMap = @{@"redView":redView,@"blueView":blueView};
    
    // 2.1使用VFL描述创建约束-水平约束
    NSArray *horizontalConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[redView]-80-[blueView]-20-|" options:0 metrics:nil views:nameMap];
    
    // 2.2使用VFL描述创建约束-垂直约束
    NSArray *verticalRedViewConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[redView]" options:0 metrics:nil views:nameMap];
    
    NSArray *verticalBlueViewConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[blueView]" options:0 metrics:nil views:nameMap];

 

上述约束其实已经将横向和纵向的约束表达清楚，既已经将下面的几个约束表达清楚了：

　　1.两个view各自和边缘间隔20

　　2.两个view与top边缘相隔30

　　3.两个之间相隔80

 

但是通过使用VFL语言有一个弊端就是无法实现对于view之间或者本身需要经过计算才能获得的约束，比如余下两个约束就无法通过VFL语言进行定义：

　　4.两个view的高宽比保持不变1：1

　　5.两个view的宽度保持相等

除了constraintsWithVisualFormat方法，NSLayoutConstraint还给出了另外一个方法来解决这件问题：

    //3. 将两个view增加等宽约束
    NSLayoutConstraint *widthConstraint = [NSLayoutConstraint
                  constraintWithItem:redView
                  attribute:NSLayoutAttributeWidth
                  relatedBy:NSLayoutRelationEqual
                  toItem: blueView
                  attribute:NSLayoutAttributeWidth
                  multiplier:1.0f
                  constant:0];
    
    
    
    
    // 4.将两个view增加长宽等比例约束
    NSLayoutConstraint *redRatioConstraint =[NSLayoutConstraint
                                     constraintWithItem:redView
                                     attribute:NSLayoutAttributeWidth
                                     relatedBy:NSLayoutRelationEqual
                                     toItem:redView
                                     attribute:NSLayoutAttributeHeight
                                     multiplier:1.0/1.0 //Aspect ratio: 1*height = 1*width
                                     constant:0.0f];
    
    
    NSLayoutConstraint *blueRatioConstraint =[NSLayoutConstraint
                                             constraintWithItem:blueView
                                             attribute:NSLayoutAttributeWidth
                                             relatedBy:NSLayoutRelationEqual
                                             toItem:blueView
                                             attribute:NSLayoutAttributeHeight
                                             multiplier:1.0/1.0 //Aspect ratio: 1*height = 1*width
                                             constant:0.0f];

 

此方法的参数可以形象的表达如下：

　　

 

　　2.设置约束　

    // 5.设置约束
    [self.view addConstraints:horizontalConstraints];
    [self.view addConstraints:verticalRedViewConstraints];
    [self.view addConstraints:verticalBlueViewConstraints];
    [self.view addConstraint:widthConstraint];
    [redView addConstraint:redRatioConstraint];
    [blueView addConstraint:blueRatioConstraint];

 

　　如上我们将对应的约束设定到了对应的view上，但是这里有一个问题，上述约束设定的view并不相同，那么我们怎么知道当前约束设定到哪个view呢？

　　一般规则为：1.当约束只约束自身的则将约束设定到自身，如4和5这两个约束。

　　　　　　　　2.当约束涉及到多个view之间的关系，则将此约束设定到他们的共同父view（有可能是共同祖先）上。如3约束。

　　　　　　　　3.当约束涉及到自身和其view时候，则将约束设定到父view上，如1，2约束

 

关于这一点我们也可以在基于IB时候的操作页面上一窥究竟：

　　　

 

 

 

以上。