一只爱学习的大头猫(IOS代码自动布局)

 一、自动布局

　　1.Auto Layout是一种基于约束的、描述性的布局系统。在iOS6.0以后加入了一个新类：NSLayoutConstraint。我们可以使用可视化格式化语言Visual Format Language的方式创建约束。

　　　　a.设置视图的大小（即视图的绝对大小）。

 

　　　　b.设置视图的位置（视图相对于父视图或者兄弟视图的位置）。

 

　　　　c.设置视图的对齐方式（相对于父视图或者相对于兄弟视图）。

 

　　2.在使用自动布局之前要对子视图的布局方式进行调整，将自适应向布局约束的转化关掉。

// Default YES 需要将其设置为NO　
- (BOOL)translatesAutoresizingMaskIntoConstraints NS_AVAILABLE_IOS(6_0); 
如 rightButton.translatesAutoresizingMaskIntoConstraints = NO;

 

　　3.代码中一般用到的两个添加约束的方式：

- (void)addConstraint:(NSLayoutConstraint *)constraint NS_AVAILABLE_IOS(6_0);
- (void)addConstraints:(NSArray *)constraints NS_AVAILABLE_IOS(6_0);

　　4.当我们将一个创建好的约束添加到View上时，添加的目标View要遵循以下的规则:

• 对于两个同层级View之间的约束关系，添加到他们的父View上。
• 对于两个不同层级View之间的约束关系，添加到他们最近的共同的父View上
• 对于有层次关系的两个View之间的约束关系，添加到层次较高的父View上

二、- (void)addConstraint:(NSLayoutConstraint *)constraint NS_AVAILABLE_IOS(6_0);

    
    //添加两个允许自动布局的子视图
    UIView *v1 = [[UIView alloc] initWithFrame:CGRectZero];
    v1.translatesAutoresizingMaskIntoConstraints = NO;
    v1.backgroundColor = [UIColor redColor];
    [self.view addSubview:v1];
    UIView *v2 = [[UIView alloc] initWithFrame:CGRectZero];
    v2.backgroundColor = [UIColor grayColor];
    v2.translatesAutoresizingMaskIntoConstraints = NO;
    [self.view addSubview:v2];
    
    //设置子视图的宽度和父视图的宽度相同:子视图（宽度） = 1.0 * 父视图（宽度） + 0
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:v1
                                                          attribute:NSLayoutAttributeWidth
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeWidth
                                                         multiplier:1.0
                                                           constant:0]];
    
    //设置子视图的高度是父视图高度的一半:子视图（高度） = 0.5 * 父视图（高度） + 0
    [self.view addConstraint:[NSLayoutConstraint constraintWithItem:v1
                                                          attribute:NSLayoutAttributeHeight
                                                          relatedBy:NSLayoutRelationEqual
                                                             toItem:self.view
                                                          attribute:NSLayoutAttributeHeight
                                                         multiplier:0.5
                                                           constant:0]];

NSLayoutAttributeHeight、NSLayoutAttributeWidth可以替换成:

NSLayoutAttributeLeft	视图的左边
NSLayoutAttributeRight	视图的右边
NSLayoutAttributeTop	视图的上边
NSLayoutAttributeBottom	视图的下边
NSLayoutAttributeLeading	视图的前边
NSLayoutAttributeTrailing	视图的后边
NSLayoutAttributeWidth	视图的宽度
NSLayoutAttributeHeight	视图的高度
NSLayoutAttributeCenterX	视图的中点的X值
NSLayoutAttributeCenterY	视图中点的Y值
NSLayoutAttributeBaseline	视图的基准线
NSLayoutAttributeNotAnAttribute	无属性

 

 

 

 

 

 

 

 

 

   

   

   

   

三、- (void)addConstraints:(NSArray *)constraints NS_AVAILABLE_IOS(6_0);<</span>

    //通过addConstraints 添加对水平方向上v1的控制--距离父视图左侧距离为0（距离为0的话也可省略）同时将v2的水平方向的宽度和v1设置成相同
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[v1][v2(==v1)]-0-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(v1,v2)]];
    //通过addConstraints 添加对垂直方向上v1的控制--距离父视图上侧距离为0（距离为0的话也可省略）同时将v2的垂直方向的高度和v1设置成相同
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[v1][v2(==v1)]|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(v1,v2)]];
    //最后是垂直布局两个子view
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[v1]-0-[v2]-0-|" options:0 metrics:nil views:NSDictionaryOfVariableBindings(v1,v2)]];