autolayout - sizeClass - 1_io autolayout sizeclass-CSDN博客

本文链接：https://blog.csdn.net/u013743777/article/details/46604135

先上点干货：

别人的大神的博客：

超赞的纯代码自动布局：http://jixuqianxing.github.io/blog/2014/12/11/20141212/

自动布局详细： http://www.cnblogs.com/wayne23/p/3935453.html

VFL语句详述：http://www.cocoachina.com/industry/20131108/7322.html

超赞的总结：http://blog.csdn.net/liangliang103377/article/details/40082271

方到用时才恨少啊！！！http://grayluo.github.io/WeiFocusIo/autolayout/2015/01/24/autolayout1/

新发现：http://doc.okbase.net/u013263917/archive/121406.html

根据上面的文章我总结一个自己学习篇章，转和总结以上的精华内容。

iOS6.0以后新增了一个新特性，自动布局Autolayout布局特性，在storyboard和xib文件中，会发现下面的选项：

这就是我们需要重点学习的两个： auto layout 和 size classes

当勾选上之后，以前传统的frame布局都会失去作用！

在代码中需要设置：

autoView.translatesAutoresizingMaskIntoConstraints = NO;

之后将自动布局视图加在父视图上面：

[self.view addSubview:autoView];

因为自动布局约束的建立规则如下（下面）。

之后定义响应的布局约束，并在父视图添加约束条件：

NSArray *constraints1 ＝ autoViewXXXXXConcreateCondition;      
[self.view addConstraints:constraints1];

根据上面，可以用iOS的反射判断是否在该view上是否响应自动布局:

if ([self.view respondsToSelector:@selector(addConstraints:)])
{
    //自动布局
}
else
{
    //传统布局
}

自动布局的规则：

我们来看到单独添加约束的方法：

/* Create constraints explicitly.  Constraints are of the form "view1.attr1 = view2.attr2 * multiplier + constant" 
 If your equation does not have a second view and attribute, use nil and NSLayoutAttributeNotAnAttribute.
 */
+(instancetype)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;

同时考虑到每一个参数的意义：

注意到上面的参数使用的是left和right，结合下面的会知道，下面使用的是leading和trailing （NSLayoutAttributeLeading和NSLayoutAttributeTrailing）。

这位大牛的第一个例子：（http://www.cnblogs.com/wayne23/p/3935453.html）很清晰地讲解了上面的用法：

UIButton *button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[button setTitle:@"测试按钮" forState:UIControlStateNormal];
[button sizeToFit];
[button setBackgroundColor:[UIColor yellowColor]];
button.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:button];

NSLayoutConstraint *constraint;

//上边距
constraint = [NSLayoutConstraint
              constraintWithItem:button
              attribute:NSLayoutAttributeTop
              relatedBy:NSLayoutRelationEqual
              toItem:self.view
              attribute:NSLayoutAttributeTop
              multiplier:1.0f
              constant:50.0f];
[self.view addConstraint:constraint];

//左边距
constraint = [NSLayoutConstraint
              constraintWithItem:button
              attribute:NSLayoutAttributeLeading
              relatedBy:NSLayoutRelationEqual
              toItem:self.view
              attribute:NSLayoutAttributeLeading
              multiplier:1.0f
              constant:100.0f];
[self.view addConstraint:constraint];

//右边距
constraint = [NSLayoutConstraint
              constraintWithItem:button
              attribute:NSLayoutAttributeTrailing
              relatedBy:NSLayoutRelationEqual
              toItem:self.view
              attribute:NSLayoutAttributeTrailing
              multiplier:1.0f
              constant:-100.0f];
[self.view addConstraint:constraint];

//下边距
constraint = [NSLayoutConstraint
              constraintWithItem:button
              attribute:NSLayoutAttributeBottom
              relatedBy:NSLayoutRelationEqual
              toItem:self.view
              attribute:NSLayoutAttributeBottom
              multiplier:1.0f
              constant:-350.0f];
[self.view addConstraint:constraint];

上面的效果大概就是：

相信观察代码也不难理解，就是上左右下（分别是 top left right bottom地设置约束）。为了进一步验证我将上面的代码修改如下：

    /** autolayout自动布局设置了方法：translatesAutoresizingMaskIntoConstraints = NO 之后Frame的概念就要完全抛弃它 **/
    UIView* cotainView = [[UIView alloc] init];
    [cotainView setBackgroundColor:[UIColor grayColor]];
    [cotainView setFrame:CGRectMake(20, 60, 260, 400)];
    [self.view addSubview:cotainView];
    
    
    UIButton* button = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [button setTitle:@"测试按钮" forState:UIControlStateNormal];
    [button sizeToFit];
    [button setBackgroundColor:[UIColor yellowColor]];
    button.translatesAutoresizingMaskIntoConstraints = NO;
    [cotainView addSubview:button];

    NSLayoutConstraint* constraint;
    
    //上边距
    constraint = [NSLayoutConstraint constraintWithItem:button
                                              attribute:NSLayoutAttributeTop
                                              relatedBy:NSLayoutRelationEqual
                                                 toItem:cotainView
                                              attribute:NSLayoutAttributeTop
                                             multiplier:1.0f
                                               constant:50.0f];
    [cotainView addConstraint:constraint];
    
    //左边距
    constraint = [NSLayoutConstraint constraintWithItem:button
                                              attribute:NSLayoutAttributeLeading
                                              relatedBy:NSLayoutRelationEqual
                                                 toItem:cotainView
                                              attribute:NSLayoutAttributeLeading
                                             multiplier:1.0f
                                               constant:60.0f];
    [cotainView addConstraint:constraint];
    
    //attribute上下一样,上面是子视图，下面是
    
    
    //右边距
    constraint = [NSLayoutConstraint constraintWithItem:button
                                              attribute:NSLayoutAttributeTrailing
                                              relatedBy:NSLayoutRelationEqual
                                                 toItem:cotainView
                                              attribute:NSLayoutAttributeTrailing
                                             multiplier:1.0f
                                               constant:-20.0f];
    [cotainView addConstraint:constraint];
    
    //constant约束条件的常数可以有负数， 定义的顺序是上左，同时注意到下面两个的constant是负数值
    
    //
    constraint = [NSLayoutConstraint constraintWithItem:button
                                              attribute:NSLayoutAttributeBottom
                                              relatedBy:NSLayoutRelationEqual
                                                 toItem:cotainView
                                              attribute:NSLayoutAttributeBottom
                                             multiplier:1.0f
                                               constant:-20.0f];
    [cotainView addConstraint:constraint];

结果如下：

也相当好理解吧！就是这个约束不在self.view和button之间产生，而是button和containView中产生。

同时也要注意到一个小细节，上面的sizeToFit是会对大小产生作用的，就是button会变成title的大小，但是经过autolayout的约束后就会遵循约束的条件。但是进一步验证，将它输出后发现：

    NSLog(@"button autolayout changed :%@", NSStringFromCGRect(button.bounds));

输出的是sizeToFit的内容！就是说明，autolayout是页面的约束条件作用，而对控件本身的内容却是不做影响的，所以要小心啊，千万不能还停留在传统的frame定义和的概念。

所以学东西的时候要灵活！所以继续探讨，大牛的例子都是上左下右都制定好了约束，那如果去掉其中的一个呢？有没有想过？例如把底部约束去掉，运行。得到下面的结果：

结果很明显就是底部的约束明显失去，而上左右都存在原来制定的约束，所以也说明了sizeToFit为啥还是原来的值，嘻嘻，原来如此，当约束失效、不完整、冲突等等sizeToFit这个捍卫内容frame的作用就很突出啦！

待续...

如果上面引用大牛们的例子产生任何不好的影响，请在评论区提醒哦，小弟马上修改！谢谢！