純程式碼Autolayout的三種方法

有稜角的圓發表於2016-07-07

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.csdn.net/sxfcct/article/details/8776928       

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

masonry下載網址：                  

   https://github.com/SnapKit/Masonry

相關文章