iOS,自動布局autoresizing和auto layout,VFL語言

標籤：

1.使用autoresizing

2.使用autolayout

3.VFL語言(Visual Format Language:可視化格式語言)

 

使用autoresizing

點擊xib檔案，去掉使用autolayout（autolayout和只能使用一個）   中所示   1.代表視圖距離父容器頂部距離固定   2.代表視圖距離父容器左邊距離固定   3.代表視圖距離父容器底部距離固定   4.代表視圖距離父容器右邊距離固定   5.中間水平線表示視圖隨著父容器變寬而變寬(按比例)   6.中間垂直線表示視圖隨著父容器變高而變高(按比例) autoresizing的局限性就是只能表現父視圖與子視圖的關係，而無法表達兄弟視圖之間的關係。在處理複雜布局上比較無力 

使用autolayout

 autolayout的2個核心概念： 參照、約束

 

注意：

如果使用autolayout來約束控制項，那frame就失效了，官方也不建議我們再設定frame了  。

        如果利用autolayout約束一個控制項，和我們以前使用frame約束控制項一樣，必須設定寬度/高度/X/Y,如果缺少一個約束就會報錯，報錯有可能會引發一些未知的bug。 

        如果有紅色錯誤：代表缺少約束，或者約束有衝突（約束可以重複添加 ）

        如果有黃色警告：代表當前的位置大小和約束的位置大小不一樣

       在使用autolayout時，最好給每個控制項起一個名稱，方便閱讀

      在使用autolayout讓某個控制項相對於另一個控制項約束，一定要在另一個控制項周圍

 

    iOS8，預設情況下，左右兩邊會留出一段距離

 

 

   xib編輯頁面autolayout相關約束選項

 

設定好約束後在各個尺寸，橫豎屏下查看效果

   

下面設定紅色視圖寬度為藍色的一半。

先約束紅色和藍色等寬，然後選中約束，改變所寫值（Multiplier乘數），然後紅色就為藍色寬的一半；（註：在水平置中、垂直置中等約束方式上也可以進行類似的約束操作）Priority優先順序一般不用改(優先順序最大為1000，優先順序越高的約束越先被滿足) 

同理寬度也可以採取相同方法

代碼實現Autolayout（太麻煩，開發中不介意這樣用） 代碼實現autolayout的注意點       *要先禁止autoresizing功能，設定view的下面屬性為NO; view.translatesAutoresizingMaskIntoConstraints=NO;       *添加約束之前，一定要保證相關控制項都已經在各自的父控制項上。（先add控制項，再添加約束）       *不用再給view設定frame 代碼實現autolayout的步奏*利用NSLayoutConstraint類建立具體的約束對象。*添加約束對象到相應的view上-(void)addCOnstraint:(NSLayoutConstraint *)constraint;-(void)addConstraints:(NSArray *)constraints;

  在添加目標view約束時會遵循以下規則。(通過代碼添加約束時參照該規則)

      1)對於兩個同層級view之間的約束關係，添加到它們的父view上

      2)對於兩個不同層級view之間的約束關係，添加到他們最近的共同父view上(父view不同，繼續找父view的父view...)

      3)對於有層次關係的兩個view之間的約束關係，添加到層次較高的父view上

樣本：

- (void)viewDidLoad {

    [super viewDidLoad];

    

    //添加2個控制項到父控制項上

    //添加藍色view

    UIView *blueView=[[UIView alloc] init];

    blueView.backgroundColor=[UIColor blueColor];

    //禁用autoresizing

    blueView.translatesAutoresizingMaskIntoConstraints=NO;

    [self.view addSubview:blueView];

    //添加紅色view

    UIView *redView=[[UIView alloc] init];

    redView.backgroundColor=[UIColor redColor];

    //禁用autoresizing

    redView.translatesAutoresizingMaskIntoConstraints=NO;

    [self.view addSubview:redView];

    

    //添加約束

    //添加藍色View距離父控制項左邊的距離固定為20  x

    /*

     item == first item  需要設定約束的控制項

     attribute == 需要設定的約束

     relatedBy == relation 等於

     toItem == second item 被參照的控制項

     attribute == 需要設定的約束

     multiplier == multiplier 乘以

     constant == constant 加上

     */

    //藍色view的左邊等於父控制項的左邊乘以1加20

    NSLayoutConstraint *leftCos=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.viewattribute:NSLayoutAttributeLeft multiplier:1.0f constant:20];

    [self.view addConstraint:leftCos];

    //添加藍色View距離父控制項右邊的距離固定為20  寬度

    NSLayoutConstraint *rightCos=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.viewattribute:NSLayoutAttributeRight multiplier:1.0f constant:-20];

    [self.view addConstraint:rightCos];

    //添加藍色View距離父控制項頂部邊的距離固定為20 y

     NSLayoutConstraint *topCos=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.viewattribute:NSLayoutAttributeTop multiplier:1.0f constant:20];

    [self.view addConstraint:topCos];

    //添加藍色View的高度50                   高度

     NSLayoutConstraint *heightCos=[NSLayoutConstraintconstraintWithItem:blueView attribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqual toItem:nilattribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f constant:50];

    [blueView addConstraint:heightCos];

    

    //設定紅色約束

    //紅色高度和藍色一樣  height

    NSLayoutConstraint *redHeightCos=[NSLayoutConstraintconstraintWithItem:redView attribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeightmultiplier:1.0f constant:0];

    [self.view addConstraint:redHeightCos];

    //紅色的右邊和藍色右邊對齊  x

    NSLayoutConstraint *redRightCos=[NSLayoutConstraintconstraintWithItem:redView attribute:NSLayoutAttributeRightrelatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRightmultiplier:1.0f constant:0];

    [self.view addConstraint:redRightCos];

    //紅色的頂部和藍色底部距離固定20   y

    NSLayoutConstraint *redTopCos=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0f constant:20];

    [self.view addConstraint:redTopCos];

    //紅色寬度等於藍色寬度一半

    NSLayoutConstraint *redWidthCos=[NSLayoutConstraintconstraintWithItem:redView attribute:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidthmultiplier:0.5f constant:0];

    [self.view addConstraint:redWidthCos];

}

 

VFL語言(Visual Format Language:可視化格式語言)

VFL語言是蘋果公司為了簡化Autolayout的編碼而推出的抽象語言

VFL樣本

• H:[cancelButton(72)]-12-[acceptButton(50)]

• canelButton寬72，acceptButton寬50，它們之間水平間距12

• H:[wideView(>[email protected])]

• wideView寬度大於等於60point，該約束條件優先順序為700（優先順序最大值為1000，優先順序越高的約束越先被滿足）

• V:[redBox]-[yellowBox(==redBox)]

• 豎直方向上，先有一個redBox，其下方緊接一個高度等於redBox高度的yellowBox

• H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|

• 水平方向上，Find距離父view左邊緣預設間隔寬度10，之後是FindNext距離Find間隔預設寬度0；再之後是寬度不小於20的FindField，它和FindNext以及父view右邊緣的間距都是預設寬度。（豎線“|” 表示superview的邊緣）

和上面代碼實現Autolayout完成同樣的demo效果

- (void)viewDidLoad {

    [super viewDidLoad];

    

    //添加2個控制項到父控制項上

    //添加藍色view

    UIView *blueView=[[UIView alloc] init];

    blueView.backgroundColor=[UIColor blueColor];

    //禁用autoresizing

    blueView.translatesAutoresizingMaskIntoConstraints=NO;

    [self.view addSubview:blueView];

    //添加紅色view

    UIView *redView=[[UIView alloc] init];

    redView.backgroundColor=[UIColor redColor];

    //禁用autoresizing

    redView.translatesAutoresizingMaskIntoConstraints=NO;

    [self.view addSubview:redView];

    

    //添加約束

    /*

     VisualFormat:VFL語句

     options:對齊

     metrics:VFL語句中用到的變數值

     views:VFL語句中用到的控制項

     */

    //blueView水平方向距離兩邊各20距離,設定了x值和寬度

    NSArray *blueViewHorizontal=[NSLayoutConstraintconstraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nilviews:@{@"blueView":blueView}];

    [self.view addConstraints:blueViewHorizontal];

    //blueView垂直方向距離頂部20距離，高度50 ，blueView底部距離redView為20距離  redView高度==blueView；並且設定紅色和藍色右邊對齊

    NSArray *blueViewVertical=[NSLayoutConstraintconstraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]"options:NSLayoutFormatAlignAllRight metrics:nilviews:@{@"blueView":blueView,@"redView":redView}];

    [self.view addConstraints:blueViewVertical];

    

    //注意：在VFL語句中是不支援乘除法，要用autolayout代碼實現

//    NSArray *redViewHorizontal=[NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(==blueView)]" options:0 metrics:nil views:@{@"blueView":blueView,@"redView":redView}];

//    [self.view addConstraints:redViewHorizontal];

    NSLayoutConstraint *redViewW=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];

    [self.view addConstraint:redViewW];

}

iOS,自動布局autoresizing和auto layout,VFL語言