自动布局

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

  • NSLayoutConstraint,系统的布局类

/**
 系统默认添加约束的方法,它是NSLayoutConstraint的类方法

 @param view1 想要添加约束的控件
 @param attr1 想要添加约束的方向
 @param relation 传入与约束值的关系,大于、等于还是小于
 @param view2 被参照对象
 @param attr2 被参照对象所被参照的方向,如顶部、左边、右边等
 @param multiplier 间距倍数关系
 @param c 最终的差值
 @return NSLayoutConstraint对象
 */
//+(instancetype)constraintWithItem:(id)view1
//                        attribute:(NSLayoutAttribute)attr1
//                        relatedBy:(NSLayoutRelation)relation
//                           toItem:(nullable id)view2
//                        attribute:(NSLayoutAttribute)attr2
//                       multiplier:(CGFloat)multiplier
//                         constant:(CGFloat)c
-(void)sysAutolayout{
    /////////////////////////////////////////// red view ////////////////////////////////////////////////
    UIView *redView = [[UIView alloc] init];
    [self.view addSubview:redView];
    redView.backgroundColor = [UIColor redColor];
    
    //⚠️:一定要加上这句代码,否则添加的约束会有冲突
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    
    //左边的约束
    NSLayoutConstraint *redLeftCons = [NSLayoutConstraint constraintWithItem:redView
                                                                   attribute:NSLayoutAttributeLeft
                                                                   relatedBy:NSLayoutRelationEqual
                                                                      toItem:self.view
                                                                   attribute:NSLayoutAttributeLeft
                                                                  multiplier:1
                                                                    constant:20];
//    [self.view addConstraint:redLeftCons];
    redLeftCons.active = YES;//这是官方建议的方法
    
    //底部的约束
    NSLayoutConstraint *redBottomCons = [NSLayoutConstraint constraintWithItem:redView
                                                                     attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual
                                                                        toItem:self.view
                                                                     attribute:NSLayoutAttributeBottom
                                                                    multiplier:1
                                                                      constant:-20];
    //⚠️:只在没有参照控件时(即toItem为nil),约束才添加到自己身上,不然添加到父视图上
//    [self.view addConstraint:redBottomCons];
    redBottomCons.active = YES;
    
    //宽度约束
    //可以参照其他控件设置约束,如下:
//    [NSLayoutConstraint constraintWithItem:redView
//                                 attribute:NSLayoutAttributeWidth
//                                 relatedBy:NSLayoutRelationEqual
//                                    toItem:self.view
//                                 attribute:NSLayoutAttributeWidth
//                                multiplier:0.5
//                                  constant:0];
    
    //也可以不参照其他控件
    NSLayoutConstraint *redWidthCons = [NSLayoutConstraint constraintWithItem:redView
                                                                   attribute:NSLayoutAttributeWidth
                                                                   relatedBy:NSLayoutRelationEqual
                                                                      toItem:nil
                                                                   attribute:kNilOptions
                                                                  multiplier:1.0
                                                                    constant:50];
    //这里没有参照控件,所以约束添加到自己身上
//    [redView addConstraint:redWidthCons];
    redWidthCons.active = YES;
    
    
    
    //长度约束,同宽度约束
    NSLayoutConstraint *redHeightCons = [NSLayoutConstraint constraintWithItem:redView
                                                                     attribute:NSLayoutAttributeHeight
                                                                     relatedBy:NSLayoutRelationEqual
                                                                        toItem:nil
                                                                     attribute:kNilOptions
                                                                    multiplier:1.0
                                                                      constant:40];
//    [redView addConstraint:redHeightCons];
    redHeightCons.active = YES;
    
    /////////////////////////////////////////// blue view ////////////////////////////////////////////////
    UIView *blueView = [[UIView alloc] init];
    [self.view addSubview:blueView];
    blueView.backgroundColor = [UIColor blueColor];
    _blueView = blueView;
    
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    NSLayoutConstraint *blueLeftCons = [NSLayoutConstraint constraintWithItem:blueView
                                                                    attribute:NSLayoutAttributeLeft
                                                                    relatedBy:NSLayoutRelationEqual
                                                                       toItem:redView
                                                                    attribute:NSLayoutAttributeRight
                                                                   multiplier:1
                                                                     constant:10];
    [self.view addConstraint:blueLeftCons];
    
    NSLayoutConstraint *blueBottomCons = [NSLayoutConstraint constraintWithItem:blueView
                                                                      attribute:NSLayoutAttributeBottom
                                                                      relatedBy:NSLayoutRelationEqual
                                                                         toItem:redView
                                                                      attribute:NSLayoutAttributeBottom
                                                                     multiplier:1
                                                                       constant:0];
    [self.view addConstraint:blueBottomCons];
    
    NSLayoutConstraint *blueWidthCons = [NSLayoutConstraint constraintWithItem:blueView
                                                                     attribute:NSLayoutAttributeWidth
                                                                     relatedBy:NSLayoutRelationEqual
                                                                        toItem:nil
                                                                     attribute:kNilOptions
                                                                    multiplier:1
                                                                      constant:50];
    [blueView addConstraint:blueWidthCons];
    
    NSLayoutConstraint *blueHeightCons = [NSLayoutConstraint constraintWithItem:blueView
                                                                      attribute:NSLayoutAttributeHeight
                                                                      relatedBy:NSLayoutRelationEqual
                                                                         toItem:nil
                                                                      attribute:kNilOptions
                                                                     multiplier:1
                                                                       constant:50];
    [blueView addConstraint:blueHeightCons];
    
    /////////////////////////////////////////// yellow view ////////////////////////////////////////////////
    UIView *yellowView = [[UIView alloc] init];
    [self.view addSubview:yellowView];
    yellowView.backgroundColor = [UIColor yellowColor];
    
    yellowView.translatesAutoresizingMaskIntoConstraints = NO;
    NSLayoutConstraint *yellowLeftCons = [NSLayoutConstraint constraintWithItem:yellowView
                                                                    attribute:NSLayoutAttributeLeft
                                                                    relatedBy:NSLayoutRelationEqual
                                                                       toItem:blueView
                                                                    attribute:NSLayoutAttributeRight
                                                                   multiplier:1
                                                                     constant:10];
    [self.view addConstraint:yellowLeftCons];
    
    NSLayoutConstraint *yellowBottomCons = [NSLayoutConstraint constraintWithItem:yellowView
                                                                      attribute:NSLayoutAttributeBottom
                                                                      relatedBy:NSLayoutRelationEqual
                                                                         toItem:redView
                                                                      attribute:NSLayoutAttributeBottom
                                                                     multiplier:1
                                                                       constant:0];
    [self.view addConstraint:yellowBottomCons];
    
    NSLayoutConstraint *yellowWidthCons = [NSLayoutConstraint constraintWithItem:yellowView
                                                                     attribute:NSLayoutAttributeWidth
                                                                     relatedBy:NSLayoutRelationEqual
                                                                        toItem:nil
                                                                     attribute:kNilOptions
                                                                    multiplier:1
                                                                      constant:50];
    [yellowView addConstraint:yellowWidthCons];
    
    NSLayoutConstraint *yellowHeightCons = [NSLayoutConstraint constraintWithItem:yellowView
                                                                      attribute:NSLayoutAttributeHeight
                                                                      relatedBy:NSLayoutRelationEqual
                                                                         toItem:nil
                                                                      attribute:kNilOptions
                                                                     multiplier:1
                                                                       constant:50];
    [yellowView addConstraint:yellowHeightCons];
    
    //低优先级的约束
    NSLayoutConstraint *yellowLeftCons_1 = [NSLayoutConstraint constraintWithItem:yellowView
                                                                        attribute:NSLayoutAttributeLeft
                                                                        relatedBy:NSLayoutRelationEqual
                                                                           toItem:redView
                                                                        attribute:NSLayoutAttributeRight
                                                                       multiplier:1
                                                                         constant:10];
    //优先级的范围时0-1000,默认是1000
    //数字越大,优先级越高
    //优先级相同时,会造成约束冲突
    yellowLeftCons_1.priority = 250;//此时优先级低于yellowLeftCons,不执行
    [self.view addConstraint:yellowLeftCons_1];
    
    [self.view removeConstraint:yellowLeftCons_1];
}
  • VFL
/**
 VFL创建约束的API

 @param format 传入某种格式构成的字符串,用以表达需要添加的约束,如@"H:|-margin-[redView(50)]"表示:水平方向上,redview与父控件左边缘保持"margin"间距,redview的宽度为50
 @param opts 对齐方式,相对于format中所有视图的对齐约束,如果format只有一个view时,可以不设置
 @param metrics 一般传入以间距为key的字典,如:@{@"margin":@20},key要与format参数里所填写的"margin"相同
 @param views 传入约束中提到的view,也是字典,如:@{@"redView":redView},key要与format参数里所填写的"redView"相同
 @return 返回约束的数组
 */
//+ (NSArray *)constraintsWithVisualFormat:(NSString *)format options:(NSLayoutFormatOptions)opts metrics:(NSDictionary *)metrics views:(NSDictionary *)views{}
//vfl是基于NSLayoutConstraint的一种自动布局方式

//format 语法:
//1.每句的前面都要加@"H:"或者@"V:",分别代表着水平和垂直方向
//2.@"|"代表着边界
//3.@"-"用来表示间隙,一般以这样的形式出现@"-20-",也可以先填写标示@"-margin-",之后通过metrics赋值
//4.@"[]"用来存放需要添加约束的view,想要直接设置宽高就这样[redView(50)]

//示例
//H:[cancelButton(72)]-12-[acceptButton(50)]
//cancelButton宽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间隔默认宽度;再之后是宽度不小于20的FindField,它和FindNext以及父view右边边缘的间距都是默认宽度。(竖线“|”表示superview的边缘)。
-(void)vflAutolayout{
    UIView *redView = [[UIView alloc] init];
    [self.view addSubview:redView];
    redView.backgroundColor = [UIColor redColor];
    
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    
    //这个方法会自动把传入的参数以字典的形式返回,字典的key就是其本身的名字
    NSDictionary *redViewInfo = NSDictionaryOfVariableBindings(redView);
    
    NSString *hFormat = @"H:|-margin-[redView(redWidth)]";
    NSArray *hCons = [NSLayoutConstraint constraintsWithVisualFormat:hFormat
                                                             options:kNilOptions
                                                             metrics:@{@"margin":@20,@"redWidth":@50}
                                                               views:redViewInfo];
//    [self.view addConstraints:hCons];
    [NSLayoutConstraint activateConstraints:hCons];
    
    NSString *vFormat = @"V:|-margin-[redView(redHeight)]";
    NSArray *vCons = [NSLayoutConstraint constraintsWithVisualFormat:vFormat
                                                             options:kNilOptions
                                                             metrics:@{@"margin":@20,@"redHeight":@100}
                                                               views:redViewInfo];
//    [self.view addConstraints:vCons];
    [NSLayoutConstraint activateConstraints:vCons];
}

-(void)vflAutolayout_complex{
    UIView *redView = [[UIView alloc] init];
    [self.view addSubview:redView];
    redView.backgroundColor = [UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints = NO;
    
    UIView *blueView = [[UIView alloc] init];
    [self.view addSubview:blueView];
    blueView.backgroundColor = [UIColor blueColor];
    _blueView = blueView;
    blueView.translatesAutoresizingMaskIntoConstraints = NO;
    
    
    UIView *yellowView = [[UIView alloc] init];
    [self.view addSubview:yellowView];
    yellowView.backgroundColor = [UIColor yellowColor];
    yellowView.translatesAutoresizingMaskIntoConstraints = NO;
    
    //////////////////////////////////////////////////////////////
    //这个方法会自动把传入的参数以字典的形式返回,字典的key就是其本身的名字
    NSDictionary *viewInfo = NSDictionaryOfVariableBindings(redView,blueView,yellowView);
    NSDictionary *metrics = @{@"margin":@20};
    NSString *hConsFormat = @"H:|-margin-[redView(50)]-margin-[blueView(==redView)]-margin-[yellowView(==redView)]";
    NSArray *hCons = [NSLayoutConstraint constraintsWithVisualFormat:hConsFormat
                                                             options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom
                                                             metrics:metrics
                                                               views:viewInfo];
    [NSLayoutConstraint activateConstraints:hCons];
    
    //设置约束的优先级,需要明确是哪个约束需要设置优先级
    NSString *hConsFormat_1 = @"H:|-margin-[redView(50)]-margin@250-[yellowView(==redView)]";
    NSArray *hCons_1 = [NSLayoutConstraint constraintsWithVisualFormat:hConsFormat_1 options:NSLayoutFormatAlignAllTop | NSLayoutFormatAlignAllBottom metrics:metrics views:viewInfo];
    [NSLayoutConstraint activateConstraints:hCons_1];
    
    NSString *vConsFormat = @"V:|-margin-[redView(50)]";
    NSArray *vCons = [NSLayoutConstraint constraintsWithVisualFormat:vConsFormat
                                                             options:kNilOptions
                                                             metrics:metrics
                                                               views:viewInfo];
    [NSLayoutConstraint activateConstraints:vCons];
    
}
  • masonry
-(void)masonry_autolayout{
    UIView *redView = [[UIView alloc] init];
    [self.view addSubview:redView];
    redView.backgroundColor = [UIColor redColor];
    _redView = redView;
    
    UIView *blueView = [[UIView alloc] init];
    [self.view addSubview:blueView];
    blueView.backgroundColor = [UIColor blueColor];
    _blueView = blueView;
    
    
    UIView *yellowView = [[UIView alloc] init];
    [self.view addSubview:yellowView];
    yellowView.backgroundColor = [UIColor yellowColor];
    _yellowView = yellowView;
    
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.leading.equalTo(self.view).offset(20);
        make.width.height.equalTo(@50);
    }];
    
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.mas_equalTo(redView.mas_trailing).offset(10);
        make.top.width.height.equalTo(redView);
    }];
    
//    [yellowView mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.top.width.height.equalTo(redView);
//        make.leading.mas_equalTo(blueView.mas_trailing).offset(10);
//        make.leading.mas_equalTo(redView.mas_trailing).offset(10).priorityLow();
//    }];
    
    [yellowView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.width.height.equalTo(redView);
        self.leftCons = make.leading.mas_equalTo(blueView.mas_trailing).offset(10);
//        make.leading.mas_equalTo(blueView.mas_trailing).offset(10);
    }];
    
}
  • 更新约束
-(void)update_masonry_layout{
    _blueView.hidden = YES;
//    [_yellowView mas_remakeConstraints:^(MASConstraintMaker *make) {
//        make.top.width.height.equalTo(self.redView);
//        make.leading.mas_equalTo(self.redView.mas_trailing).offset(10);
//    }];
    //mas_updateConstraints 所做的只是在原有约束的基础上添加约束,如果原来的约束中存在对应的约束就覆盖原约束
    //如果原来的约束不存在对应的约束,并且有约束与新的约束相冲突,就需要先删除原约束
    [self.leftCons uninstall];
    [_yellowView mas_updateConstraints:^(MASConstraintMaker *make) {
        make.leading.mas_equalTo(self.redView.mas_trailing).offset(10);
    }];
}

 

转载于:https://my.oschina.net/u/3697347/blog/3026635

你可能感兴趣的:(自动布局)