AutoLayout

2020-10-28 本文已影响0人我不白先生

1）AutoLayout
通过约束的方式进行布局，一个条件及代表一个约束对象，如果：视图距离父视图左边20个点，这就是一个条件，我们要创建一个对应的约束对象使用
使用时需要2个条件
1.约束要完整（能够根据约束计算出完成的x y w h）
2.约束时不能冲突
如：视图宽50 高50 父视图宽400 高400
冲突的约束条件：
视图距离父视图左边20个点
视图在父视图中居中显示
2）约束对象
约束类型 NSLayoutConstrant
创建好的约束对象需添加到父视图中
3）如何创建约束对象
方法一：万能公式法
任何一个视图的约束都可以由下面的等式描述出来，就是把文字性的描述变成等式中的参数
view1.attr1<relation>view2.attr2 * multiplier + constant
文字性描述：视图1的右边距离视图的左边为20个点
view.right = view2.left1+(-20)
文字描述：视图距离父视图的顶部为20个点
view.top = superView.top1+20
文字性描述：视图的宽度是父视图宽度的一半加30
view.width = superView.width * 0.5 +30
约束中的等号左边，代表描述的主题，一般叫firstiem
约束中的等号右边，代表参照的视图，一般叫seconditem
multiplier和constant都是为了使等式成立的系数以及偏移量
image.png
ViewController.m

#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *myView1;
@property (weak, nonatomic) IBOutlet UIView *myView2;
@end
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    //关闭了 myView1 将 autoresizing 自动转换成 约束对象的 功能
    self.myView1.translatesAutoresizingMaskIntoConstraints =NO;
    //关闭了 myView2 将 autoresizing 自动转换成 约束对象的 功能
    self.myView2.translatesAutoresizingMaskIntoConstraints =NO;
    //给 view 创建约束对象 添加到 self.view
    /*************myView1的约束**************/
    //1.创建左边距约束 myView1.left = self.view.left * 1 + 20
    NSLayoutConstraint *c1 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
    //2.创建上边距约束
    NSLayoutConstraint *c2 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1 constant:20];
    //3.创建高边距约束
        NSLayoutConstraint *c3 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:40];
    //4.创建宽度约束
    NSLayoutConstraint *c4 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.myView2 attribute:NSLayoutAttributeWidth multiplier:1 constant:0];
    //将创建好的约束条件 添加到 父视图中
    [self.view addConstraint:c1];
     [self.view addConstraint:c2];
     [self.view addConstraint:c3];
     [self.view addConstraint:c4];
     /*************myView2的约束**************/
    //1.创建左边约束
    NSLayoutConstraint *c5 = [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.myView1 attribute:NSLayoutAttributeRight multiplier:1 constant:10];
    //2.创建顶部约束
     NSLayoutConstraint *c6= [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.myView1 attribute:NSLayoutAttributeCenterY  multiplier:1 constant:0];
    //3.创建高度约束
    NSLayoutConstraint *c7= [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.myView1 attribute:NSLayoutAttributeHeight  multiplier:1 constant:0];
    //3.创建右边距约束
    NSLayoutConstraint *c8= [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
    [self.view addConstraint:c5];
    [self.view addConstraint:c6];
    [self.view addConstraint:c7];
    [self.view addConstraint:c8];
}
@end

练习

要求

A95C46C16EF135FE285BEF8D9FFE2AC6.png

ViewController.m

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIView *myView1;
@property (weak, nonatomic) IBOutlet UIView *myView2;
@property (weak, nonatomic) IBOutlet UIView *myView3;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.myView1.translatesAutoresizingMaskIntoConstraints = NO;
    self.myView2.translatesAutoresizingMaskIntoConstraints = NO;
    self.myView3.translatesAutoresizingMaskIntoConstraints = NO;
    //myView1
    //距离视图左边20点
    NSLayoutConstraint *c1 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
    //距离视图右边20点
    NSLayoutConstraint *c2 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1 constant:-20];
    //高边距40点
    NSLayoutConstraint *c3 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:40];
    //创建宽度约束
    NSLayoutConstraint *c4 = [NSLayoutConstraint constraintWithItem:self.myView1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:1 constant:-40];
    [self.view addConstraint:c1];
    [self.view addConstraint:c2];
    [self.view addConstraint:c3];
    [self.view addConstraint:c4];
    //myView2
    //创建宽度约束
     NSLayoutConstraint *c5 = [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.myView1 attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
    //创建高度约束
    NSLayoutConstraint *c6 = [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.myView2 attribute:NSLayoutAttributeWidth multiplier:1 constant:0];
    NSLayoutConstraint *c7= [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterY multiplier:1 constant:0];
    NSLayoutConstraint *c8= [NSLayoutConstraint constraintWithItem:self.myView2 attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
    [self.view addConstraint:c5];
    [self.view addConstraint:c6];
    [self.view addConstraint:c7];
    [self.view addConstraint:c8];
     //myView3
    //创建高度约束
    NSLayoutConstraint *c9 = [NSLayoutConstraint constraintWithItem:self.myView3 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:self.myView1 attribute:NSLayoutAttributeHeight multiplier:1 constant:0];
    NSLayoutConstraint *c10 = [NSLayoutConstraint constraintWithItem:self.myView3 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.myView1 attribute:NSLayoutAttributeWidth multiplier:1 constant:0];
    NSLayoutConstraint *c11 = [NSLayoutConstraint constraintWithItem:self.myView3 attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1 constant:20];
    NSLayoutConstraint *c12 = [NSLayoutConstraint constraintWithItem:self.myView3 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1 constant:-20];
    [self.view addConstraints:@[c9,c10,c11,c12]];
}

效果

image.png

方法二：VFL法（Visual Format Language）
是一个具有一定格式的字符串，不同的格式能生成不同的约束对象，并且一个字符串能一次性生成很多个约束对象
如何写VFL
1.视图1和视图2之间间隔30
VFL:[view1]-30-[view2]
2.视图1的宽度为50
VFL:[view1(==50)]或[view(50)]
3..视图1的高度为50
VFL:[view1(==50)]或[view(50)]
4.视图1的宽度为50，视图1和视图2间隔10，视图2的宽度和视图1一样
VFL：[View1(50)]-10-[View2(View1)]
5.视图1的宽度为50，视图1和视图2间隔10，视图2的宽度和视图1一样,视图1距离父视图左边20，视图2距离父视图右边20
VFL：|-20-[View1(50)]-10-[View2(View1)]-20-|
VFL特殊符号的含义：
|代表父视图边缘
H:表示水平方向（不写默认是水平）
V：表示垂直方向
[] 代表一个子视图
()代表条件（宽或高）
-x-表示间隔为x
-表示标准间隔8
ViewController.m

#import "ViewController.h"
@interface ViewController ()
@property(nonatomic,strong)UIView *myView1;
@property(nonatomic,strong)UIView *myView2;
@end

@implementation ViewController
-(UIView *)myView1{
    if(!_myView1){
        _myView1 = [[UIView alloc]init];
        _myView1.backgroundColor =[UIColor redColor];
        _myView1.translatesAutoresizingMaskIntoConstraints = NO;
        [self.view addSubview:_myView1];
     
    }
    return _myView1;
}
-(UIView *)myView2{
    if(!_myView2){
        _myView2 = [[UIView alloc]init];
        _myView2.backgroundColor =[UIColor redColor];
        _myView2.translatesAutoresizingMaskIntoConstraints = NO;
        [self.view addSubview:_myView2];
    }
    return _myView2;
}
-(void)vfl1{
    //添加约束
    //拼写约束所需的 VFL 字符串内容
    NSString *hVFL = @"|-20-[view1]-10-[view2(view1)]-20-|";
    NSArray *cs1 = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:nil views:@{@"view1":self.myView1,@"view2":self.myView2}];
    //将约束数组添加到 父视图中
    [self.view addConstraints:cs1];
    NSString *vVFL = @"V:|-20-[view1(40)]";
    NSArray *cs2 = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatAlignmentMask metrics:nil views:@{@"view1":self.myView1}];
    [self.view addConstraints:cs2];
}
-(void)vfl2{
    UIView *myView3 = [[UIView alloc]init];
    myView3.backgroundColor = [UIColor orangeColor];
    myView3.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:myView3];
    UIView *myView4 = [[UIView alloc]init];
    myView4.backgroundColor = [UIColor blueColor];
    myView4.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:myView4];
    
    //NSDictionaryOfVariableBindings 传入的是 value对象，会根据传入的对象名称自动生成同名的key
    NSDictionary *viewsDic = NSDictionaryOfVariableBindings(myView3,myView4);
    //创建对照表
    NSDictionary *metrics = @{@"left":@20,@"right":@20,@"space":@10,@"height":@40,};
    //添加约束
    //拼写约束所需的 VFL 字符串内容
    NSString *hVFL = @"|-left-[myView3]-space-[myView4(myView3)]-right-|";
    NSArray *cs1 = [NSLayoutConstraint constraintsWithVisualFormat:hVFL options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:metrics views:viewsDic];
    //将约束数组添加到 父视图中
    [self.view addConstraints:cs1];
    
    NSString *vVFL = @"V:|-left-[myView3(height)]";
    NSArray *cs2 = [NSLayoutConstraint constraintsWithVisualFormat:vVFL options:NSLayoutFormatAlignmentMask metrics:metrics views:viewsDic];
    [self.view addConstraints:cs2];
}
- (void)viewDidLoad {
    [super viewDidLoad];
 //[self vfl1];
    [self vfl2];
}
@end

AutoLayout

猜你喜欢

热点阅读