先上点干货:
别人的大神的博客:
超赞的纯代码自动布局:http://jixuqianxing.github.io/blog/2014/12/11/20141212/
自动布局详细: http://www.cnblogs.com/wayne23/p/3935453.htmlVFL语句详述: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的作用就很突出啦!
待续...
如果上面引用大牛们的例子产生任何不好的影响,请在评论区提醒哦,小弟马上修改!谢谢!