IOS中級篇 ——自動佈局 Autolayout and VFL

 

 

*/ 如下不經常使用  

// 務必記住

// 1. 當給某個控件設置約束時候 , 必須關閉這個控件上 autoresing

// 2. 當給一個控件添加約束時候 , 必須保證這個控件在控制器 View 的層次結構中

- ( void )viewDidLoad {
    [ super viewDidLoad];
  
    UIView *redView = [[UIView alloc] init];
    redView.backgroundColor = [UIColor redColor];
    [ self .view addSubview:redView];
   
    UIView *blueView = [[UIView alloc] init];
    blueView.backgroundColor = [UIColor blueColor];
    [ self .view addSubview:blueView];
   
//  Constraint 約束
/*
  第一個參數 Item
 1. 須要約束控件
  第二個參數 約束的屬性
 NSLayoutAttributeLeft = 1, 左邊
 NSLayoutAttributeRight,  右邊
 NSLayoutAttributeTop,    頂部
 NSLayoutAttributeBottom, 下邊
 NSLayoutAttributeLeading, 左邊
 NSLayoutAttributeTrailing, 右邊
 NSLayoutAttributeWidth,   寬
 NSLayoutAttributeHeight,  高
 NSLayoutAttributeCenterX, 水平中線
 NSLayoutAttributeCenterY, 垂直中線
  第三個參數就是 關係
 typedef NS_ENUM(NSInteger, NSLayoutRelation) {
 NSLayoutRelationLessThanOrEqual = -1,  "<="
 NSLayoutRelationEqual = 0,              "=="
 NSLayoutRelationGreaterThanOrEqual = 1, ">="
 };
第四個參數 參照物 ( 參照控件 )
 
第五個參數 參照控件的屬性
 
multiplier 乘
 
constant   +
 
公式
item1.attribute <relation> item2.attribute * multiplier + constant
 
 */
// 務必記住
// 1. 當給某個控件設置約束時候 , 必須關閉這個控件上 autoresing
   blueView.translatesAutoresizingMaskIntoConstraints = NO ;
    redView.translatesAutoresizingMaskIntoConstraints = NO ;
// 2. 當給一個控件添加約束時候 , 必須保證這個控件在控制器 View 的層次結構中
   
//  添加藍色的 View 頂部
    NSLayoutConstraint *blueTop = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop  relatedBy:NSLayoutRelationEqual toItem: self .view attribute:NSLayoutAttributeTop multiplier: 1 constant: 20 ];
   
    [ self .view addConstraint:blueTop];
   
    //  添加藍色的 View 左邊
    NSLayoutConstraint *blueLeft = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft  relatedBy:NSLayoutRelationEqual toItem: self .view attribute:NSLayoutAttributeLeft multiplier: 1 constant: 20 ];
   
    [ self .view addConstraint:blueLeft];
    //  添加藍色的 View 右邊
    NSLayoutConstraint *blueRight = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight  relatedBy:NSLayoutRelationEqual toItem: self .view attribute:NSLayoutAttributeRight multiplier: 1 constant:- 20 ];
    [ self .view addConstraint:blueRight];
    //  添加藍色的 View 的高度
    NSLayoutConstraint *blueHeigt = [NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeHeight  relatedBy:NSLayoutRelationEqual toItem: nil attribute:NSLayoutAttributeNotAnAttribute multiplier: 1 constant: 100 ];
    [ self .view addConstraint:blueHeigt];
   
//  添加紅色 view 上面約束
//  紅色的頂部
    NSLayoutConstraint *redTop = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop  relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier: 1 constant: 20 ];
    [ self .view addConstraint:redTop];
//  紅色 view 與藍色 view 右邊對齊
    NSLayoutConstraint *redRight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeRight  relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRight multiplier: 1 constant: 0 ];
    [ self .view addConstraint:redRight];
  
    //  紅色 view 與藍色 view 的高度相同
    NSLayoutConstraint *redHeight = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeHeight  relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeight multiplier: 1 constant: 0 ];
    [ self .view addConstraint:redHeight];
   
   
    //  紅色 view 與藍色 view 的高度相同
    NSLayoutConstraint *redWidth = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth  relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier: 0.5 constant: 0 ];
    [ self .view addConstraint:redWidth];
   

}

動畫

    self .vSpaceConstraint.constant += 100 ;

    self .hSpaceContraint.constant += 100 ;
    self .widthcontraint.constant += 100 ;
    self .heightContraint.constant += 100 ;
   
   
    [UIView animateWithDuration: 1 animations:^{
//      這個方法是讓從新佈局界面
//      計算約束 , 而後調節控件的位置
        [ self .view layoutIfNeeded];

    }];

——Vfl 語法

偶爾用  

//  必定要 關閉 autoresizing 

- ( void )viewDidLoad {
    [ super viewDidLoad];
   
//  1. 建立子控件 , 添加加到控制器 view 中
    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];
   
//  2. 關閉 autoresizing
   
    blueView.translatesAutoresizingMaskIntoConstraints = NO ;
    redView.translatesAutoresizingMaskIntoConstraints = NO ;
   
//  3. 經過 VFL 添加約束
//   options 對齊方式
//  水平方向
    NSArray *hConstraints = [NSLayoutConstraint constraintsWithVisualFormat: @"H:|-20-[blueView]-20-|" options:NSLayoutFormatAlignAllTop metrics: nil views: @{ @"blueView" :blueView } ];
    [ self .view addConstraints:hConstraints];
   
//  豎直方向
      NSArray *vConstraints = [NSLayoutConstraint constraintsWithVisualFormat: @"V:|-20-[blueView(100)]-20-[redView(==blueView)]" options:NSLayoutFormatAlignAllRight metrics: nil views: @{ @"blueView" :blueView, @"redView" :redView } ];
   
    [ self .view addConstraints:vConstraints];
   
//  VFL 不能參與運算
//    NSArray *h1Constraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(==blueView * 0.5)]" options:NSLayoutFormatAlignAllTop metrics:nil views:@{@"blueView":blueView,@"redView":redView}];
//   
//    [self.view addConstraints:h1Constraints];
    NSLayoutConstraint *redW = [NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier: 0.5 constant: 0 ];
    [ self .view addConstraint:redW];
   

}