自動佈局(autoLayout)代碼演練2

 

代碼效果：

 

 

 

 

 

 

 

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    
    //1.添加視圖
    UIView *blueView =[[UIView alloc]init];
    blueView.backgroundColor =[UIColor blueColor];
    //要先禁止autoresizing功能
    blueView.translatesAutoresizingMaskIntoConstraints =NO;
    [self.view addSubview:blueView];
    
    UIView *redView =[[UIView alloc]init];
    redView.backgroundColor =[UIColor redColor];
    redView.translatesAutoresizingMaskIntoConstraints =NO;
    [self.view addSubview:redView];
    
    
    //*************************************************2.藍色約束*********************
    CGFloat margain =20;
    
      //2.1藍色視圖左邊約束
    NSLayoutConstraint *blueLeft =[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margain];
    [self.view addConstraint:blueLeft];
    
    //2.2藍色視圖右邊約束
    NSLayoutConstraint *blueReight =[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeRight multiplier:1.0 constant: -margain];
    [self.view addConstraint:blueReight];
    
    //2.3藍色視圖頂部約束
    NSLayoutConstraint *blueTop =[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:margain];
    [self.view addConstraint:blueTop];
    
    //2.4藍色視圖高度約束
    NSLayoutConstraint *blueHeight =[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeHeight multiplier:1.0 constant:margain*2];
    [blueView addConstraint:blueHeight];
    
    ////////////////////////////////////////////////////////////////////////////////
    
    
    
  
    //*************************************************3.紅色約束*********************
       //3.紅色約束
     //3.1紅色視圖右邊約束
     NSLayoutConstraint *RedRight =[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight
     relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier:1.0 constant:0.0];
     [self.view addConstraint:RedRight];
     
     //3.2紅色視圖高度邊約束
     NSLayoutConstraint *RedHight =[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0.0];
     [self.view addConstraint:RedHight];
     
     //3.3紅色視圖左邊約束
     NSLayoutConstraint *RedLeft =[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5  constant:0.0];
     [self.view addConstraint:RedLeft];
     
     //3.4紅色視圖頂部邊約束
     NSLayoutConstraint *RedTop =[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:margain];
     [self.view addConstraint:RedTop];
    ////////////////////////////////////////////////////////////////////////////////
 
   }

其中 NSLayoutConstraint *blueLeft =[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:margain];
    [self.view addConstraint:blueLeft];

     這段代碼：左邊間距 =  self.view左邊間距   x 1.0 +  margain

 

 

一個NSLayoutConstraint對象就表明一個約束

建立約束對象的經常使用方法

+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

view1 ：要約束的控件

attr1 ：約束的類型（作怎樣的約束）

relation ：與參照控件之間的關係

view2 ：參照的控件

attr2 ：約束的類型（作怎樣的約束）

multiplier ：乘數

c ：常量

自動佈局有個核心公式

obj1.property1 =（obj2.property2 * multiplier）+ constant value