纯代码Autolayout的三种方法

最新推荐文章于 2017-09-21 16:24:35 发布

转载最新推荐文章于 2017-09-21 16:24:35 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sunjianfei/p/5650412.html

Autolayout讲解较多的就是xib和storyboard用法，本文主要记录纯代码的Autolayout使用方法：

方法1.苹果原生的方法，这种方法虽然简单但是太过繁杂，可用性很差

    //宽度=superView高度
    [superView addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeWidth multiplier:1 constant:0]];
    //高度=40
    [superView addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:0 constant:40]];
    //view1底部距离superView底部距离为0
    [superView addConstraint:[NSLayoutConstraint constraintWithItem:view1 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:superView attribute:NSLayoutAttributeBottom multiplier:1 constant:0]];

方法2.VFL方法：

//view1距离superview两端距离都为0
  [superView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[view1]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(view1)]];
    //view1高度为40，距离底端距离为0
  [superView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[view1(==40)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(view1)]];

V:[view1][view2(==view1)]|
V表示竖直布局（vertical），先是一个view1，其下方紧接一个宽度等于view1宽度的view2，view2距离父视图底部边缘距离为0
H:|-[view1]-[view2]-[view3(>=20)]-|
H表示水平布局，view1距离父视图左边缘默认间隔宽度，之后是view2距离view1间隔默认宽度；再之后是宽度不小于20的view3，它和view2以及父视图右边缘的间距都是默认宽度。（竖线'|‘ 表示superview的边缘，“-|”表示默认距离，“|”表示距离边缘为0）

注意：

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

用来将约束添加到view。在添加时唯一要注意的是添加的目标view要遵循以下规则：

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

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

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

方法3.第三方库Masonry

    [view1 setTranslatesAutoresizingMaskIntoConstraints:NO];
    [view1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.leading.width.equalTo(superView);
        make.height.equalTo(@40);

    }];

//上下左右边距
-(void)masonryTest1{
    
    UIView *blueView=[[UIView alloc]init];
    blueView.backgroundColor=[UIColor blueColor];
    [self.view addSubview:blueView];
    
    UIView *redView=[[UIView alloc]init];
    redView.backgroundColor=[UIColor redColor];
    [self.view addSubview:redView];
    
    [blueView mas_makeConstraints:^(MASConstraintMaker *make) {
//        make.width.mas_equalTo(100);
//        make.height.mas_equalTo(100);
//        make.left.equalTo(self.view.mas_left).with.offset(10);
//        make.top.equalTo(self.view.mas_top).with.offset(20);
        
        make.edges.equalTo(self.view).with.insets(UIEdgeInsetsMake(10, 10, 10, 100));
    }];
    
    [redView mas_makeConstraints:^(MASConstraintMaker *make) {
        
        make.height.mas_equalTo(blueView.mas_height);
        make.left.equalTo(blueView.mas_right).with.offset(10);
        make.right.equalTo(self.view.mas_right).with.offset(-10);
        make.top.equalTo(blueView.mas_top).with.offset(0);
    
    }];
    
}
// test2: 中心点与self.view相同，宽度为400*400
-(void)masonryTest2{
    UIView *view = [UIView new];
    [view setBackgroundColor:[UIColor redColor]];
    [self.view addSubview:view];
    [view mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(200,200));
    }];
}

参考原文档：

http://blog.youkuaiyun.com/sxfcct/article/details/8776928

http://www.zhihu.com/question/37095424

masonry下载网址：

https://github.com/SnapKit/Masonry

转载于:https://www.cnblogs.com/sunjianfei/p/5650412.html