IOS中級篇 ——自動布局 Autolayout and VFL，autolayoutvfl

IOS中級篇 ——自動布局 Autolayout  and  VFL，autolayoutvfl
  
*/ 以下不常用  
// 務必記住// 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];
   }