首页 > 代码库 > iOS,自动布局autoresizing和auto layout,VFL语言
iOS,自动布局autoresizing和auto layout,VFL语言
1.使用autoresizing
2.使用autolayout
3.VFL语言(Visual Format Language:可视化格式语言)
使用autoresizing
使用autolayout
autolayout的2个核心概念： 参照、约束
注意：
如果使用autolayout来约束控件，那frame就失效了，官方也不建议我们再设置frame了 。
如果利用autolayout约束一个控件，和我们以前使用frame约束控件一样，必须设置宽度/高度/X/Y,如果缺少一个约束就会报错，报错有可能会引发一些未知的bug。
如果有红色错误：代表缺少约束，或者约束有冲突（约束可以重复添加 ）
如果有黄色警告：代表当前的位置大小和约束的位置大小不一样
在使用autolayout时，最好给每个控件起一个名称，方便阅读
在使用autolayout让某个控件相对于另一个控件约束，一定要在另一个控件周围
iOS8，默认情况下，左右两边会留出一段距离
xib编辑页面autolayout相关约束选项
设置好约束后在各个尺寸，横竖屏下查看效果
下面设置红色视图宽度为蓝色的一半。
同理宽度也可以采取相同方法
在添加目标view约束时会遵循以下规则。(通过代码添加约束时参照该规则)
1)对于两个同层级view之间的约束关系，添加到它们的父view上
2)对于两个不同层级view之间的约束关系，添加到他们最近的共同父view上(父view不同，继续找父view的父view...)
3)对于有层次关系的两个view之间的约束关系，添加到层次较高的父view上
- (void)viewDidLoad {
[super viewDidLoad];
//添加2个控件到父控件上
//添加蓝色view
UIView *blueView=[[UIView alloc] init];
blueView.backgroundColor=[UIColor blueColor];
//禁用autoresizing
blueView.translatesAutoresizingMaskIntoConstraints=NO;
[self.view addSubview:blueView];
//添加红色view
UIView *redView=[[UIView alloc] init];
redView.backgroundColor=[UIColor redColor];
//禁用autoresizing
redView.translatesAutoresizingMaskIntoConstraints=NO;
[self.view addSubview:redView];
//添加约束
//添加蓝色View距离父控件左边的距离固定为20 x
/*
item == first item 需要设置约束的控件
attribute == 需要设置的约束
relatedBy == relation 等于
toItem == second item 被参照的控件
attribute == 需要设置的约束
multiplier == multiplier 乘以
constant == constant 加上
*/
//蓝色view的左边等于父控件的左边乘以1加20
NSLayoutConstraint *leftCos=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.viewattribute:NSLayoutAttributeLeft multiplier:1.0f constant:20];
[self.view addConstraint:leftCos];
//添加蓝色View距离父控件右边的距离固定为20 宽度
NSLayoutConstraint *rightCos=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.viewattribute:NSLayoutAttributeRight multiplier:1.0f constant:-20];
[self.view addConstraint:rightCos];
//添加蓝色View距离父控件顶部边的距离固定为20 y
NSLayoutConstraint *topCos=[NSLayoutConstraint constraintWithItem:blueView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.viewattribute:NSLayoutAttributeTop multiplier:1.0f constant:20];
[self.view addConstraint:topCos];
//添加蓝色View的高度50 高度
NSLayoutConstraint *heightCos=[NSLayoutConstraintconstraintWithItem:blueView attribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqual toItem:nilattribute:NSLayoutAttributeNotAnAttribute multiplier:1.0f constant:50];
[blueView addConstraint:heightCos];
//设置红色约束
//红色高度和蓝色一样 height
NSLayoutConstraint *redHeightCos=[NSLayoutConstraintconstraintWithItem:redView attribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeHeightmultiplier:1.0f constant:0];
[self.view addConstraint:redHeightCos];
//红色的右边和蓝色右边对齐 x
NSLayoutConstraint *redRightCos=[NSLayoutConstraintconstraintWithItem:redView attribute:NSLayoutAttributeRightrelatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeRightmultiplier:1.0f constant:0];
[self.view addConstraint:redRightCos];
//红色的顶部和蓝色底部距离固定20 y
NSLayoutConstraint *redTopCos=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeBottom multiplier:1.0f constant:20];
[self.view addConstraint:redTopCos];
//红色宽度等于蓝色宽度一半
NSLayoutConstraint *redWidthCos=[NSLayoutConstraintconstraintWithItem:redView attribute:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidthmultiplier:0.5f constant:0];
[self.view addConstraint:redWidthCos];
}
VFL语言(Visual Format Language:可视化格式语言)
VFL语言是苹果公司为了简化Autolayout的编码而推出的抽象语言
- H:[cancelButton(72)]-12-[acceptButton(50)]
- canelButton宽72，acceptButton宽50，它们之间水平间距12
- H:[wideView(>=60@700)]
- wideView宽度大于等于60point，该约束条件优先级为700（优先级最大值为1000，优先级越高的约束越先被满足）
- V:[redBox]-[yellowBox(==redBox)]
- 竖直方向上，先有一个redBox，其下方紧接一个高度等于redBox高度的yellowBox
- H:|-10-[Find]-[FindNext]-[FindField(>=20)]-|
- 水平方向上，Find距离父view左边缘默认间隔宽度10，之后是FindNext距离Find间隔默认宽度0；再之后是宽度不小于20的FindField，它和FindNext以及父view右边缘的间距都是默认宽度。（竖线“|” 表示superview的边缘）
- (void)viewDidLoad {
[super viewDidLoad];
//添加2个控件到父控件上
//添加蓝色view
UIView *blueView=[[UIView alloc] init];
blueView.backgroundColor=[UIColor blueColor];
//禁用autoresizing
blueView.translatesAutoresizingMaskIntoConstraints=NO;
[self.view addSubview:blueView];
//添加红色view
UIView *redView=[[UIView alloc] init];
redView.backgroundColor=[UIColor redColor];
//禁用autoresizing
redView.translatesAutoresizingMaskIntoConstraints=NO;
[self.view addSubview:redView];
//添加约束
/*
VisualFormat:VFL语句
options:对齐方式
metrics:VFL语句中用到的变量值
views:VFL语句中用到的控件
*/
//blueView水平方向距离两边各20距离,设置了x值和宽度
NSArray *blueViewHorizontal=[NSLayoutConstraintconstraintsWithVisualFormat:@"H:|-20-[blueView]-20-|" options:0 metrics:nilviews:@{@"blueView":blueView}];
[self.view addConstraints:blueViewHorizontal];
//blueView垂直方向距离顶部20距离，高度50 ，blueView底部距离redView为20距离 redView高度==blueView；并且设置红色和蓝色右边对齐
NSArray *blueViewVertical=[NSLayoutConstraintconstraintsWithVisualFormat:@"V:|-20-[blueView(50)]-20-[redView(==blueView)]"options:NSLayoutFormatAlignAllRight metrics:nilviews:@{@"blueView":blueView,@"redView":redView}];
[self.view addConstraints:blueViewVertical];
//注意：在VFL语句中是不支持乘除法，要用autolayout代码实现
// NSArray *redViewHorizontal=[NSLayoutConstraint constraintsWithVisualFormat:@"H:[redView(==blueView)]" options:0 metrics:nil views:@{@"blueView":blueView,@"redView":redView}];
// [self.view addConstraints:redViewHorizontal];
NSLayoutConstraint *redViewW=[NSLayoutConstraint constraintWithItem:redView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:blueView attribute:NSLayoutAttributeWidth multiplier:0.5 constant:0];
[self.view addConstraint:redViewW];
}
iOS,自动布局autoresizing和auto layout,VFL语言