AutoResizing & AutoLayout in Cocoa

[AutoResize]

     控件初始化流程：

           建立控件->設定預設座標位置->設定自適應規則->AddToSubview(->自適應顯示)

 

    自適應規則示例：

    //控件靠左上角(右邊和下邊自適應)

    view.autoresizingMask = (UIViewAutoresizingFlexibleBottomMargin |

                                          UIViewAutoresizingFlexibleRightMargin);

   

   //控件靠右上角(左邊和下邊自適應)

   view.autoresizingMask = (UIViewAutoresizingFlexibleLeftMargin |

                                        UIViewAutoresizingFlexibleBottomMargin);

  

  //控件寬等比例，靠上不變(左、右、寬自適應，下自適應)

  view.autoresizingMask = (UIViewAutoresizingFlexibleLeftMargin |

                                        UIViewAutoresizingFlexibleWidth |

                                        UIViewAutoresizingFlexibleRightMargin |

                                        UIViewAutoresizingFlexibleBottomMargin);

   

    //橫向距邊框距離不變，寬度自適應，靠上位置不變

   view.autoresizingMask = (UIViewAutoresizingFlexibleWidth |                                 

                                         UIViewAutoresizingFlexibleBottomMargin);

   

    //跟隨父控件等比縮放

    view.autoresizingMask = (UIViewAutoresizingFlexibleLeftMargin |

                                         UIViewAutoresizingFlexibleWidth|

                                        UIViewAutoresizingFlexibleRightMargin |

                                        UIViewAutoresizingFlexibleBottomMargin |

                                       UIViewAutoresizingFlexibleHeight |

                                       UIViewAutoresizingFlexibleTopMargin);

   

      //跟隨父控件縮放，距上、下、左、右邊框位置不變

      view.autoresizingMask = (UIViewAutoresizingFlexibleHeight |

                                          UIViewAutoresizingFlexibleWidth);

 

 

[AutoLayout]

        控件初始化流程：

              建立控件(->設定預設坐標位置) ->AddToSubview ->設定自適應規則 (->自適應顯示)

 

       自適應代碼示例:

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

   [self.view addSubview:view];

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

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

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

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

   [self.view addSubview:item1];

   [self.view addSubview:item2];

   [self.view addSubview:item3];

   [self.view addSubview:item4];

   

   

///示例 1: 設定距邊框爲5pix寬高自適應且不小於（300，200）

NSMutableArray *constraits1 = [NSMutableArray array];

//設定X方向規則:距左右邊距爲5pix不變，寬度不小於300

 [constraits1 addObjectsFromArray:[NSLayoutConstraint

  constraintsWithVisualFormat:@"H:|-5-[view(>=300)]-5-|"

                      options:0

                      metrics:nil

                        views:NSDictionaryOfVariableBindings(view)]];

//設定Y方向規則:距上下邊距爲5pix不變，高度不小於200

 [constraits1 addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-5-[view(>=200)]-5-|"

                                                                                                                 options:0

                                                                                                                 metrics:nil

                                                                                                                    views:NSDictionaryOfVariableBindings(view)]];

//規則生效

[self.view addConstraints:constraits1];

   

///示例 2: 設定X和Y方向等比縮放，且寬、高分別爲父控件的0.九、0.8倍，中心位置對齊

NSMutableArray *constraits2 = [NSMutableArray array];

//設定X方向規則

//設定view的寬度爲父控件的0.9倍

[constraits2 addObject:[NSLayoutConstraint

                        constraintWithItem:view

                                 attribute:NSLayoutAttributeWidth

                                 relatedBy:NSLayoutRelationEqual

                                    toItem:self.view

                                 attribute:NSLayoutAttributeWidth

                                multiplier:0.9

                                  constant:0]];

//設定View的X中心位置跟父控件的中心位置同樣

[constraits2 addObject:[NSLayoutConstraint

                       constraintWithItem:view

                                attribute:NSLayoutAttributeCenterX

                                relatedBy:NSLayoutRelationEqual

                                   toItem:self.view

                                attribute:NSLayoutAttributeCenterX

                               multiplier:1.0 constant:0]];

//設定Y方向規則

//設定View的高度爲父控件的0.8倍

[constraits2 addObject:[NSLayoutConstraint constraintWithItem:view

                        attribute:NSLayoutAttributeHeight

                        relatedBy:NSLayoutRelationEqual

                           toItem:self.view

                        attribute:NSLayoutAttributeHeight

                       multiplier:0.8

                         constant:0]];

//設定View的Y中心位置跟父控件的中心位置同樣

[constraits2 addObject:[NSLayoutConstraint

                        constraintWithItem:view

                                 attribute:NSLayoutAttributeCenterY

                                 relatedBy:NSLayoutRelationEqual

                                    toItem:self.view

                                 attribute:NSLayoutAttributeCenterY

                                multiplier:1.0

                                  constant:0]];

//規則生效

[self.view addConstraints:constraits2];

   

   

///示例 3: 設定兩個控件 等寬

NSMutableArray *constraits3 = [NSMutableArray array];

[constraits3 addObjectsFromArray:[NSLayoutConstraint

             constraintsWithVisualFormat:@"H:[item1(==item2)]"

                                 options:0

                                 metrics:nil

 views:NSDictionaryOfVariableBindings(item1, item2)]];

//規則生效

[self.view addConstraints:constraits3];

   

   

///示例 4: 設定多個控件等間距，且控件寬度不小於50

NSMutableArray *constraits4 = [NSMutableArray array];

[constraits4 addObjectsFromArray:[NSLayoutConstraint

constraintsWithVisualFormat:@"H:|-5-[item1(>=50)-5-[item2(>=50)]-5-[item3(>=50)]-5-[item4(>=50)]]-5-|"

                    options:0

                    metrics:nil

views:NSDictionaryOfVariableBindings(item1, item2, item3, item4)]];

//規則生效

[self.view addConstraints:constraits4];

 

相關文檔：

InterfaceBuild中使用AutoLayout

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html

 

Visual Format Language

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage/VisualFormatLanguage.html#//apple_ref/doc/uid/TP40010853-CH3-SW1