首页 > 代码库 > AutoResizing & AutoLayout in Cocoa

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.9、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

AutoResizing & AutoLayout in Cocoa