iOS,自动布局autoresizing和auto layout,VFL语言

1.使用autoresizing

2.使用autolayout

3.VFL语言(Visual Format Language:可视化格式语言)

使用autoresizing

点击xib文件,去掉使用autolayout(autolayout和autoresizing只能使用一个)
  iOS,自动布局autoresizing和auto layout,VFL语言
如图中所示
   1.代表视图距离父容器顶部距离固定
   2.代表视图距离父容器左边距离固定
   3.代表视图距离父容器底部距离固定
   4.代表视图距离父容器右边距离固定
   5.中间水平线表示视图随着父容器变宽而变宽(按比例)
   6.中间垂直线表示视图随着父容器变高而变高(按比例)
 
autoresizing的局限性就是只能表现父视图与子视图的关系,而无法表达兄弟视图之间的关系。在处理复杂布局上比较无力
 

使用autolayout

 autolayout的2个核心概念: 参照、约束

注意:

如果使用autolayout来约束控件,那frame就失效了,官方也不建议我们再设置frame了  。

如果利用autolayout约束一个控件,和我们以前使用frame约束控件一样,必须设置宽度/高度/X/Y,如果缺少一个约束就会报错,报错有可能会引发一些未知的bug。

如果有红色错误:代表缺少约束,或者约束有冲突(约束可以重复添加 )

如果有黄色警告:代表当前的位置大小和约束的位置大小不一样

在使用autolayout时,最好给每个控件起一个名称,方便阅读

在使用autolayout让某个控件相对于另一个控件约束,一定要在另一个控件周围

iOS8,默认情况下,左右两边会留出一段距离

xib编辑页面autolayout相关约束选项

iOS,自动布局autoresizing和auto layout,VFL语言
iOS,自动布局autoresizing和auto layout,VFL语言

设置好约束后在各个尺寸,横竖屏下查看效果

iOS,自动布局autoresizing和auto layout,VFL语言
Xcode8中查看
iOS,自动布局autoresizing和auto layout,VFL语言
 
 

下面设置红色视图宽度为蓝色的一半。

先约束红色和蓝色等宽,然后选中约束,改变下图所写值(Multiplier乘数),然后红色就为蓝色宽的一半;
(注:在水平居中、垂直居中等约束方式上也可以进行类似的约束操作)
Priority优先级一般不用改(优先级最大为1000,优先级越高的约束越先被满足)
iOS,自动布局autoresizing和auto layout,VFL语言
 

同理宽度也可以采取相同方法

代码实现Autolayout(太麻烦,开发中不介意这样用)
代码实现autolayout的注意点
       *要先禁止autoresizing功能,设置view的下面属性为NO;
 view.translatesAutoresizingMaskIntoConstraints=NO;
       *添加约束之前,一定要保证相关控件都已经在各自的父控件上。(先add控件,再添加约束)
       *不用再给view设置frame
代码实现autolayout的步奏
*利用NSLayoutConstraint类创建具体的约束对象。
*添加约束对象到相应的view上
-(void)addCOnstraint:(NSLayoutConstraint *)constraint;
-(void)addConstraints:(NSArray *)constraints;

在添加目标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];

}

iOS,自动布局autoresizing和auto layout,VFL语言iOS,自动布局autoresizing和auto layout,VFL语言
 

VFL语言(Visual Format Language:可视化格式语言)

VFL语言是苹果公司为了简化Autolayout的编码而推出的抽象语言

VFL示例
  • 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的边缘)
和上面代码实现Autolayout完成同样的demo效果

- (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];

}

上一篇:Pawn Brotherhood


下一篇:【微框架】Maven +SpringBoot 集成 阿里大鱼 短信接口详解与Demo